前回の記事をまだ読んでいない方はこちらをご覧ください。
はいということでまたもや記事を書いている最中に日付が変わってしまいました。管理人です。
毎日更新できるのはいつになるのでしょうか、、、
まあクヨクヨしててもしょうがないので本日もブログ更新始めていきます。
前回の復習
まずは前回の復習です
前回はランディングページもどきを作成してみました。
今回はまた別のパターンでページを作ってみます。
前回は全画面での画像を使ったランディングページでしたが今回は、2カラムと言われるページを作っていきたいと思います。
イメージはこんな感じ↓
必要な要素
作成するにあたって、必要な材料は
- ロゴ、メニュー（前回のものを流用）
- ページ上部の画像
- 見出し
- サイドバー
- メインエリア
- フッター（前回のものを流用）
以上の6つです
このうち2つは前回使ったものをそのまま使うので新しく作成するのは残りの4つです。
2カラムとは
2カラムのレイアウトとは2列に並んだレイアウトのことです。
メインエリアとサイドバーの2つでできていて、比率は3：1または2：1という割合を用いることがおおいです。
1：1はスプリットスクリーンと呼ばれています。
制作の流れ
制作の流れは以下のようになります。
- ページ全体の見出しを作成
- フッターの作成
- 横並びの設定
- メインエリアの作成
- サイドバーの作成
- レスポンシブに対応
以上のような流れで作っていきます。
制作物
今回作成した2カラムサイトはこちらです。
左側に新しく入荷した商品の紹介、右側にサイドメニューという配置にしています。
商品は今回はサンプルを表示しました。
使用コード
スマホではみにくいのでPCでの閲覧を推奨します
HTML
<DOCTYPE HTML>
<HTML lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>NoteShopforuni-NEWS</title>
<meta name=“description” content=“あなたのノートがお小遣いに？”
<!--css-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
<link rel="icon" type="png" href="NFUロゴ.png">
</head>
<body>
<div id="news" class="big-bg">
<header class="page-header wrapper">
<h1><a href="index.html"><img class="logo" src="NFUロゴ.png" alt="NFUロゴ"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="https://noteshopuniv.buyshop.jp/">利用する</a></li>
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLSdGf8TFvfokjNKWa5Jg31vanSaEcrgpAoirMsJZKXSRpdYAMw/viewform">出品する</a></li>
<li><a href="https://noteshopuniv.buyshop.jp/items/41265985">商品例</a></li>
<li><a href="https://thebase.in/inquiry/noteshopuniv-buyshop-jp">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<h2 class="page-title">NEWS</h2>
</div>
</div>
<div class="news-contents wrapper">
<article>
<header class="post-info">
<h2 class="post-title">新しい商品入荷しました</h2>
<p class="post-date">6/4<span>2021</space></p>
<p class="post-cat">カテゴリー：新着ノート</p>
</header>
<img src="商品.png" alt="新商品" sizes="60%">
<p>
今回新しく入荷したノートは水曜１限、田中先生の「情報科学の世界」です。
ノートの範囲は第１回目の授業から１５回目の授業の分。
出品者は毎回質の高いノートを提供して頂いている「まりもさん」です！
その質の高さから毎回最高評価の星５がつくほどです。
ぜひ一度ご覧になってください
</p>
<p>
学習を加速する新たなプラットフォーム「Note Shop for Uni」
</p>
</article>
<aside>
<h3 class="sub-title">カテゴリ―</h3>
<ul class="sub-menu">
<li><a hruf="#">サイトの紹介</a></li>
<li><a href="https://noteshopuniv.buyshop.jp/">新着商品</a></li>
<li><a href="#">キャンペーン</a></li>
<li><a href="https://noteshopuniv.buyshop.jp/">商品を探す</a></li>
</ul>
<h3 class="sub-title">このサイトについて</h3>
<p>
このサイトは大学生が授業のノートや勉強ノートを共有することで
授業の理解をより深めることができるようにするためのサイトです。
</p>
</aside>
</div>
<footer>
<div class="wrapper">
<p><small>© 2019 Manabox</small></p>
</div>
</footer>
</body>CSS（前回のものをいじっているので少しいらないコード出てきます）
@charset "UTF-8";
/*共通部分*/
html{
font-size: 100%;
}
body{
font-family: "Yu Gothic","優ゴシック Medium",Yugothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
line-height: 1.7;
color: rgb(255, 255, 255);
}
a {
text-decoration:none;
}
img{
max-width: 100%;
}
/*記事部分*/
article{
width: 74%;
color: #000;
background-color:rgb(248, 226, 203);
}
/*サイドバー*/
aside{
width: 22%;
color: #000;
background-color: rgb(248, 226, 203);
}
.post-info{
position: relative;
padding-top: 4px;
margin-bottom: 48px;
}
.news-contents{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.post-date{
background: #0bd;
border-radius: 50%;
color: #fff;
width: 100px;
height: 100px;
font-size: 1.625rem;
text-align: center;
position: absolute;
top: 0;
padding-top: 10px;
}
.post-date span{
font-size: 1rem;
border-top: 1px rgba(255,255,255,.5) solid;
padding-top: 6px;
display: block;
width: 60%;
margin: 0 auto;
}
aside p{
padding: 12px 10px;
}
/*見出し2*/
.sub-title{
font-size: 1.375rem;
padding: 0% 8px 8px;
border-bottom: 2px #0bd solid;
font-weight: normal;
}
/*サブメニュー*/
.sub-menu{
margin-bottom: 60px;
list-style: none;
}
.sub-menu li{
border-bottom: 1px #ddd solid;
}
.sub-menu a{
color: #432;
padding: 10px;
display: block;
}
.sub-menu a:hover{
color: #0bd;
}
/*NEWS*/
#news {
background-image: url(背景②.jpg);
height: 270px;
margin-bottom: 40px;
}
#news .page-title {
text-align: center;
}
.post-title{
font-family: "Yu Mincho","YuMincho",serif;
font-size: 2rem;
font-weight: bold;
}
article img{
size: 0.5rem;
margin-bottom: 20px;
margin-bottom: 40px;
}
article p {
margin-bottom: 1rem;
}
.post-title,
.post-cat{
margin-left: 120px;
}
/*フッター*/
footer{
background: #432;
text-align: center;
padding: 26px;
}
footer p {
color: #fff;
font-size: 0.875rem;
}
/*ロゴ*/
.logo{
width: 150px;
margin-top:14px;
}
/*ナビ部分*/
.main-nav{
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
font-weight: bold;
}
.main-nav li{
margin-left: 16px;
}
.main-nav a{
color: #432;
}
.main-nav a:hover{
color:#0bd;
}
/*ヘッダー*/
.page-header{
display: flex;
justify-content: space-between;
}
.wrapper{
max-width: 1100px;
margin: auto;
padding:0.4%;
}
/*ホーム*/
.home-content{
text-align: center;
margin-top: 10%;
text-transform: none;
}
.home-content{
font-size: 1.125rem;
margin: center;
}
/*見出し*/
.page-title{
font-size: 5rem;
font-family: 'Dela Gothic One', cursive;
text-transform: uppercase;
font-weight: normal;
}
/*見出し2*/
.sub{
font-size: 1.5rem;
font-family: sans-serif, cursive;
text-transform: uppercase;
font-weight: bold;
}
/*ボタン*/
.button{
font-size: 1.375rem;
background: #0bd;
color: white;
border-radius: 20px;
padding: 10px 32px;
line-height: 100px;
}
.button:hover{
background: #0099aa;
}
.big-bg{
background-size: cover;
background-position: center top;
}
#home{
background-image: url(背景②.jpg);
background-blend-mode: luminosity;
min-height: 100vh;
}
#home .page-title{
text-transform: none;
}まとめ
今回2つ目の種類のサイトを制作しました。
次回はタイル型という型のウェブサイトを制作していこうと思います。
また日が変わると思いますがお待ちください。
それではまた！
コメント
[…] […]