谷です。
今回はデザインブログらしく、デザイン系の記事を書きます。
私は企画デザインで主にHTML/CSSコーディングと
プロモーション系以外のデザインをしています。
具体的にはボタンの画像や、見出しの装飾画像などです。
※制作するサイトによっては全体の情報設計などもおこないます。
デザインブログというからには、ブログの投稿記事なども
見やすく見栄えよく！と思い立ったので、CSSを利用した
簡単な見出しのデザインを紹介します。
画像・余分なマークアップ(タグを加えたりとか）無しでデザイン
↑のような見出しのデザインですね。
見出しに該当する文章は基本的に「h○タグ」でマークアップされますので
そのh○タグ（今回はh4タグ）を装飾していきます。
1.これは見出しです。
非常にシンプルな形です。ブログの記事のタイトルの装飾は
これの色違いですね。
2.これは見出しです。
付せんのようなデザインで、よくある形です。
3.これは見出しです。
上下に区切り線がつくので記事が読みやすくなりますね。
4.これは見出しです。
１番のものに下線を加えました。これも区切りになるので見やすくなります。
5.これは見出しです。
下線を点線にすると少しかわいくなります。
6.これは見出しです。
背景色をつけて少し主張。見出しとしてはわかりやすいですね。
7.これは見出しです。
上下でなく左右に太線。あまり見ない形で新鮮。
8.これは見出しです。
左・下、右・上とそれぞれ２色で分けると少し立体的？
個人的におすすめなのは下記の２つです。
9.これは見出しです。
10.これは見出しです。
配色もふくめて、スマートに見えるのではないでしょうか？
これらはすべて、
-
h4 {
-
margin-bottom: 1em;
-
padding: 5px 10px;
-
border-top: 上の線の太さ 形 #色;
-
border-right: 右の線の太さ 形 #色;
-
border-bottom: 下の線の太さ 形 #色;
-
border-left: 左の線の太さ 形 #色;
-
background-color: #背景色;
-
font-size: 14px;
-
}
上記のようなスタイルで、線と背景色を変更しています。
※線無しの場合は「border-top: none;」のように指定
※背景色無しの場合は「background-color: transparent;」のように指定
※font-sizeなどは「%」や「em」のような「相対指定」の方が
本来は望ましいです。
最後におまけでなんだかよく分からない装飾を。
おまけ．これは見出し？です。
うーん、錯覚しそうな見栄えです。
これはこれでおもしろいと思います。
h○タグにspanタグなどを追加したり、画像を使えばもっといろいろできますが
今回のような形でも装飾するとしないとでは全然違うので
導入してみてください。
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
ページの先頭に戻る
私は、CSS勉強中、WEB業界に入って半年経たない未熟もんです（汗）。その前にWEBスクール”デ◎ハ◎”に通っていましたが、やっぱっりまだまだ現場には対応できません。
http://www.studycss.net/
↑↑↑
こんなん見てみたり、WEB標準の教科書を読んでみたりと色々してますが・・・。また、なにかお勧めのもん等あれば教えていただきたく思います！！
コメントありがとうございます。
個人的には、知識をつけるのと実践かねて、
「実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips」
こちらの本をおすすめします。
しかし技術先行では基本的なことが抜けたままになるので、「WEB標準の教科書」のようなWeb標準というところをきちんと押さえるために「Designing with Web Standards―XHTML+CSSを中心とした「Web標準」によるデザインの実践」なども読んでおくといいかもしれません。
イチバン良いのはひたすら作ることだとおもいます