見出し画像

「3000円で作る!ホームページ」note出張便【ステップ36】アイキャッチ画像におしゃれなフレームをつける

見出しと本文はとっても大事です。
でもアイキャッチ画像はどんな役割なのかなあ。

本文のイメージをつかむためだとか、読む人をまずリラックスさせて本文を読んでもらいやすくするためだとか、いろいろあるみたいです。

私は写真に撮った花をみんなに見せたいから!です。

あと、画像だけだとちょっとさびしいでしょ。フチにフレーム飾りをつけてポラロイド風の画像にしていきたいと思います。ステップ34で書いた#main imgセレクタに3つのプロパティを書いていきますよ。

●CSS●

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

フレームがつくだけでグっと映える画像になりましたよね!お好みでborderプロパティの線の太さや色を変えてみたりして楽しんで下さい。

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


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

●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">

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

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

</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;
}

●イメージ画像●

画像1

ヘッダー用

画像2

アイキャッチ画像01



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

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

ポラロイドなつかしいです。小さいころに、見知らぬあんちゃんが海のポラロイド写真くれました。なくしちゃったけど。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

三善ホミィの代わりにオーナーがアルバイト代を徴収いたしますことをご容赦願います…。サービスをサポートしてあげるよ!という方も大歓迎です。「3000円で作る!ホームページ」オーナー

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