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

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

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





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

横ならびリストで文字を上下左右中央に配置したい、ってことは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デザインにおいては、もしすべてのパーツが単調に置かれて

Google「ハングアウト」の絵文字が可愛すぎる。

こんにちは、クリエイティブフレークです。 チャットやインスタントメッセージ機能と言えば、LINEやFacebook、Skypeなど今やたくさんありますが、みなさんはどれを使ってますか? 私はこういうのを使い始めたのが、かれこれ10年近く前になりますねー。 MSNメッセンジャーと、Yahooメッセンジャーを使っていました。 今回はGoogle「ハングアウト」の絵文字がゆるかわな件をご紹介。 ハングアウトの前身が「Googleトーク」というものなのですが、まさに最近「ハングアウト」へ移行したばかり。 ▼他のチャットシステムと同じような使い勝手 ▼絵文字(顔文字) ゆるい! ▼絵文字(乗り物) かわいい! ▼絵文字(いろいろ) 今年流行のカラーとフラットデザインを用いたアイコンは、なんと日本初! 絵文字は一覧から選べるだけでなく、キーボードからの入力も可能! ▼Google IMEで「くだもの」と入力すると いろいろ出てきます。 ここでのプレビューとハングアウトで送信される絵文字はちょっと違いますが、断然ハングアウトの絵文字がかわいい! ぜひぜひ試してみてください。 Googleハングアウト Written by Creative Flake

timeタグって結局何だっけ?メリットは?

こんにちは、クリエイティブフレークです。 普段はあえてコードに組み込むことがあまりないtimeタグですが、このtimeタグには利点もたくさん。 timeタグっていうくらいだから、時間に関するタグなんでしょ?ってくらいは分かると思いますが、改めて考えてみます! <time>タグについて ・機械が「時間」や「期間」として認識できるHTMLタグ ・スケジュールやアーカーイブなどに使用されることが多い ・WordPressではデフォルトのテーマに使われている 一度は消えた<time>タグ <time>タグは2009年、HTML5のタグとして一旦は追加されたもの、2011年に削除されてしまいました。 しかし間もなく、時間要素が改良されたタグとして復活しました。 タグと属性 2014年7月を記す場合。 <time>2014-07</time> オプションとしてdatetimeという属性を追加することができます。 <time datetime="2014-07">雨の多い蒸し暑い夏</time> <time datetime="2014-07">2014年7月</time> これは人間が分かりやすい形式で自由に記述します。 属性に関する10個の方法 ①年月 2014-07 ②日付 2014-07-01 ③年をつけないパターン 07-31 ④時間だけ(秒はオプション) 12:34:10.999 ⑤日付と時刻 日と時間の間に「T」を入れます。(TはスペースでもOK) 2014-07-01T13:50 ⑥タイムゾーン +または-からスタート。:(コロンはオプション) +09:00 ⑦ローカル日時 2014-07-01T23:59:59+09:00 ⑧年と週(週の前に「W」をつけます) 2014-W21 ⑨年だけ 2014 ⑩期間(週:w、日:d、時間:h、分:m、秒:s) 1w 2d 2h 30m 10.501s 使用例 富士山が世界遺産に登録されたのは、<