テンプレート 【FontAwesome】アイコン表示に便利なWebフォントをcss擬似要素で指定
WebアイコンフォントのFontAwesomeの使い方を紹介します。
アイコンを画像で表示すると、スマホでビンチしたときに表示が粗くなったりしますが、Webフォントだと表示がハッキリすると共に、文字とセットで使った場合フォントサイズと連動...
テンプレート
テンプレート 
テンプレート 【btn】画像を使わずCSSで作る「ボタン」のサンプルコード
画像を使わず、html＋cssで設定したボタンデザインのサンプルコードです。背景にグラデーションを使ったり、ブラウザの幅が480pxより狭くなると、幅や文字が小さくなるCSSを、aタグに設定しています。
デモ
ブラウザの幅を伸縮させると...
テンプレート 【div】段組みをレスポンシブ対応させるCSSのサンプルコード
段組レイアウトをレスポンシブ対応させるCSS設定として、tableのtrやtdをdisplay: blockでwide: autoにする方法をご紹介しましたが、今回はもっとシンプルな、divタグで組んだ段組にCSSを設定して、PCで横並びの...
テンプレート 【table】表組（テーブル）をレスポンシブ対応させるCSS
tableタグで作った表組をスマホに対応させた、html＋cssのサンプルコードになります。
ブラウザの幅が480pxより狭くなると、<th><td> が縦並びになる設定です。
以下のような、tableタグで組ん...