HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
擬似要素を使ってfloatを解除する - Qiita
子要素にfloatかけてると、親要素の高さが潰れてしまうことがある。 たいていその原因は、cssでclear: bothしていないから。 下記のようなコードを書けば、親要素に自然な高さを持たせることができる。 <div class="parent"> <div class="child">あああ</div> <div class="child">いいい</div> </div> .child { float: left; } .parent { zoom: 1; /* float解除 for IE6/7 */ } .parent:after, .parent:before { content: ""; clear: both; display: block; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
