HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門 第1章
かなこ
学習初期にお世話になったサイト「Codejump【旧 Codestep】」の方が出版された本です。
全575ページとボリューム満点ですが、楽しみながら取り組みたいと思います！
目次
| 第1章 | 【入門編】プロフィールサイトを作ろう ←今、ココ |
| 第2章 | 【初級編】ブランドサイトを作ろう |
| 第3章 | 【中級編】サービスサイトを作ろう |
| 第4章 | 【上級編】カフェサイトを作ろう |
| 第5章 | 【応用編】ランディングページを作ろう |
| 第6章 | 【実践編】コーポレートサイトを作ろう |
学び
第1章 【入門編】プロフィールサイトを作ろう
| 日数 | 日付 | メモ |
|---|---|---|
| 1 | 2025/01/19 | テキスト購入 |
| 教材データのダウンロード | ||
| 1-1 完成イメージの確認（URL） ⇒ ロゴ、グルーバルナビゲーション、メインビジュアル、プロフィール、作品一覧 | ||
| 1-2 コーディングポイントの確認 ⇒ HTMLの基本タグの使い方、見出しタグ(h1, h2)の使い方、Flexboxを使用した横並びの方法、リストタグ(ul, li)の使い方、レスポンシブ対応 | ||
| 1-3 コーディングの準備をしよう ⇒ ダウンロード、デザインデータ確認、素材確認、完成サイト確認、フォルダとファイルの作成 | ||
| 2 | 2025/01/20 | 1-4 全体の枠組みを作ろう ⇒ header、main、footer ※今回は main の中に footer が入っている ⇒ HTML（基本の型）、CSS（基本の型） ⇒ ブレイクポイントについて ※768px がよく使用される |
| 3 | 2025/01/21 | 1-5 ヘッダーを作ろう ⇒ レイアウト構成の確認 ⇒ HTML、CSSのコーディング ⇒ displayプロパティ、Flexboxについて、レスポンシブ対応 |
| ～ VBAの勉強のためおやすみ ～ | ||
| 4 | 2025/01/28 | 1-6 メインビジュアルとイントロダクションを作ろう ⇒ レイアウト構成の確認（メインコンテンツ、メインビジュアル、イントロダクション） ⇒ HTML、CSSのコーディング ⇒ レスポンシブ対応（余白、フォントサイズ、配置） 【ポイント】画像を囲むタグの使い分け（p、figure、div） |
| 1-7 「Profile」を作ろう ⇒ レイアウト構成の確認（セクション、プロフィール画像、タイトル、説明文） ⇒ HTML、CSSのコーディング（flex) ⇒ レスポンシブ対応（縦並び、余白、フォントサイズ） 【ポイント】divとspanの違い | ||
| 1-8 「Works」を作ろう ⇒ レイアウト構成の確認（セクション、タイトル、画像一覧） ⇒ HTML、CSSのコーディング(flex) ⇒ レスポンシブ対応（縦並び、余白） 【ポイント】疑似クラスについて | ||
| 1-9 フッターを作ろう ⇒ レイアウト構成の確認（フッター、コピーライト） ⇒ HTML、CSSのコーディング ⇒ レスポンシブ対応（不要） 【コラム】クラス名のつけ方 | ||
HTMLの基本の型
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- レスポンシブ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- タイトル -->
<title>ページタイトル</title>
<!-- 概要 -->
<meta name="description" content="説明文">
<!-- ファビコン -->
<link rel="icon" href="./img/favicon.ico">
<!-- アップルタッチアイコン -->
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<!-- リセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- ヘッダー -->
<header id="header" class="wrapper">
<!-- ロゴ -->
<h1 class="logo">
<a href="./index.html">
<img src="./img/logo.svg" alt="タイトルロゴ">
</a>
</h1>
<!-- グローバルナビゲーション -->
<nav>
<ul class="navi">
<li><a href="#menu1">メニュー１</a></li>
<li><a href="#menu2">メニュー２</a></li>
</ul>
</nav>
</header>
<!-- メイン -->
<main class="wrapper">
<!-- メインビジュアル -->
<div class="mainvisual">
<img src="./img/mainvisual.jpg" alt="代替テキスト">
</div>
<!-- フッター -->
<footer id="footer" class="wrapper">
<p class="copyright"><small>@ サイト名.</small></p>
</footer>
</main>
</body>
</html>CSSの基本の型
@charset "UTF-8";
/*-------------------------------------------
ベース
-------------------------------------------*/
html {
font-size: 100%;
}
body {
color: #707070;
font-family: sans-serif;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
a {
color: #707070;
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
/*-------------------------------------------
共通パーツ
-------------------------------------------*/
.wrapper {
max-width: 1000px;
padding: 0 20px;
margin: 0 auto;
}
.section-title {
font-weight: normal;
margin-bottom: 40px;
}
.section-title .en {
display: block;
font-size: 40px;
}
.section-title .ja {
display: block;
font-size: 14px;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
}
#header .logo {
max-width: 190px;
line-height: 0;
}
#header .logo a {
display: block;
}
#header .navi {
display: flex;
align-items: center;
}
#header .navi li {
font-size: 14px;
margin-left: 40px;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
padding-bottom: 20px;
}
#footer .copyright {
text-align: center;
}
#footer .copyright small {
font-size: 12px;
}
/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
}
シンプルなコードですが、きれいなWebページが出来ました。
スラスラとコーディングできるようになりたいです。
