自己学習70時間目【グリッドレイアウト】作成レビュー!!

f:id:nonpnp:20191026164303p:plain

WEB業界未経験の筆者がWebサイトの作成について触れていきます！

WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はグリッドレイアウト！

Follow @nonnpnp

f:id:nonpnp:20191028211631p:plain

【グリッドレイアウトの作成】

f:id:nonpnp:20191217003031j:plain

グリッドレイアウトを使うメリット
コンテンツエリアの作成
- コンテンツエリアを２つにわける
- サイドバーを作成する
メインコンテンツを作成する
メインビジュアルを設定する
- 背景画像を設定する
画像ギャラリーを作成する
【ソースコードHTML】
【ソースコードCSS】

【グリッドレイアウト】

「学べるHTML」

ページ内リンク

Ul,li要素によるフォトギャラリー

「学べるC S Sとレイアウト」

Li要素floatを使ったグリッドレイアウト

擬似クラス「：nth-child」

グリッドレイアウトを使うメリット

格子状のレイアウトで、綺麗で見やすい

近年スマートフォンでの閲覧がメインになる中で人気のあるレイアウト

レイアウトの応用が効くので様々なレイアウトが可能

コンテンツエリアの作成

コンテンツエリアを２つにわける

コンテンツエリアをメインエリアとサイドバーの２つに分けます。

</div>

</div>

サイドバーを作成する

<h2>Photograph</h2>

<ul>

<li><a href="photograph.html#beach">海-Beach</a></li>

<li><a href="photograph.html#forest">森-Forest</a></li>

</ul>

</section>

<h2>Video</h2>

<ul>

<li><a href="video.html#movie">Movie</a></li>

<li><a href="video.html#short-film">Short film</a></li>

</ul>

</section>

</aside>

メインコンテンツを作成する

見出しとリード文を入力する

<h1>Photograph</h1>

<p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>

</div>

一つ目のセクションと見出しを作成する

section要素で１つ目のセクションを作る。

このsection要素にはid属性で「city」という名前をつけておきます。

後ほどページ内リンクの目印となります。

<h1>Photograph</h1>

<p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>

</section>

</div>

一つ目のセクションの画像ギャラリーを作成する

</ul>

</section>

alt属性で画像の内容を記述する

Img要素にはalt属性必須なので各画像の内容を記載します。

</ul>

</section>

２つ目のセクションを作成する

<h2 class="icon">Beach</h2>

</ul>

</section>

３つ目のセクションを作成する

<h2 class="icon">Forest</h2>

</ul>

</section>

f:id:nonpnp:20191118024954p:plain

f:id:nonpnp:20191118024957p:plain

f:id:nonpnp:20191118025004p:plain

HTMLのみで出来たページはこんな感じです。

続いてCSSに入っていきます。

メインビジュアルを設定する

画像はフリー素材です。

無料サイトも数多くあるので、探してみましょう！

オススメのWebサイト

www.canva.com

背景画像を設定する

前回作成したシングルカラムページと同じですね。

画像だけ差し替えます。

nonpnp.hateblo.jp#photograph {

background-image: url(../images/bg-photograph.png);

background-repeat: no-repeat;

background-position: center top;

background-attachment: fixed;

background-size: 100% auto;

画像ギャラリーを作成する

画像を左寄せレイアウトする

画像を横並びにするにはfloatプロパティを使用します。

また、li要素の行頭に表示されるアイコンを消す為

「list-style: none;」を使用します。

#photograph .photograph-list li {

float: left;

list-style: none;

画像に余白を設定する

#photograph .photograph-list li {

float: left;

list-style: none;

margin: 0 20px 15px 0;

擬似クラスで右の画像の余白をなくす

擬似クラスとは特定の条件に当てはまる要素を指定することができる。

３の倍数の要素だけmargin-rightをゼロにする

#photograph .photograph-list li:nth-child(3n) {

margin-right: 0;

簡単に終わりましたね！

完成画像がこちら！

f:id:nonpnp:20191118144540p:plain

f:id:nonpnp:20191118144543p:plain

最後にHTMLとCSSも記載しておきます。

【ソースコードHTML】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ののくんのサンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body id="photograph">


<header>
<div class="logo">
<a href="index.html"><img src="images/logo2.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>



