読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

リストを横に並べてヘッダメニュー的に見せる方法

HTML / CSS
<スポンサーリンク>

【追記】
この記事ではわかりづらかったので、2013/11/8に新しく記事を書きました!
リンクを横並びにして、メニューバーみたいな形で表示するためのHTMLとCSS
【ここまで】

li要素はデフォルトではリスト項目が改行されて縦に並ぶようになっている。
リストを横に表示するには、

li {
	list-style-type: none;
	display: inline;
}

のように、display: inline;と設定する。

idセレクタのこと。

idをつけることで、箇所を特定してスタイルを適用することができる。

フロート配置とは、要素の配置を浮遊状態にしてしまう配置スタイルのこと。

こんな感じのリストを横に並べるには。。。

<ul id="menu">
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">ご紹介</a></li>
<li><a href="profile.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

CSSでこのように設定する。

#menu li a {
	display: block;
	width: 240px; height: 35px;
	color: #ffffff;
	background-color:navy;
	padding: 15px 0px 0px 0px;
	text-align: center;
	text-decoration: none; 
}

リンクについている下線を消すには

text-decoration: none;

テクストをセンター揃えにするには

text-align: center;

である。

読んだ本

はじめてのHTML+CSS (TECHNICAL MASTER)

はじめてのHTML+CSS (TECHNICAL MASTER)

今まで色んな本を買ったけれど、この本が一番しっくりくる。
今年のHTML本 オブザイヤーをあげたい。

感謝のプログラミング

今回で感謝のプログラミングは【406時間目】
10000時間まで、あと【9594時間】