レスポンシブ対応のホームページを作る際に、よくある文章の改行位置問題。パソコンで見たときはいい感じに改行されているのに、 スマートフォンで見たときには、おかしな位置で改行されている。。。どちらで見た場合もきれいに改行されるよう、ブレークポイントで改行を制御するサンプルです。

意外と役に立つ、応用の効きやすいパンクズリストのサンプルです。Font Awesomeの矢印を:before擬似要素を使って表示することで、HTMLがスッキリします。contentプロパティに使いたいアイコンフォントを入れることで、ちょっとデザインを変更するのにわざわざ画像を作り直したりすることもなくなり、cssの変更だけで楽チン簡単更新です。

View チェックボックス::<label>タグに id+for で紐づけるタイプ チェックボックス:全体を<label>タグで囲み、テキストを<span>で囲むタイプ ラジオボタン:<label>タグに id+for …