ウェブデザイン – 参考にしたい見出しデザイン
ウェブデザインにおいて、見出しタグ（h1, h2, h3等）は各ページのデザインの善し悪しを分ける重要な要素です。しかし、多くはテキストベースであるため、常套的になりやすく、ウェブデザイナーの頭を悩ませます。今回はそのブレークスルーになるような参考にしたい見出しデザインをご紹介します。
cultural solutions uk
[css]
h1 {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
font-family: “Century Gothic”,Arial,Helvetica,sans-serif;
font-size: 95px;
font-weight: bold;
letter-spacing: -5px;
line-height: 75%;
opacity: 0.8;
text-shadow: 0 1px 1px #999999;
}
[/css]
フォントに指定された”Century Gothic”は柔らかい中にもインパクトがあります。letter-spacingやline-heightを狭く取っているのが特徴で、全体のバランス感が良いと思います。
jonwallacedesign
[css]
h2 {
color: #820F00;
font-family: Calvert Light,”Cambria Regular”,”Cambria”,Georgia,”Times New Roman”,Times,serif;
font-size: 3.3em;
letter-spacing: -3px;
padding-bottom: 6px;
text-shadow: -1px 0 rgba(0, 0, 0, 0.4), 0 -1px transparent, 0 1px rgba(255, 255, 255, 0.4), -1px -2px transparent;
}
[/css]
こちらもletter-spacingを詰めることでフォントの存在感が強調されています。さらにtext-shadowを入れることで立体感を出しています。
クイーンズアベニューα
h1タグ内の先頭の文字のみをspanで括り、そこだけ別の色を使用しています。この方法であれば、任意の箇所のみフォントサイズを変更するなど柔軟な装飾が可能ですね。
Third Culture Studios
こちらは、単語単位をspanで括り、CSSを適用しています。細かなタイポグラフィデザインを施したい場合に有効な手段かもしれません。
英字の場合、エイリアスの効いたフォントの種類が豊富なので、日本語では必ずしも上述したサイトのような質感にはなりませんが、テクニックとしては参考にしていただけると思います。
オススメ記事
-
デザイン力を上げる無料筆字フォント
プレゼンテーション資料、手紙、ウェブデザイン、様々なシーンでフォントはデザイン向上の重要な役割を果たします。今回はその中でも稀少性が高い無料の筆字フォントをご紹介します。WindowsとMacの両環境でご利用いただけますので、是非、お試しください。
-
Kindleにより出版業界が大きく変わる
Amazon.comが販売する電子ブックリーダー「Kindle」についてはこれまで何度か触れてきました。「「Kindle」は次なるアマゾンの起爆剤となるか？」では、その成長性に私見を述べさせていただきましたが、Kindleはそれ以上の変革を出版業界に与えようとしています。その引き金となるのが「Digital Text Platform」の存在です。
-
OpenOffice.orgで好きな色を追加する方法
OpenOffice.orgではすべてのアプリケーションにおいて共通のカラーパレットを用意していますが、その数は百弱で微妙な色彩を表現することができません。これにより特に制限を感じてしまうのが「Impress」と「Draw」です。以下では、カラーパレットに好きな色を追加する方法をご紹介します。
-
HTML – METAタグの配置には要注意！
HTMLコーディングをしている際に遭遇したちょっとした文字化けハプニングです。そのサイトはXHTML 1.1で作成していました。HEADタグ内で文字コード（UTF-8）を指定し、ファイル形式にもUTF-8を使用していため、安心していたのですが、一部の端末のIEで開いたところ、文字化けを起こしているのです。
Loading ...