ゲーム日記 -20ページ目

[HTML・CSS] コンテンツを区切る線を入れる

●コンテンツを区切る線を入れる


---------------------------------
＜html＞
＜head＞
＜title＞資料館＜/title＞
＜style type="text/css"＞＜!--

body{
	color:#666666;
	background-color:#ffffee;
}
h2{
	font-size:16px;
	color:white;
	border-style:solid;
	border-width:3px;
	border-color:#33cc66;
	padding:4px;
	border-left-width:10px;
	background-color:black;
}
p{
	line-height:140px;
}
hr{
	height:4px;
	background-color:#33cc66;
}
--＞＜/style＞
＜/head＞
＜body＞
＜h1＞駅のDATA＜/h1＞
＜div＞
・青森駅（あおもりえき）＜br＞
・秋田駅（あきたえき）＜br＞
・盛岡駅（もりおかえき）＜br＞
・新潟駅（にいがたえき）＜br＞
・山形駅（やまがたえき）＜br＞
・仙台駅（せんだいえき）
＜/div＞
＜h2＞青森駅（あおもりえき）＜/h2＞
＜p＞
青森県青森市柳川一丁目にある東日本旅客鉄道（JR東日本）の駅。＜br＞
奥羽本線と東北本線の終点で、北海道方面へ向かう津軽線（津軽海峡線）の起点である。
＜/p＞
＜h2＞秋田駅（あきたえき）＜/h2＞
＜p＞
秋田県秋田市中通七丁目にある、東日本旅客鉄道（JR東日本）の駅である。
＜/p＞
＜h2＞盛岡駅（もりおかえき）＜/h2＞
＜p＞
岩手県盛岡市盛岡駅前通にある、＜br＞
東日本旅客鉄道（JR東日本）・IGRいわて銀河鉄道の駅である。
＜/p＞
＜h2＞新潟駅（にいがたえき）＜/h2＞
＜p＞
新潟県新潟市中央区花園一丁目にある、東日本旅客鉄道（JR東日本）の駅。＜br＞
上越新幹線の終点であり、本州日本海側の鉄道網の拠点駅でもある。＜br＞
鉄道以外の公共交通機関も含めた新潟都市圏のターミナルの1つである。＜br＞
現在、駅舎周辺では在来線の連続立体交差化と、それに伴う周辺整備事業が進められている
＜/p＞
＜h2＞山形駅（やまがたえき）＜h2＞
＜p＞
山形県山形市香澄町一丁目にある、東日本旅客鉄道（JR東日本）の駅である。
＜/p＞
＜h2＞仙台駅（せんだいえき）＜/h2＞
＜p＞
宮城県仙台市青葉区中央一丁目と宮城野区榴岡一丁目に跨る＜br＞
東日本旅客鉄道（JR東日本）・仙台市地下鉄の駅である。
＜/p＞
＜hr＞
＜div align="center"＞
鉄道写真館　ホームページ
＜/dic＞
＜/body＞
＜/html＞
---------------------------------

改訂第6版 HTML&スタイルシートポケットリファレンス (POCKET REFERENCE)/シーズ

￥1,764
Amazon.co.jp

HTML&スタイルシートレッスンブック/エビスコム

￥2,415
Amazon.co.jp

[HTML・CSS] 見出しにバーのようにデザインする

●見出しにバーのようにデザインする


---------------------------------
＜html＞
＜head＞
＜title＞資料館＜/title＞
＜style type="text/css"＞＜!--

