[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
グリッドレイアウトなレスポンシブWebデザイン対応のテンプレートを手軽に生成出来るジェネレーター・Responsify
オンラインで手軽にレシポンシブWeb デザイン対応のテンプレを生成できる というジェネレーター・responsify.it のご紹介。グリッドレイアウトにも 対応可能です。 この手のはいくつか同じツールがありますけど、これはかなり使いやすい印象でした。操作もシンプルですし、スターターキットを生成するのに使えそうです。 レスポンシブWebデザイン対応のテンプレートを手軽に生成出来るグリッドの調整が可能なジェネレーター。スマフォやタブレットでの表示確認も出来ます。 操作感はよくあるグリッドレイアウトのテンプレジェネレーターと変わりません。 使い方は上図の通りです。 ダウンロードできるテンプレートにはjQuery、modernizrが装備されており、IE6と7にも対応したclearfixも含まれていました。総合的に見て、結構いい感じのジェネレーターじゃないかなと思います。 Responsify
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
html5-memo.com