見出し画像

「3000円で作る!ホームページ」続・note出張便【ステップ40】サイドメニュー要素を追加する

お久しぶりです!あなたは1か月の間に何してましたか?ホームページ作りからちょっと離れていた人もいるかもしれないですね。でもまた続ければ大丈夫ですよ!

あ、初めてここから来た人もいるかもしれないですね。はじめまして。私はホームページ担当エレメントの三善ホミィといいます。あなたと一緒にホームページ作りの学習をがんばっていきたいです。よろしくお願いします。

いよいよホームページ作りも後編に入ってきました。その前にちょっとおさらいします。

ステップ12ではホームページの幅を900px(900ピクセル)に決めました。そして、ステップ26ではその内の600pxをメイン要素として使っています。そこに本文を書くところまでが前編でした。

メイン要素のおとなりが300px空いていますよね。そこにサイドメニューを作っていきましょう。サイドメニュー専用のタグはないのでページ要素やメイン要素のようにdivタグを使いid属性を設置します。下のように書いていってください。

●HTML●

<div id="side"></div>

HTMLはこれで準備完了です。次はスタイルシート(CSS)にいきますよ。

●CSS●

#side {
width: 300px;
}

幅はそっくり使うので、widthプロパティには300pxの値を入れました。でもまだ幅を合わせただけです。タグの中へ適当に文章を入れてみて下さい。まだメイン要素の下に表示されちゃいますよね。

ステップ26でメイン要素はfloatプロパティを使って右(right)に配置をしたので、サイドメニューはfloatプロパティにleft(左)の値を入れてあげます。

●CSS●

#side {
float: right;
width: 300px;
padding: 16px 0;
}

HTMLファイルとCSSファイルを保存して確認してみて下さい。メイン要素のとなりにサイドメニュー要素が配置されましたよね!

あと、ちょっとしたことですが、paddingプロパティで上下に16pxのスペースを設けました。そうするとメイン要素と高さがそろいます。見映えもよくなるので書いておくといいですよ。

ホームページ完成まであともうちょっとですね。早く次に進みたいな。

HP担当:「3000円で作る!ホームページ」エレメント 三善ホミィ


ステップ40までのおさらい

●HTML●

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無料で素敵なものをさがす人</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">


<header>
<h1><a href="index.html">無料で素敵なものをさがす人
<img src="images/header.png" alt="ヘッダーのイメージ画像">
</a></h1>
</header>


<nav>
<ul>
<li id="current"><a href="index.html">トップページ</a></li>
<li><a href="news.html">おしらせ</a></li>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="mailto:homy@3000hp.kochi">お問い合わせ</a></li>
</ul>
</nav>


<div id="main">

<section>
<h2>びっくり!道ばたで見つけた花びら〇枚の植物<br>
<span class="sub">めずらしいですね。トキワツユクサというそうです</span><br>
<time datetime="2019-05-10">2019510日</time>
</h2>

<img src="images/pic01.jpg" alt="トキワツユクサの花" title="私が撮りました!">

<p>オーナーさんの家の近くにはちょっとした小山があります。そこの頂上には公園があるんですよ。よくここで遊んだなあ。その途中の道ばたの横の草むらに赤い花を見つけたので撮ってみました。でもちょっと横のほうに白い花を見つけたんです。
</p><p>
よく見ると花びらが3枚しかなくてびっくり。へえ、めずらしい!と思ってこれも撮っちゃいました。
</p><p>
あとで調べたら、トキワツユクサという名前とのこと。こんな変わった花は初めて見ました。またブラブラ散歩して素敵な花を見つけたいな。
</p>
</section>


<section>
<h2>紫一色。小雨の中であじさい鑑賞<br>
<span class="sub">あじさいがきれいにみえるスポット見つけました</span><br>
<time datetime="2019-06-02">201962日</time>
</h2>

<img src="images/pic02.jpg" alt="あじさいと月" title="写真をイラスト加工しました!">

<p>今日はお町からちょっと外れたところにある庭園を歩いてきました。梅雨のせいか空はどんより…。
</p><p>
この時期はあじさいがたくさん咲きます。あじさい祭りも近いのでこの花を目当てにくる人がチラホラいました。私は素敵なアングルの写真が撮れちゃった。パソコンで加工してみたら幻想的なイラストを作ることができました。
</p><p>
そうだ!私の世界にもいろんな花が咲いているから、紹介するホームページ作っちゃおうかな。それで2次元化して画像として販売してみるの。3次元の人にはめずらしいから喜んでくれるかも。
</p>
</section>

</div>


<div id="side"></div>


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

●CSS●

@charset "utf-8";

body {
margin: 0;
padding: 0;
background: floralwhite;
color: black;
font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

#page {
width: 900px;
margin: 0 auto;
background: gainsboro;
}

header {
height: 272px;
padding: 1px 0 0 0;
background: rgb(45, 87, 154);
}

h1 {
margin: 72px 0 0 0;
font-size: 48px;
text-align: center;
}

header a {
color: white;
text-decoration: none;
}

nav {
margin: 8px 0;
padding: 8px 0;
border-top: 3px solid red;
border-bottom: 3px solid red;
}

nav ul {
margin: 0;
padding: 0;
font-size: 0;
}

nav ul li {
display: inline-block;
width: 25%;
background: silver;
font-size: 16px;
text-align: center;
}

nav ul li a {
display: block;
padding: 16px 32px;
color: dimgray;
font-weight: bold;
text-decoration: none;
}

nav ul li a:hover {
background: gainsboro;
}

#current {
background: white;
}

#main {
float: left;
width: 600px;
padding: 16px 24px;
box-sizing: border-box;
}

h2 {
padding-left: 9px;
border-left: 10px solid black;
}

.sub {
color: dimgray;
font-size: 18px;
}

time {
color: gray;
font-size: 16px;
font-weight: normal;
}

#main img {
max-width: 100%;
padding: 5px;
border: 1px solid darkgray;
box-sizing: border-box;
}

#main p {
line-height: 1.8;
}

#side {
float: right;
width: 300px;
padding: 16px 0;
}

●イメージ画像●

画像1

ヘッダー用

画像2

アイキャッチ画像01

画像3

アイキャッチ画像02



---「3000円で作る!ホームページ」オーナーより---

完全版は公式サイトよりお楽しみください。直接コードを書くことができますし、その通りにホームページのデモが表示されます。ぜひ実践的な学習をお楽しみ下さい。

受験生はやることがいっぱいあるもんな。ご協力に感謝します!オーナーは気がつかなかっただけです。悪気はない。


一読ありがとうございます!
「3000円で作る!ホームページ」のオーナー。一次元からエレメント:三善ホミィちゃんを雇いサービスを行っている。本人は面倒くさがりでほとんど何もやっていない。運営そのものはほぼ彼女とその母にまかせっきりである。エレメントいわく「日本一やくに立たない」。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。