現在HTML/CSSを学習している駆け出しエンジニアです。
この記事では、「HTML/CSSを1か月学んだ後、自力で制作したwebサイト」を紹介します。
※時間に換算すると学習時間はおよそ60時間
ワカバ
はたして1か月でクオリティの高いwebサイトが作れるようになるのか…
webデザインを学んでいる方、学ぼうとしている方ぜひ参考にしてください。学習の1つの指針になればうれしいです。
HTML/CSS1か月学習の成果
完成したwebサイト
成果物のデモサイトはこちら→https://salaryman-kurashi.com/demo2/
ぜひ上記のリンクにアクセスして完成したWebサイトを確かめてみてください。
成果物のデザインはこちらです⇩
デスクトップ版
モバイル版
ブログのトップページをデザインしてみました！
webサイトのコード
制作には以下の3つのファイルを使用しました。（画像のデータは省略しています）
- index.html
- style.css
- responsive.css
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Business Blog</title>
<meta name="description" content="ビジネスに関する情報を発信しています">
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@700&
family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4219e81c88.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="header-background">
<div class="header-contents">
<h1>Business Blog</h1>
<p>ビジネスに関する情報を発信していきます</p>
</div>
</div>
</header>
<main>
<div class="container">
<section id="main-contents">
<div class="main-articles">
<div class="article">
<div class="article-title">
<h2>おススメのビジネス本を紹介します！</h2>
</div>
<div class="article-contents">
<div class="article-left">
<div class="date">
<p>2021 8/28</p>
</div>
<img src="images/article1.jpg">
</div>
<div class="article-right">
<p>
私がおススメするビジネス本を紹介します！コミュニケーションスキル向上やチーム運営のコツ、美しい文書の作成など
幅広いジャンルから厳選しました。
</p>
<a href="">VIEW MORE</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="article">
<div class="article-title">
<h2>私の仕事の失敗談</h2>
</div>
<div class="article-contents">
<div class="article-left">
<div class="date">
<p>2021 8/27</p>
</div>
<img src="images/article2.jpg">
</div>
<div class="article-right">
<p>
私の仕事での失敗談を紹介します。取引先での失敗、人間関係での失敗など皆さんにも起こりうる失敗を紹介します。
反面教師にしてください。
</p>
<a href="">VIEW MORE</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="article">
<div class="article-title">
<h2>上司とのコミュニケーションのコツ</h2>
</div>
<div class="article-contents">
<div class="article-left">
<div class="date">
<p>2021 8/26</p>
</div>
<img src="images/article3.jpg">
</div>
<div class="article-right">
<p>
上司とのコミュニケーションのコツを紹介します。有効な関係を築くことができれば、あなたの仕事がもっと充実するはずです。
ぜひ参考にしてください。
</p>
<a href="">VIEW MORE</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="article">
<div class="article-title">
<h2>仕事ができる人の特徴5選</h2>
</div>
<div class="article-contents">
<div class="article-left">
<div class="date">
<p>2021 8/25</p>
</div>
<img src="images/article4.jpg">
</div>
<div class="article-right">
<p>
仕事ができる人の特徴5選を紹介します。あなたの周りの仕事ができる人にも当てはまるはずです！できるビジネスパーソンになるために
特徴を学んで自分のものにしましょう。
</p>
<a href="">VIEW MORE</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="page-number">
<ul>
<li><a href="">＜</a></li>
<li><span>1</span></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">＞</a></li>
</ul>
</div>
</section>
<section id="aside">
<div class="search">
<input type="text" placeholder="サイト内を検索">
<a href=""><i class="fas fa-search"></i></a>
</div>
<div class="aside-box">
<div class="category">
<h3>Category</h3>
<ul>
<li><a href="">ビジネススキル</a></li>
<li><a href="">書籍紹介</a></li>
<li><a href="">体験談</a></li>
<li><a href="">その他</a></li>
</ul>
</div>
</div>
<div class="aside-box sticky">
<div class="recommends">
<h3>Recommends</h3>
<ul>
<li><a href="">おすすめのビジネス本を紹介します！</a></li>
<li><a href="">私の仕事の失敗談</a></li>
<li><a href="">上司とのコミュニケーションのコツ</a></li>
<li><a href="">仕事ができる人の特徴5選</a></li>
</ul>
</div>
</div>
</section>
</div>
</main>
<footer>
<ul>
<li><a href="">Twitter</a></li>
<li><a href="">お問い合わせ</a></li>
<li><a href="">プライバシーポリシー</a></li>
</ul>
<p>©2021 Business Blog</p>
</footer>
</body>
</html>style.css
@charset "utf-8";
/*
GENERAL STYLING
======================================================================================
*/
*{
box-sizing: border-box;
padding:0px;
margin:0px;
}
html{
font-size:100%;
}
body{
color:#949087;
font-family:sans-serif;
margin:0;
}
/*
COMMON
======================================================================================
*/
p{
line-height: 1.6;
}
.container{
max-width:1000px;
margin:0 auto;
padding:1.5rem;
background:#fff;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
main{
background:rgb(240, 250, 253);
padding:2rem 0 3rem 0;
}
/*
HEADER
======================================================================================
*/
header{
background-image:url("../images/header.jpg");
background-size:cover;
background-position: center center;
height:170px;
text-align:center;
color:black;
margin:0;
display: block;
}
.header-background{
background:rgb(255,255,255,0.5);
background-size:cover;
height:100%;
}
.header-contents{
position:relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.header-contents h1{
font-family: 'Kaisei HarunoUmi', serif;
}
.header-contents p{
font-family: 'Noto Sans JP', sans-serif;
}
/*
MAIN
======================================================================================
*/
#main-contents{
width:70%;
}
#aside{
width:25%;
}
/*
MAIN-CONTANTS
======================================================================================
*/
.main-articles{
padding:0 0.5rem;
}
.article{
width:100%;
box-shadow:0 0 0.3rem 0.4rem #ccc;
margin-bottom:2rem;
border-radius:5px;
padding:0.5rem;
}
.article-contents{
width:100%;
}
.article-left{
width:200px;
float:left;
margin-right:0.8rem;
}
.article-left img{
width:100%;
border-radius: 10px;
}
/*articleのタイトルの修飾*/
.article-title{
background:linear-gradient(90deg,#4db1ec,#a2e29b);
padding:0.2rem 1rem 0.2rem;
border-radius: 5px;
color:black;
margin-top:0.3rem;
margin-bottom:1rem;
}
.article-title h2{
font-family: 'Noto Sans JP', sans-serif;
font-size:1.5rem;
}
/*article-left部分の修飾*/
.article-left{
position:relative;
float:left;
}
.date{
background:#ccc;
color:black;
opacity: 0.6;
display:inline-block;
padding:0.2rem 0.5rem;
border-radius:5px;
position:absolute;
top:0.3rem;
left:0.3rem;
}
.date p{
font-size:0.5rem;
}
/*article-right部分の修飾*/
.article-right p{
color:rgb(122, 122, 122);
}
.article-right a{
text-decoration: none;
display: block;
padding:0.5rem 1rem;
background:linear-gradient(90deg,#eb5d7e,#7c539d);
border-radius:5px;
color:white;
font-size:0.8rem;
float:right;
margin-top: 2rem;
position:relative;
}
.article-right a:hover{
text-decoration: underline;
color:#ccc;
}
.article-right a:active{
top:5px;
}
.clear{
clear: both;
}
/*page-number部分*/
.page-number{
display:flex;
font-size:1.5rem;
margin:3rem 0 .5rem;
}
.page-number ul{
list-style: none;
margin:0 auto;
}
.page-number li{
float:left;
margin:0 5px;
}
.page-number a{
text-decoration: none;
color:black;
border-radius: 20px;
width:40px;
height:40px;
display: inline-block;
text-align: center;
line-height:40px;
position: relative;
}
.page-number span{
background-color: #ccc;
color:white;
border-radius: 20px;
width:40px;
height:40px;
display:inline-block;
text-align:center;
line-height:40px;
}
.page-number a:hover{
background-color: cornflowerblue;
color:white;
text-decoration: underline;
}
.page-number a:active{
top:5px;
}
/*
ASIDE
======================================================================================
/*
/*
search
*/
.search{
width:100%;
display:flex;
margin:1rem 0 2rem;
}
.search input{
height:3rem;
width:80%;
border:1px black solid;
border-right:none;
margin:0;
padding-left:.5rem;
}
.search input:focus{
outline: 0;
}
.search a{
height:3rem;
border:1px black solid;
border-left:none;
display: inline-block;
line-height:3rem;
width:20%;
margin:0;
text-align: center;
}
.search i{
position:relative;
}
.search i:active{
top:5px;
}
/*
ASIDE-BOX
*/
.aside-box{
box-shadow:0 0 0.3rem 0.4rem #ccc;
color:black;
padding:1rem 0.3rem;
margin-bottom:3rem;
}
.aside-box h3{
font-family: 'Kaisei HarunoUmi', serif;
font-size:1.5rem;
text-align: center;
padding-bottom:1rem;
}
.aside-box li{
list-style: none;
border-bottom:1px #ccc dashed;
padding-bottom:0.8rem;
display: flex;
}
.aside-box a{
font-size:1.1rem;
text-decoration: none;
color:black;
}
.aside-box a:hover{
text-decoration: underline;
}
.aside-box a:active{
color:#7c539d;
}
.aside-box li:not(:first-child){
padding-top:1rem;
}
.aside-box li::before{
font-family:"Font Awesome 5 Pro";
font-weight:900;
content:"\f531";
margin-left:.5rem;
color:#4db1ec;
margin-top:.2rem;
margin-right:.5rem;
}
.sticky{
position:sticky;
top:1rem;
}
/*
FOOTER
======================================================================================
*/
footer{
width:100%;
padding:3rem;
text-align: center;
background-color:black;
color:white;
}
footer ul{
list-style: none;
display: inline-block;
}
footer li{
float:left;
margin:0 1rem;
}
footer a{
text-decoration: none;
color:white;
}
footer a:hover{
text-decoration: underline;
}responsive.css
@media(max-width:600px){
/*メインコンテンツを縦並びにする*/
.container{
flex-direction: column;
}
#main-contents{
width:100%;
}
#aside{
width:100%;
}
.article-contents{
flex-direction: column;
}
.article-left{
width:100%;
}
.article-right{
width:100%;
}
.article-left img{
height:250px;
}
}1か月の学習ロードマップ
1か月の学習内容を紹介します
1～10日目：Progateで学習
勉強開始直後の10日間はプログラミングオンライン学習サービスの「Progate」（プロゲート）で学習しました。
Progateについては過去に詳しく紹介したので気になる方は是非読んでみてください⇩
11～20日目：模写コーディングをしてアウトプット
11～20日目は模写コーディングを行いました。Progateで学習した内容を定着させるために0からwebサイトを作り上げる練習をしました。
模写コーディングで使用したページは「Codestep」です。
Codestepは初心者が気軽にチャレンジできる模写課題が豊富に用意されているので、学習を始めたばかりの方におすすめです！
21日目～：スキルを高めるために書籍で学習
HTML/CSSの基本が身についたので、書籍を利用してさらに知識を深めました。
※1か月経った後も書籍での学習は継続しています
使用している書籍は『ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座』です。
この本には、洗練されたWebサイトを制作するためのエッセンスが詰まっています。Webデザインのスキルを本格的に鍛えたい人には非常におススメです！
サンプルデータをダウンロードできるので、実際にコーディングしながら学習することができます。
リンク
さいごに
いかがでしたでしょうか？個人的には1か月の学習でかなりクオリティの高いwebサイトが作れるようになったと思います！
これからもWebデザインの学習を継続して、webデザインの仕事を獲得できるくらいスキルを磨きたいと思います。
ワカバ
