月別: 2017年8月

(18) テーブルの列を縦方向に並べる

やりたいこと

大画面で横方向に伸びているテーブルを、
小画面のときには縦方向に表示したい。

これを

こうしたい。

今まではやり方がわからなくて、環境変数 $_SERVERからブラウザ種別を取得して描画の仕方を分けていた。
これからはそんな面倒くさいとことをしなくてよくなりそうだ。

実現方法

CSSだけで実現可能だ。
画面幅が小さくなった時に th と td を display:block してやればよい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
table{
  width: 100%;
  border: 1px #000 solid;
  border-collapse: collapse;
}
th,td{
  border: 1px #000 solid;
}
th{
  background-color: #ffe;
}
@media (min-width: 768px) {
  th,td{
    width: 50%;
  }
}
@media (max-width: 767px) {
  th,td{
    width: 100%;
    display: block;
  }
}
</style>
</head>
<body>
<table>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
</table>
</body>
</html>

以下、サンプルページです。
http://hp.dogrow.net/sample/00018/


(17) WordPressでサイドバーにメニューを表示

手順1:「外観」-「メニュー」で新規メニューを作成する。

手順2:「外観」-「ウィジェット」で「カスタムメニュー」を貼り付ける。
このとき、手順1で作成したメニューを選択する。

以上

(16) ボタン押下時にカーソル位置に文字列を挿入

ボタン押下により、textareaで編集中の文章のカーソル位置に、任意の文字列を挿入したい。
これをJavaScriptで実装する。

ほぼほぼこちらの内容を参考にさせていただいた。
http://qiita.com/noraworld/items/d6334a4f9b07792200a5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(function(){
  $("a[name='option']").click(function(){
    var textarea = document.querySelector("textarea[name='bun']");
    var sentence = textarea.value;
    var len      = sentence.length;
    var pos      = textarea.selectionStart;
    var before   = sentence.substr(0, pos);
    var word     = $(this).text();
    var after    = sentence.substr(pos, len);
    sentence = before + word + after;
    textarea.value = sentence;
    return false;
  });
});
</script>

</head>
<body>

<textarea name="bun" style="width:100%;height:10rem"></textarea>

<a name="option" href="">[山田さん]</a>
<a name="option" href="">[加藤さん]</a>
<a name="option" href="">[岡本さん]</a>

</body>
</html>

サンプルはこちらです。
//hp.dogrow.net/sample/00016/


(15) HTTPS通信下でJQueryが動かない… [解決]

原因:

読み込もうとしている JQueryのパスが http指定だった…

対策:

変更前

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

変更後

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

※httpの部分を外した。 → ブラウザが適切に補完してくれる。