デザイン編

タイル型配置(事前準備)

　デザイン編　タイル型配置の作業を行うにあたって、これまでにできている「はず」のHTMLとCSSの内容について以下に張り付けておきます。直接このページにやってきた人で「最初からやる時間がない」という人は、以下を利用し、この続きから作業を始めましょう。
　このサイトでは、任意の場所に「webkiso」フォルダを作成し、その中にHTMLファイルやCSSファイルを作成しています。以下の「ren21.html」と「ren21.css」もこの「webkiso」フォルダに保存しています。
　また、「webkiso」フォルダ内に、画像ファイル保存用の「gazo」フォルダを作成します。これまでの作業で使用した画像ファイルはメインビジュアル用の画像だけです。画像ファイルは「こちら」を、マウスの右ボタンクリックして「リンク先を名前を付けて保存」して下さい。画像ファイルは「gazo」フォルダに格納します。
　これまでに作成した「ren21.html」と「ren21.css」の内容は以下の通りです。

>>元のページへ戻る

SPONSORED LINK

　　ren21.html(これまでの全文)
　　

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>株式会社黒井三連星</title>
<link rel="stylesheet" href="ren21.css">
</head>
<body>
<div id="container">
<header>
  <h1><a href="ren21.html">株式会社黒井三連星</a></h1>
  <p><a href="ren22.html">About us</a>　<a href="ren23.html">アクセス</a>　<a href="ren24.html">問い合わせ</a></p>
</header>
<main>
  <h2>Run against the wind!<br>
  KUROISANRENSEI.COM</h2>
</main>
<nav>
  <ul>
    <li><a href="ren25.html">会社概要</a></li>
    <li><a href="ren26.html">プロダクト</a></li>
    <li><a href="ren27.html">採用事例</a></li>
    <li><a href="ren28.html">社会貢献</a></li>
  </ul>
</nav>
<article>
  <ul>
  新着情報<br>
    <li>4/15　ルウム店オープン</li>
    <li>5/20　新製品JETストリームアタック発売</li>
    <li>6/28　オデッサ店にてふれあいイベント開催</li>
  </ul>
</article>

</div>
</body>
</html>

　　ren21.css(これまでの全文)
　　

@charset "UTF-8";
* {
	margin: 0px; /* 外余白0px */
	padding: 0px; /* 内余白0px */
	border-width: 0px; /* 枠線0px */
	text-decoration: none; /* 文字装飾なし */
	font-size: 20px; /* 文字サイズ20px */
}
body {
	background-color: black; /* 背景色を黒 */
}
#container {
	width: 960px; /* 横幅960px */
	margin: 0px auto 0px; /* 外余白中央寄せ */
	background-color: white; /* 背景色を白 */
}
header {
	padding: 10px;  /* 内余白10px */
	background-color: #333333; /* 背景グレー */
	display: flex;  /* 表示横並び */
	justify-content: space-between; /* 両端揃え */
}
header a {          /* リンク */
	color: white;   /* 文字色白 */
}
header a:hover {    /* マウスオーバー */
	color: red;     /* 文字色赤 */
}
main {
	height: 500px;            /* 高さ500px */
	background-image: url(gazo/main01.jpg); /* 画像 */
	background-color: silver; /* 背景色を銀 */
}
main h2 {
	padding: 330px 70px 0px 0px;   /* 内余白 */
	font: bolder 48px "arial black"; /* フォント */
	color: white;                   /* 文字色白 */
	text-align: right;         /* テキスト右寄せ */
}
nav {
	padding: 10px;      /* 内余白 */
	background-color: #333333; /* 背景濃い灰色 */
}
nav ul {
	display: flex;      /* 表示横並び */
	justify-content: space-between; /* 両端揃え */
	list-style: none;   /* マークなし */
}
nav a {
	color: white;       /* 文字白色 */
	display: block;     /* 表示ブロック化 */
	width: 220px;       /* 横幅 */
	text-align: center; /* 文字中央寄せ */
}
nav a:hover {
	color: red;         /* 文字赤色 */
	background-color: silver; /* 背景明るい灰色 */
}
article {
	padding: 20px;           /* 内余白 */
	background-color: silver; /* 背景明るい灰色 */
}
article ul {
	width: 80%;              /* 横幅 */
    height: 80px;            /* 高さ */
	list-style: disc inside; /* リストマーク */
	margin: 10px auto 10px;  /* 外余白・左右中央 */
	padding: 10px 10px 10px 30px; /* 内余白 */
	background-color: white; /* 背景白色 */
    overflow-y: scroll;      /* はみ出し自動 */
}

　ここまでを作成すると以下のようなイメージができるはずです。文字化けなどがある場合は、ファイルの文字コードをUnicodeの「UTF-8」で保存して下さい。テキストエディタがTerapadなら「環境準備編・ひな形ファイル」の最後の方に保存方法がまとめてあります。

　　

>>元のページへ戻る

HTML＆CSS 入門、入門、超入門！

デザイン編

タイル型配置(事前準備)