body{
	color:#666666;
	background-color:#ffffee;
}
h2{
	font-size:16px;
	color:white;
	border-style:solid;
	border-width:3px;
	border-color:#33cc66;
	padding:4px;
	border-left-width:10px;
	background-color:black;
}
p{
	line-height:140px;
}
--＞＜/style＞
＜/head＞
＜body＞
＜h1＞駅のDATA＜/h1＞
＜div＞
・青森駅（あおもりえき）＜br＞
・秋田駅（あきたえき）＜br＞
・盛岡駅（もりおかえき）＜br＞
・新潟駅（にいがたえき）＜br＞
・山形駅（やまがたえき）＜br＞
・仙台駅（せんだいえき）
＜/div＞
＜h2＞青森駅（あおもりえき）＜/h2＞
＜p＞
青森県青森市柳川一丁目にある東日本旅客鉄道（JR東日本）の駅。＜br＞
奥羽本線と東北本線の終点で、北海道方面へ向かう津軽線（津軽海峡線）の起点である。
＜/p＞
＜h2＞秋田駅（あきたえき）＜/h2＞
＜p＞
秋田県秋田市中通七丁目にある、東日本旅客鉄道（JR東日本）の駅である。
＜/p＞
＜h2＞盛岡駅（もりおかえき）＜/h2＞
＜p＞
岩手県盛岡市盛岡駅前通にある、＜br＞
東日本旅客鉄道（JR東日本）・IGRいわて銀河鉄道の駅である。
＜/p＞
＜h2＞新潟駅（にいがたえき）＜/h2＞
＜p＞
新潟県新潟市中央区花園一丁目にある、東日本旅客鉄道（JR東日本）の駅。＜br＞
上越新幹線の終点であり、本州日本海側の鉄道網の拠点駅でもある。＜br＞
鉄道以外の公共交通機関も含めた新潟都市圏のターミナルの1つである。＜br＞
現在、駅舎周辺では在来線の連続立体交差化と、それに伴う周辺整備事業が進められている
＜/p＞
＜h2＞山形駅（やまがたえき）＜h2＞
＜p＞
山形県山形市香澄町一丁目にある、東日本旅客鉄道（JR東日本）の駅である。
＜/p＞
＜h2＞仙台駅（せんだいえき）＜/h2＞
＜p＞
宮城県仙台市青葉区中央一丁目と宮城野区榴岡一丁目に跨る＜br＞
東日本旅客鉄道（JR東日本）・仙台市地下鉄の駅である。
＜/p＞
＜/body＞
＜/html＞
---------------------------------

HTML & XHTML 第5版/Chuck Musciano

￥6,090
Amazon.co.jp

できる大事典 HTML & CSS/佐藤和人

￥2,730
Amazon.co.jp

[HTML・CSS] コンテンツを罫線で囲む

●コンテンツを罫線で囲む



---------------------------------
＜html＞
＜head＞
＜title＞鉄道写真館＜/title＞
＜style type="text/css"＞＜!--

body{
	color:#666666;
	background-color:#ffffee;
}
h1{
	font-size:40px;
	font-family:"ＭＳ Ｐゴシック", Osaka;
	color:#336633;
}
span.green{
	color:#339900;
}
span.name{
	color:#339900;
	font-weight:bold;
}
p{
	width:360px;
	text-align:left;
	background-color:#f7ffcc;
	padding:20px;
	border-style:dashed;
	border-width:6px;
	border-color:#66cc33;
}
div.copy{
	background-color:#33cc66;
	color:white;
	font-size:smaller;
	padding:2px;
}
--＞＜/style＞
＜/head＞
＜body＞
＜div align="center"＞
＜h1＞鉄道写真館＜/h1＞
＜p＞＜span class="name"＞鉄道写真館＜/span＞へようこそ！ここは、
＜span class="green"＞『鉄道写真』＜/span＞満喫するために、
身近なところで撮影した＜span class="green"＞『鉄道写真』＜/span＞や、
旅先で撮影した＜span＞『鉄道写真』＜/span＞
を集めたホームページです。＜/p＞
＜div class="copy"＞Copyright(c) HTML Master＜/div＞
＜/div＞
＜/body＞
＜/html＞
---------------------------------

これからはじめる HTML&スタイルシートの本 (自分で選べるパソコン到達点)/中邨登美枝

￥2,079
Amazon.co.jp

図解 HTML/CSS&Web技術がわかる (知りたい!テクノロジー)/Coyote Studio

￥1,764
Amazon.co.jp