【ソースコード】中級編：ブログサイト／2カラム
目次
※コーディングの解説はCSSのコメントを参照
ディレクトリ構成
blog
├─img
│ ├─favicon.ico
│ ├─logo.svg
│ ├─author.jpg
│ ├─main1.jpg
│ ├─main2.jpg
│ ├─main3.jpg
│ ├─main4.jpg
│ ├─pickup1.jpg
│ ├─pickup2.jpg
│ ├─pickup3.jpg
│ ├─ranking1.jpg
│ ├─ranking2.jpg
│ └─ranking3.jpg
│
├─css
│ └─style.css
│
└─index.html
HTML（index.php）
別タブで開く
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Blog</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<h1 class="site-title wrapper">
<a href="#"><img src="img/logo.svg" alt="Travel Blog"></a>
</h1>
<nav id="navi">
<ul class="wrapper">
<li><a href="#">NEW</a></li>
<li><a href="#">COLUMN</a></li>
<li><a href="#">SERIES</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<div id="pickup" class="wrapper">
<article>
<img src="img/pickup1.jpg" alt="テキストテキストテキスト">
<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<img src="img/pickup2.jpg" alt="テキストテキストテキスト">
<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<img src="img/pickup3.jpg" alt="テキストテキストテキスト">
<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
</div>
<div id="container" class="wrapper">
<main>
<article>
<h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
<ul class="meta">
<li><a href="#">2020/01/01</a></li>
<li><a href="#">カテゴリ1</a></li>
</ul>
<a href="#"><img src="img/main1.jpg" alt="テキストテキストテキスト"></a>
<p class="text">
本文テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
<ul class="meta">
<li><a href="#">2020/01/01</a></li>
<li><a href="#">カテゴリ1</a></li>
</ul>
<a href="#"><img src="img/main2.jpg" alt="テキストテキストテキスト"></a>
<p class="text">
本文テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
<ul class="meta">
<li><a href="#">2020/01/01</a></li>
<li><a href="#">カテゴリ1</a></li>
</ul>
<a href="#"><img src="img/main3.jpg" alt="テキストテキストテキスト"></a>
<p class="text">
本文テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
</main>
<aside id="sidebar">
<section class="author">
<img src="img/author.jpg" alt="テキストテキストテキスト">
<h3 class="side-title">Name Name</h3>
<p class="profile">
プロフィールテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</section>
<section class="ranking">
<h3 class="side-title">Ranking</h3>
<article>
<a href="#">
<img src="img/ranking1.jpg" alt="テキストテキストテキスト">
<h4 class="article-title">タイトルテキストテキストテキストテキストテキストテキスト</h4>
</a>
</article>
<article>
<a href="#">
<img src="img/ranking2.jpg" alt="テキストテキストテキスト">
<h4 class="article-title">タイトルテキストテキストテキストテキストテキストテキスト</h4>
</a>
</article>
<article>
<a href="#">
<img src="img/ranking3.jpg" alt="テキストテキストテキスト">
<h4 class="article-title">タイトルテキストテキストテキストテキストテキストテキスト</h4>
</a>
</article>
</section>
<section class="archive">
<h3 class="side-title">Archive</h3>
<ul>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
</ul>
</section>
</aside>
</div>
<footer id="footer">
<div class="content wrapper">
<section class="item">
<h3 class="footer-title">About</h3>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<ul class="about-list">
<li><a href="#" class="arrow">プロフィール詳細</a></li>
<li><a href="#" class="arrow">お仕事の依頼</a></li>
<li><a href="#" class="arrow">お問い合わせ</a></li>
</ul>
</section>
<section class="item">
<h3 class="footer-title">Menu</h3>
<ul class="menu-list">
<li><a href="#">NEW</a></li>
<li><a href="#">CATEGORY</a></li>
<li><a href="#">COLUMN</a></li>
<li><a href="#">SERIES</a></li>
<li><a href="#">Q&A</a></li>
</ul>
</section>
<section class="item">
<h3 class="footer-title">Twitter</h3>
<a class="twitter-timeline" data-height="315" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</section>
</div>
<p class="copyright">© Travel & Blog</p>
</footer>
</body>
</html>
Twitterのタイムラインの埋め込み方法
-
下記のページで埋め込みたいタイムラインのリンクを入力する
https://publish.twitter.com/ - 埋め込みたいアカウントのURLを入力（例：https://twitter.com/X）
- 「Embedded Timeline」を選択
- 生成されたコードを「Copy Code」ボタンでコピーする
- HTMLの中の埋め込みたい場所にコピーしたコードを貼り付ける
-
「data-height=""」でタイムラインの高さを指定。
※デモサイトの場合「data-width="315"」で315pxに設定。
※「data-width=""」で横幅の設定も可能。
CSS（style.css）
別タブで開く
style.css
@charset "UTF-8";
html {
font-size: 100%;
}
body {
color: #333;
font-size: 1rem;
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
max-width: 100%;
}
li {
list-style: none;
}
/*
コンテンツ幅を設定するための共通クラス
*/
.wrapper {
max-width: 1200px;
padding: 0 16px;
margin: 0 auto;
}
.readmore {
font-size: 0.875rem;
text-align: center;
}
/*
疑似要素で下線を設定するために、「position: relative;」を設定
*/
.readmore a {
padding-bottom: 1px;
color: #333;
position: relative;
}
/*
「position: absolute;」を設定し、left、bottomで下線の位置を調整
widthとheightで線の長さと高さを設定
疑似要素で線を表示させるためには、「content: '';」を設定すること
「transition: all 200ms ease;」でホバー時の速度などを設定
*/
.readmore a::after {
content: '';
position: absolute;
height: 1px;
width: 100%;
left: 0;
bottom: 0;
background: #333;
transition: all 200ms ease;
}
/*
ホバー時の下線の設定
「opacity: 0;」下線を非表示
「transform: translateY(3px);」下に3px移動
→下に3px移動しながら下線を非表示にする
*/
.readmore a:hover::after {
opacity: 0;
transform: translateY(3px);
}
/*-------------------------------------------
header
-------------------------------------------*/
/*
「position: fixed;」でヘッダーを固定し、「z-index: 10;」で前面に表示
※他のコンテンツでpositionをrelative、absolute、fixedのいずれかに
設定している場合は、z-indexの数値が大きい方が前面に表示される
*/
#header {
width: 100%;
background-color: #fff;
position: fixed;
z-index: 10;
}
#header .site-title {
padding: 20px 16px;
line-height: 1px;
}
/*
「display: inline-block;」でリンクを親要素の範囲に広げる
※blockを指定すると横幅いっぱいまで広がってしまうため、
inline-blockを設定している
*/
#header .site-title a {
display: inline-block;
}
#navi {
background-color: #333;
}
#navi a {
color: #fff;
}
#navi ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
#navi li {
font-size: 0.875rem;
padding: 10px 60px 10px 0;
}
/*-------------------------------------------
pickup
-------------------------------------------*/
#pickup {
display: flex;
justify-content: space-between;
padding-top: 150px;
margin-bottom: 60px;
}
#pickup article {
width: 32%;
}
#pickup .article-title {
font-size: 1rem;
margin: 10px 0 15px 0;
}
/*-------------------------------------------
container
-------------------------------------------*/
#container {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
main {
width: 65%;
}
main article {
margin-bottom: 80px;
}
main .article-title {
font-size: 1.5rem;
margin: 10px 0 15px 0;
}
main ul {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
}
main li {
font-size: 0.875rem;
margin-right: 20px;
}
main .text {
padding: 10px 40px 30px 40px;
}
/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar {
width: 33%;
padding: 20px;
}
#sidebar .side-title {
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 30px;
}
.author {
text-align: center;
margin-bottom: 60px;
}
.author img {
width: 130px;
height: 130px;
border-radius: 50%;
margin-bottom: 30px;
}
.author .profile {
font-size: 0.875rem;
text-align: left;
}
.ranking {
text-align: center;
margin-bottom: 60px;
}
.ranking article {
margin-bottom: 30px;
}
.ranking .article-title {
font-size: 0.875rem;
font-weight: normal;
text-align: left;
}
.archive {
text-align: center;
margin-bottom: 60px;
}
.archive ul {
border-bottom: solid 1px #777;
}
.archive li {
font-size: 0.875rem;
border-top: solid 1px #777;
padding: 20px;
text-align: left;
}
/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
font-size: 0.875rem;
background-color: #f7f7f7;
}
#footer .content {
display: flex;
justify-content: space-between;
padding-top: 50px;
padding-bottom: 50px;
}
#footer .item {
width: 30%;
}
#footer .footer-title {
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 30px;
}
#footer ul.about-list {
margin: 20px 0;
}
#footer ul.about-list li {
margin-bottom: 5px;
}
#footer ul.about-list .arrow {
position: relative;
display: inline-block;
padding-left: 12px;
color: #333;
}
/*
疑似要素で三角矢印を表示
border～プロパティで三角を作り、positionで位置調整
*/
#footer ul.about-list .arrow::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: 0;
margin-top: -6px;
}
#footer .menu-list {
border-bottom: solid 1px #777;
}
#footer .menu-list > li {
border-top: solid 1px #777;
padding: 15px;
text-align: left;
}
#footer .copyright {
font-size: 0.750rem;
text-align: center;
padding: 10px 0;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
/*-------------------------------------------
header
-------------------------------------------*/
#header .site-title {
padding: 20px 16px;
}
#navi {
/* 横スクロールを表示 */
overflow-x: scroll;
}
/*-------------------------------------------
pickup
-------------------------------------------*/
#pickup {
flex-direction: column;
padding-top: 140px;
}
#pickup article {
width: 100%;
margin-bottom: 30px;
}
/*-------------------------------------------
container
-------------------------------------------*/
#container {
flex-direction: column;
}
main {
width: 100%;
}
/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar {
width: 100%;
padding: 0;
}
/*-------------------------------------------
footer
-------------------------------------------*/
#footer .content {
flex-direction: column;
}
#footer .item {
width: 100%;
margin-bottom: 30px;
}
}