横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
ミニマリズムなウェブデザインから学ぶ、5つの機能的な特徴
ミニマリズムなウェブデザインからユーザーが本当に必要とする機能を学び、散らかったウェブデザインから卒業する方法を紹介します。 Top Minimalist Website Designs: Trends and Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストベースのナビゲーション グリッド カラーの効果的な使い方 より多くの画像、より少ないテキスト ハイパーミニマリスト テキストベースのナビゲーション 画像のロールオーバーを持っていないテキストベースのナビゲーションです。これはユーザーを案内するのに多くを語る必要のないシンプルなテキストメッセージとも言えます。 単に水平に並べただけのものはクラッシクで、最近のサイトではその配置に工夫があります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
