スキップしてメイン コンテンツに移動

何度やってもできなかった人も!横ならびリストで上下左右中央に。

こんにちは、クリエイティブフレークです。





コーディングの鉄板、リスト。

横ならびリストで文字を上下左右中央に配置したい、ってことは1度は遭遇したことがあるかと思います。

でも思うようにいかないんだけど……って人も必見、絶対にできます!





↓↓↓まずは基本はこれだけ覚えましょう。↓↓↓



HTML

<ul>
<li><p>リスト1</p></li>
<li><p>リスト2</p></li>
<li><p>リスト3</p></li>
</ul>


CSS

li {
 float: left;
 list-style-type: none;
 margin: 10px;
}
li p {
 background: #8AD5DF;
 border: 1px solid #eee;
 color: #fff;
 font-size: 18px;
 display: table-cell;
 width: 150px;
 height: 100px;
 text-align: center;
 vertical-align: middle;
}


"text-align"が左右中央で、"vertical-align"が上下中央。

そこへ"display : table-cell;"で要素の表示方法をtdのような要素に指定します。



あとは、このリストに好きな幅(width)と高さ(height)を指定すると、指定した大きさの上下左右中央に文字が来るはず。



たとえば、背景画像が決まってって、その中に文字を収めたい、ってときにも便利です。


他には文字の長さが決まってないとき、可変にしたいときにも、自動的に上下中央になってくれて便利です。




ありがちなミス
今回<p>タグを内包させ、リストに対して"float : left"を、その中の<p>に対して上下左右中央指定をしましたが、これを一緒のタグ内で行うのはNG。 この"float : left"だけは別の要素で!





横ならびリストで上下左右中央の応用


文字だけじゃなく、画像や要素全体をリストの上下左右中央に配置したい!という場合も同じ方法でOK。

↓↓↓こんな電車の駅名標みたいなものだって↓↓↓

HTML

<ul>
<li><p>東 京<span>Tokyo</span></p></li>
<li><p>神 田<span>Kanda</span></p></li>
<li><p>御茶ノ水<span>Ochanomizu</span></p></li>
<li><p>四ッ谷<span>Yotsuya</span></p></li>
<li><p>新 宿<span>Shinjuku</span></p></li>
</ul>


CSS

li {
 float: left;
 list-style-type: none;
 margin: 10px;
}
li p {
 border: 1px solid #eee;
 font-size: 24px;
 display: table-cell;
 height: 110px;
 text-align: center;
 vertical-align: middle;
}
li p span {
 border-top: 10px solid #008836;
 display: block;
 font-size: 14px;
 padding: 2px 100px;
}






Written by Creative Flake

コメント

このブログの人気の投稿

ゲシュタルトの法則をWebデザインにも利用しよう

こんにちは、クリエイティブフレークです。

一度は聞いたことがあるかもしれない「ゲシュタルト」。

ゲシュタルト
人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt :形態)と呼ぶ。



人間の脳がものの形、要素をどのように認識するか、ということですね。

人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。





ゲシュタルトの法則1 : 近接の法則



近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。





ゲシュタルトの法則2 : 類同の法則



類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。





ゲシュタルトの法則3 : 共通運命の法則



共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。
共通運命の法則は、近接の法則や類同の法則よりも強く働く。





ゲシュタルトの法則4 : 良い連続の法則



良い連続の法則は、図形はつながった形になりやすいと認識されやすい。
近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。





ゲシュタルトの法則5 : 閉合の法則



【】や()のように、閉じた形は同じグループだと認識されやすい。
】【 は同じグループと認識しづらい。





ゲシュタルトの法則6 : 面積の法則



小さいものが図として、大きいものが背景として認識されやすい。





ゲシュタルトの法則7 : 対称の法則



対称な図形は閉じた図として認識されやすい。





このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。

たとえばリモコンのボタン配列。



数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。





こちらは私のMacのドック。



急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。





Webデザインにおいては、もしすべてのパーツが単調に置かれていたら……



どこを見ていいのかも分かりづらく、どれがクリックできるのかも分かりづらい。



色や形を変えたり、適度な距…

Photoshopで文字にアンチエイリアスをかける

こんにちは、クリエイティブフレークです。

Photoshopで文字を書いていると、「太字を選択するほどでもないけど、あと気持ちちょっと太かったらいいのに!」、「あとちょっとクリアに見せたいのに!」と思ったことはありませんか?



そんなときに活用したいのが「アンチエイリアス」です。

「エイリアス」とは曲線がギザギザ、ガタガタに表現されてしまうことで、ドット絵みたいに見えます。

なので「アンチ」って言うんですね。



実際に見比べてみると


▲ヒラギノ角ゴシックPro 24pt



明らかに「なし」を選択したものはギザギザです。

「太く」と「シャープ」はちょっと太い感がありますが、「鮮明」と「なめらか」の差が難しいですね。



今度はフォントサイズを変えてみました。


▲ヒラギノ角ゴシックPro 14pt



個人的には、文字が太くなる「シャープ」と「太く」がややジャギー感(ギザギザ感)が残っていますが、「鮮明」と「滑らかに」はフォントサイズを小さくしたときに潰れてしまいやすいイメージです。



では実際どうやって変更するの?なのですが、Photoshop CS6を例に説明します。


▲テキストツール(Tの形)を選びます




▲文字を書いたら上のアンチエイリアスを選びます(うちのマシンが英語ですみません)

Web用や印刷用など、用途によって強弱を使い分けたいですねヽ(・∀・)ノ



Written by Creative Flake

白の可能性は無限大!無料の白い背景10個まとめ

使用度の高い白とグレーを使った、無料でダウンロードできる背景パターンを集めました。
定番・王道パターンから、最新トレンドのパターンまで素敵なパターンをまとめています。



大きめ白菱型パターン 立体感のあるグラデーションの白菱型パターンはふんわりとした印象にも、ラグジュアリーな印象で、美容系やウェディング系にも使える素材。

大きめ白菱型パターン素材のダウンロード



小さめ白菱型パターン こちらも自然な感じに立体感のある白菱型パターン。背景はもちろん、ボタンの一部にしても使えそうなおしゃれな素材。

小さめ白菱型パターン素材のダウンロード



四角なパターン 幾何学的な空間のような四角モチーフのパターン。奥行き感があって、Web素材にも印刷用素材にも使えそう。

四角なパターン素材のダウンロード



ネットワークなパターン 点と点を線でつないだ、ネットワークのような格子状パターン。スタイリッシュな印象にぜひ。

ネットワークなパターン素材のダウンロード



六角形のシームレスパターン 六角形をモチーフにしたつなぎ目のない、シームレスパターンです。色を変えたり、透過度を変えてみてアートな印象にも。

六角形のシームレスパターン素材のダウンロード



四角格子のパターン ドットでつないだ四角形の格子のパターンは、かわいい感じに。

四角格子のパターン素材のダウンロード



白のポリゴンパターン 自分で描くと結構大変なポリゴンパターン。数年前から人気継続中です。

白のポリゴンパターン素材のダウンロード



白のポリゴンパターン 上のポリゴンパターンとはちょっと違う、折り紙を折ったようなパターン。人とは違うポリゴンを探していたという方はぜひこちらを。
白のポリゴンパターン素材のダウンロード



セールっぽい放射状のパターン 白い放射状はクリーンでおしゃれ。中心を引き立てたいときにも、背景にももちろん。
セールっぽい放射状のパターン



三角形のパターン どんなイメージにも使えそうな三角形のパターン。ちょっとした色のアクセントでさらに目を引く印象に。
三角形のパターン素材のダウンロード







Written by Creative Flake