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

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

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

見出しをデザインする。グラデーションにしたり、画像をヘッダにしたり。

<スポンサーリンク>

見出しをグループ化するタグはhgroup

hgroupタグを使えば見出しをグループ化できる。

<body>
<div id="header">
	<hgroup>
	<h1>ヘッダーすなわち見出しです</h1>
	<h2>サブタイトルはこちらです</h2>
	</hgroup>
</div>
</body>

上記のようにグループ化すると、見出しはh1でマークアップしたものとして扱われ、サブタイトルのh2は後続のコンテンツに影響しなくなる。

文字サイズ

ブラウザの標準文字サイズは1emである。
一般的に16ピクセルとなっている。
2emだと32ピクセルになる。

pxやcmといった単位で指定する場合と異なり、emを使うことで、「ブラウザの設定に応じて文字サイズが変更される」ようにできる。

タイトルをトップページへリンクする。

ヘッダーをトップページにリンクするときなどは以下のように書く。

	<hgroup>
	<h1><a href="http://yahoo.co.jp">ヘッダーはリンク付き!</a></h1>
	<h2>サブタイトルはこちらです</h2>
	</hgroup>

こうやって書くと、文字が青色になって下線が表示されてしまうので、CSSは以下のように記述。

#header h1 a {
	text-decoration: none;
	color: #000000;
}

こうすると、リンクを作成したときに勝手につく青文字&下線を消すことができる。

タイトルをロゴで表示する方法

以下のように、タイトル画像を指定すると、タイトルを画像で表示できる。
タイトルをクリックするとホームページに飛ぶのが普通だと思うけれど、以下のようにリンクを貼れば、画像をクリックしたらページを飛ばせる。
ここではとりあえずYahooにしているが、そこは気にしないでほしい。

<div id="header">
	<hgroup>
	<h1>
	<a href="http://yahoo.co.jp">
	<img src="logo.png"
	 	 alt="ページの名前"
	 	 title=""
	 	 width="240"
	 	 height="45" />
	</a>
	</h1>
	<h2>サブタイトルはこちらです</h2>
	</hgroup>
</div>

ヘッダーをバーのようにして、ちょっとだけFacebookっぽいヘッダーを作ってみる。

<body>
<div id="header">
	<h1>Facebook</h1>
</div>
</body>

CSSはこんな感じ.

#header {
	width: 150px;
	height: 40px;
	background-color: #003388;
}
#header h1 {
	margin:0;
	margin-left:5px;
	font-size:1.8em;
	font-family:Tahoma;
	color:white;
}

以下のように表示される。

CSS3の機能を使って、グラデーション表示してみる

CSS3でグラデーション表示をする記述は以下の通り。
Google Chrome 2以上とsafari4以上が「-webkit-gradient()」をサポートしている。
Firefox 3.6以上が「-moz-linear-gradient()」をサポート。

#header {
	width: 300px;
	height: 50px;
	background-color: #719a18;
	background:
		-moz-linear-gradient(top, #719a18,#2a3a09);
	background:
		-webkit-gradient(linear, left top,
			left bottom, from(#719a18), to(#2a3a09));
}
#header h1 {
	margin:0;
	margin-left:5px;
	font-size:1.8em;
	font-family:Tahoma;
	color:white;
}
#header_inner {
	padding: 5px 30px 30px 65px;
}

#719a18から#2a3a09に変化するように指定している。

HTMLはさっきの使い回し。表示位置の調整のためにheader_innerを入れた。

<body>
<div id="header">
<div id="header_inner">
	<h1>Facebook</h1>
</div>
</div>
</body>

以下のように表示される。

勉強した本

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック

  • 作者: エ・ビスコム・テック・ラボ
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2009/12/19
  • メディア: 単行本(ソフトカバー)
  • 購入: 9人 クリック: 187回
  • この商品を含むブログ (9件) を見る
欲しい情報がピンポイントで載っている本。
こういう本が欲しかった。これを参考にして、Webページを作りたい。
読みやすく、サンプルが豊富で、図で示してくれるからわかりやすい!

感謝のプログラミング

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