<div id="wrap" class="clearfix">
<div class="content">
<div class="main">
<h1>Photograph</h1>
<p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>
<section id="city">
<h2 class="icon">City</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-city-1.png" alt="street"></li>
<li><img src="images/photograph-city-2.png" alt=" cafe"></li>
<li><img src="images/photograph-city-3.png" alt=" skate"></li>
<li><img src="images/photograph-city-4.png" alt="cat"></li>
<li><img src="images/photograph-city-5.png" alt="streetmusic"></li>
<li><img src="images/photograph-city-6.png" alt=" classiccar"></li>
</ul>
</section>
<section id="beach">
<h2 class="icon">Beach</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-beach-1.png" alt="hammock"></li>
<li><img src="images/photograph-beach-2.png" alt="sunset"></li>
<li><img src="images/photograph-beach-3.png" alt="weve"></li>
<li><img src="images/photograph-beach-4.png" alt="gal"></li>
<li><img src="images/photograph-beach-5.png" alt="yacht"></li>
<li><img src="images/photograph-beach-6.png" alt="beach"></li>
</ul>
</section>
<section id="forest">
<h2 class="icon">Forest</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-forest-1.png" alt="forest"></li>
<li><img src="images/photograph-forest-2.png" alt="fire"></li>
<li><img src="images/photograph-forest-3.png" alt="canp"></li>
<li><img src="images/photograph-forest-4.png" alt="cap"></li>
<li><img src="images/photograph-forest-5.png" alt="night"></li>
<li><img src="images/photograph-forest-6.png" alt="bench"></li>
</ul>
</section>
</div>
<aside class="sidebar">
<section>
<h2>Photograph</h2>
<ul>
<li><a href="photograph.html#city">街-City</a></li>
<li><a href="photograph.html#beach">海-Beach</a></li>
<li><a href="photograph.html#forest">森-Forest</a></li>
</ul>
</section>
<section>
<h2>Video</h2>
<ul>
<li><a href="video.html#movie">Movie</a></li>
<li><a href="video.html#short-film">Short film</a></li>
</ul>
</section>
</aside>
</div>
</div>



<footer>
<small>(C)1988 nonokun-studio.</small>
</footer>


</body>
</html>

【ソースコード CSS】

@charset "utf-8";

body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}

p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}

img {
vertical-align:bottom;
}

ul {
margin: 0;
padding: 0;
}

a {
color: #3583aa;
text-decoration: none;
}

a:visited {
color: #788d98;
}

a:hover {
text-decoration: underline;
}

header {
width: 960px;
height: 100px;
margin: 0 auto;
}

.logo {
float: left;
margin-top: 50px;
}

.global-nav {
float: right;
margin-top: 60px;
}

.global-nav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Bitter', serif;
}

.global-nav li a {
color: #ffffff;
}

.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}

#wrap {
clear: both;
background-color: #ffffff;
margin-top: 220px;
padding: 35px 0;
}

.content {
width: 960px;
margin: 0 auto;
}

footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
background-color: #767671;
}

footer small {
font-size: 12px;
}

#index h1 {
font-size: 100px;
line-height: 1;
color: #ffffff;
font-family: 'Bitter', serif;
margin-bottom: 50px;
border: none;
}

#index .content {
margin-top: 150px;
}

#index p {
font-size: 16px;
color: #ffffff;
}

.btn a {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
font-family: 'Bitter', serif;
width: 185px;
display: block;
text-align: center;
line-height: 50px;
margin-top: 20px;
border-radius: 5px;
border: 3px solid #009cd3;
}

.btn a:hover {
text-decoration: none;
background-color: #ffffff;
color: #009cd3;
}

#index footer {
width: 960px;
margin: 150px auto 0 auto;
text-align: left;
background-color: transparent;
}

#index {
background-image: url(../images/bg-index.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}

#about {
background-image: url(../images/bg-about.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}

.main-center {
width: 940px;
margin: 0 auto;
}

h1 {
font-family: 'Bitter', serif;
font-size: 36px;
border-bottom: 1px solid #cccccc;
}

h2 {
font-family: 'Bitter', serif;
font-size: 24px;
}

.icon:before {
content: "";
padding-right: 10px;
border-left: 7px solid #9cb4a4;
}

#about .profile-txt {
width: 540px;
float: left;
}

#about .profile-txt span {
font-weight: bold;
}

#about .profile-image {
float: right;
}

.clearfix:after {
content: "";
display: block;
clear: both;
}

section {
margin-bottom: 35px;
}

#about .career th {
width: 240px;
background-color: #f0f0f0;
padding: 12px 0;
border: 1px solid #cccccc;
}

#about .career td {
width: 660px;
padding: 12px 0 12px 40px;
border: 1px solid #cccccc;
}

table {
border-spacing: 0;
border-collapse: collapse;
}

#index #wrap {
background-color: transparent;
margin-top: 0;
padding: 0;
}

#portfolio {
background-image: url(../images/bg-portfolio.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}

.main {
width: 700px;
margin: 0 10px;
float: left;
}

.sidebar {
width: 200px;
margin: 0 10px 0 30px;
float: right;
font-family: 'Bitter', serif;
}

a img:hover {
opacity: 0.8;
}

.sidebar h2 {
margin-bottom: 10px;
}

.sidebar ul {
font-size: 16px;
margin-left: 20px;
}

.sidebar ul a {
color: #333333;
}

#photograph {
background-image: url(../images/bg-photograph.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}

#photograph .photograph-list li {
float: left;
list-style: none;
margin: 0 20px 15px 0;
}

#photograph .photograph-list li:nth-child(3n) {
margin-right: 0;
}

#video {
background-image: url(../images/bg-video.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}

未経験WEBディレクターのススメ

WEB業界未経験３１歳の独身男性がApple製品やAdobeアプリを中心にアウトプットします。