今回は、ここまで解説したhtmlとcssを使って、実際にどんな感じでコーディングするかを解説したいと思います。
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
練習用のデザイン
Codestep（コードステップ）さんの、以下のサイトを使用してコーディングをしてみます。
【模写コーディング】おすすめの練習サイト【入門編～上級編】
<body>
<header>
<h1>
<a href="index.html"><img src="img/logo.svg" alt="Profile"></a>
</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#bicycle">Bicycle</a></li>
</ul>
</nav>
</header>
<main>
<img src="img/mainvisual.jpeg" alt="">
</main>
<section id="about">
<h2>About</h2>
<div>
<img src="img/about.jpeg">
<div>
<h3>name name</h3>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
</section>
<section id="bicycle">
<h2>Bicycle</h2>
<div>
<div>
<img src="img/bicycle1.jpeg" alt="">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキスト</p>
</div>
<div>
<img src="img/bicycle2.jpeg" alt="">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキスト</p>
</div>
<div>
<img src="img/bicycle3.jpeg" alt="">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキスト</p>
</div>
</div>
</section>
<footer>© xxxxxx</footer>
</body>
</html>
@charset "UTF-8";
/*-------------------------------------------
リセット
-------------------------------------------*/
html {
font-size: 100%;
}
body {
color: #383e45;
font-size: 0.9rem;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
li {
list-style: none;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10%;
}
header h1 {
width: 120px;
line-height: 1px;
padding: 10px 0;
}
header h1 a {
display: block;
}
header ul {
display: flex;
padding: 10px 0;
}
header li {
margin-left: 30px;
}
header li a {
color: #24292e;
}
header li a:hover {
opacity: 0.7;
}
/*-------------------------------------------
メイン
-------------------------------------------*/
main {
margin-bottom: 80px;
}
main img {
width: 100%;
max-width: 1920px;
height: 600px;
object-fit: cover;
}
/*-------------------------------------------
About
-------------------------------------------*/
#about {
max-width: 960px;
margin: 0 auto 100px;
text-align: center;
}
#about h2 {
display: inline-block;
font-size: 30px;
text-align: center;
margin: 0 auto 60px;
border-bottom: solid 1px #383e45;
}
#about > div {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
max-width: 500px;
margin: 0 auto;
}
#about > div img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 30px;
}
#about > div h3 {
font-size: 20px;
margin: 10px 0;
text-align: left;
}
#about > div p {
text-align: left;
}
/*-------------------------------------------
Bicycle
-------------------------------------------*/
#bicycle {
max-width: 960px;
margin: 0 auto 100px;
text-align: center;
}
#bicycle h2 {
display: inline-block;
font-size: 30px;
text-align: center;
margin: 0 auto 60px;
border-bottom: solid 1px #383e45;
}
#bicycle > div {
display: flex;
justify-content: space-between;
align-items: center;
}
#bicycle > div > div {
width: 32%;
}
#bicycle > div > div h3 {
font-size: 18px;
margin: 10px 0;
}
/*-------------------------------------------
footer
-------------------------------------------*/
footer {
font-size: 14px;
margin: 50px;
text-align: center;
}
htmlとcssを記述しました。
ブラウザで確認してみましょう。
htmlの解説
まず、htmlの解説をします。
htmlは、以下の5つの親要素に分けています。
- ヘッダー
- メイン
- アバウト（セクション）
- バイシクル（セクション）
- フッター
この親要素に、それぞれ子要素を追加していき、1つのブロックを作っていくイメージです。
idとclassは、セクションタグにしか付けていません。
コーディング方法は、人によって様々なので、何が良いとは言えないのですが、僕は極力シンプルにしたいので、このような形にしています。
cssの解説
次に、cssの解説をします。
cssもhtmlと同様で、親要素別にコメントアウトで分かりやすいにように記述しています。
1番上の「リセット」ですが、これは最初から適用されているhtmlタグを上書きしています。
例えば、h1タグのフォントサイズや、pタグのマージン等、htmlタグは最初から色々とスタイルが効いています。
このスタイルがあるとコーディングしにくいので、最初に上書き用のスタイルを記述するのが一般的になっています。
タグとidの付け方は、#5で解説した通りで、極力シンプルにしています。
スタイルは、ひとつひとつ解説するとかなりのボリュームになるので割愛します。
以下サイトにまとまっているので、参考にしてください。
→スタイルシートリファレンス（目的別）
最後に
以上、htmlとcssを使って、実際にどんな感じでコーディングするかを解説しました。
ブログでは理解しにくいと思うので、ぜひ動画で見てみてください。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント