リストを横向きに配置してメニューバーを作る(float編) - スタイルシートTipsふぁくとりー
《2016年2月2日 09:18 公開/更新》 リストを横向きに配置してメニューバーを作る(float編) [リスト,配置] ウェブサイト内の各コーナーへのリンクをメニューとして横向きに配置した「メニューバー」を簡単に作るにはいくつかの方法があります。最も簡単なのは、ただ普通にリンク(a要素)を並べるだけです。標準で文字列は横向きに並びますから、バーのように見えるデザインさえ加えれば「メニューバー」になります。そういう単純なメニューもよく見かけます。 しかし、「メニュー」というのは一種の「リスト」なので、リストを構成するHTML(ul要素＋li要素)を用いて記述すべきだという意見もあります。私も基本的にはその方法で作るようにしています。 ul要素とli要素とで作るリストは、デフォルトでは「箇条書き」の装飾を伴って縦方向に並びます。そこで、この「リスト(箇条書き)」をメニューバーのように見せ
ボックスをセンタリングする方法 (＆古いIEでの話) - スタイルシートTipsふぁくとりー
《2016年1月13日 15:43 公開/更新》 ボックスをセンタリングする方法 (＆古いIEでの話) [ボックス,配置] pやdiv要素で作るボックスやtable要素で作る表組みなどをセンタリングしたい(＝左右方向で中央に寄せたい)場合は、対象要素のマージン(margin)に「auto」を指定します。すると、その要素はセンタリングされて表示されます。 なぜなら、左右のマージンが自動的に計算された結果、左右に同じ分量の余白が設けられるためです。左右の余白量が同じになれば、結果的にセンタリング(中央寄せ)になるわけですね。 例えば、横幅を300ピクセルにしたボックスをセンタリングするスタイルシートソースは以下のような感じになります。 div.test { width: 300px; margin: auto; } marginプロパティに値「auto」を1つだけ指定すると、左右の余白は自動で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
