見出しCSS
状態:-
閲覧数:11,877
投稿日:2013-03-05
更新日:2017-01-07
「センスが良い小見出し」を探す
・似たサンプルが多くヒットするので、探すのは結構大変
・「見出し」ではなくて、「小見出し」を探している。具体的にはh3
・h2タグより目立ってはいけない
・レスポンシブなので、極力画像は利用したくない
・どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい。それでいて見やすいヤツ希望(矛盾してる?)
1.「探した小見出しCSS」を片っ端から単独設置
2.その中で気になった見出しを、サイトに合うかどうか、一つずつ取り込んでいって確認&選考
・似たサンプルが多くヒットするので、探すのは結構大変
要件
・「見出し」ではなくて、「小見出し」を探している。具体的にはh3
・h2タグより目立ってはいけない
・レスポンシブなので、極力画像は利用したくない
・どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい。それでいて見やすいヤツ希望(矛盾してる?)
Task
1.「探した小見出しCSS」を片っ端から単独設置
2.その中で気になった見出しを、サイトに合うかどうか、一つずつ取り込んでいって確認&選考
候補一覧
選考
決戦選考
結果発表
公表する必要ないけど、何選んだか分からなくなるのでメモ
・1位「水平線形カスタマイズ … 15-14」
・2位「水平線形カスタマイズ … 15-15」
・3位「水平線形カスタマイズ … 15-13」
・4位「吹き出し系カスタマイズ … 14-8」
結局は?
・上記「結果順位」でいくことにした
・飽きたら随時変更していく、ということで…
1位「デモ15-14」不具合
・使い始めた初日に早速不具合発見
・それは長いテキスト利用時に折り返し表示されると、影の白い部分が見える、と言うもの
・元々、この「デモ15-14」は、テキスト量により影が表示されるという弱点がある(白背景しか利用不可)
・影位置を調整すれば何とかなるのかもしれないけれど、(結構時間がかかるような気がするので)とりあえず気が付かなかった、と自分に言い聞かせスルーすることにしよう
・2日かけた結果がこれかよ! 頼むぜ>オレ
「小見出しCSS」を探してみて分かったこと
「2日かけて調査」した結果、感じたこと
1.「小見出し」と「見出し」は違う
・「小見出し」は一般的に「見出し」より、数多く表示される
・1回表示させるのと、複数回表示されるのとでは、ユーザーが受け取る感じ方が変わってくるので注意が必要
・今回、自分で実際にサイトに組み込んでみて初めて気が付いた
2.「letter-spacing」最強
・これまでほとんど積極的に利用してこなかったが、見出しには「letter-spacing」は必須
・利用すると、見違えること間違いなし
3.「小見出し」と言えど、サイトに合わせることが必須
・例えていえば、店頭に並べられている洋服みたいなものだと思う
・ショーウインドウで眺めているのと、自分で実際に着こなしてみるのとでは丸っきり違う
・そんな感じ
・今回、色々「小見出しCSS」を探してみたが、いい感じと思ったのに、いざサイトへ設置してみると全然合わない、というのが結構あった
・慣れてきたらイケるのかもしれないが、正直サイトへ実際に組み込んでみるまで、合うか合わないのか、全然分からないな、と思った
どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい、という危険発想
発想が危険
どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい
・確かに昨日こう書いたけれど、よく考えたらこれはとっても危険な思想・デザイナーのポートフォリオでもないのに、格好良いサイトを作りたい、て言ってるのと一緒
「小見出し」の存在理由は?
・言うまでもないことだが、「小見出し」は自分が格好つけたいがために存在しているわけでは決してない
・「見出し」を分かりやすく整理する、という重要な使命を帯びているわけだ
ゴールから考えよう
・そもそも、サイトを作成する目的は何か?
・まずはそこから考えなければいけない
・「格好良いサイトを作りたい」て言う目的でサイトを作成するのは……
・と言うか、何書こうとしているんだ。オレは
・そんなのどうだっていいじゃん
・やっと「小見出し」に目途がついたんだから、この件、もう終了ー
新規候補
これから確認予定
・HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
・斜めのストライプ