HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門 第3章
かなこ
学習初期にお世話になったサイト「Codejump【旧 Codestep】」の方が出版された本です。
全575ページとボリューム満点ですが、楽しみながら取り組みたいと思います！
書籍情報
| タイトル | HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門 |
|---|---|
| 著者 | 小豆沢 健 |
| 出版社 | 技術評論社 |
| 発売日 | 2025/1/14 |
| 価格 | 3,520 税込 |
| ページ数 | 576ページ |
目次
| 第1章 | 【入門編】プロフィールサイトを作ろう（済） |
| 第2章 | 【初級編】ブランドサイトを作ろう |
| 第3章 | 【中級編】サービスサイトを作ろう ←今、ココ |
| 第4章 | 【上級編】カフェサイトを作ろう |
| 第5章 | 【応用編】ランディングページを作ろう |
| 第6章 | 【実践編】コーポレートサイトを作ろう |
進捗
第3章 【中級編】サービスサイトを作ろう
難易度 ★★★
簡単なHTML＆CSS＆JavaScript（jQuery）を使用した複数ページの練習サイト
いよいよ、複数ページの作成です。
ハンバーガーメニューも楽しみ♪
| 日数 | 日付 | メモ |
|---|---|---|
| 1 | 2025/02/22 | 3-1 完成イメージの確認（URL） ⇒ 「トップ」「サービス」「料金」「お問い合わせ」の４ページ ⇒ ハンバーガーメニュー（jQuery） ⇒ 斜めの背景、 吹き出し、ご利用の流れ、表、フォーム |
| 3-2 コーディングポイントの確認 ⇒ ディレクトリ構成、ラインが斜めのボックス、吹き出し、三角形（疑似要素）、表、フォーム、Googleフォント、ハンバーガーメニュー | ||
| 3-3 コーディングの準備をしよう ⇒ ダウンロード、デザインデータ確認、素材確認、完成サイト確認、フォルダとファイルの作成 |
使い回せるコードの検討（調整中…）
使い回しができるように、コードの基本形を作る試みをしています。
まだまだ試行錯誤の現状で整っていませんが、テキストが終わる頃には仕上げたいと思います。
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 class="header wrapper">
<!-- ロゴ -->
<h1 class="header__logo">
<a href="./index.html">
<img src="./img/logo.svg" alt="タイトルロゴ">
</a>
</h1>
<!-- グローバルナビ -->
<nav class="header__nav global-nav">
<ul class="global-nav__list">
<li class="global-nav__item">
<a href="#menu1" class="global-nav__link">メニュー１</a>
</li>
<li class="global-nav__item">
<a href="#menu2" class="global-nav__link">メニュー２</a>
</li>
</ul>
</nav>
</header>
<!-- メイン -->
<main class="main wrapper">
<!-- メインビジュアル -->
<div class="mainvisual">
<img src="./img/mainvisual.jpg" alt="代替テキスト">
</div>
<!-- セクション -->
<section class="section-name section">
<div class="section-name__wrapper">
<!-- セクションタイトル -->
<h2 class="section-name__title section-title">
セクションタイトル
</h2>
<!-- 画像 -->
<div class="section-name__img">
<img src="./img/section-name.jpg" alt="">
</div>
<!-- テキストボックス -->
<div class="section-name__text-box">
<h2 class="section-name__heading heading-lg">
<span class="heading-lg__en">Title</span>
<span class="heading-lg__ja">タイトル</span>
</h2>
<p class="section-name__description">
セクションの説明
</p>
</div>
<!-- リスト -->
<ul class="section-name__list">
<li class="section-name__item">
<img src="./img/item1.jpg" alt="アイテム1">
</li>
<li class="section-name__item">
<img src="./img/item2.jpg" alt="アイテム2">
</li>
</ul>
</div>
</section>
<!-- フッター -->
<footer class="footer wrapper">
<p class="footer__copyright"><small>@ サイト名.</small></p>
</footer>
</main>
</body>
</html>CSSの基本の型
@charset "UTF-8";
:root {
--font-set: 'YuGothic', 'Yu Gothic', sans-serif;
--font-set-min: 'YuMincho', 'Yu Mincho', serif;
--font-size: 15px;
--font-weight: 500;
--letter-spacing: 0;
--line-height: 1.8; /* calc(27/15) */
--color-text: #333;
--color-link: #333;
--color-bg: #fdf8f8;
--width-contents: 1040px;
}
/*-------------------------------------------
ベース
-------------------------------------------*/
html {
font-size: 100%;
}
body {
font-family: var(--font-set);
color: var(--color-text);
background-color: var(--color-bg);
}
p {
font-size: var(--font-size);
font-weight: var(--font-weight);
letter-spacing: var(--letter-spacing);
line-height: var(--line-height);
text-align: justify;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
a {
color: var(--color-link);
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
/*-------------------------------------------
共通パーツ
-------------------------------------------*/
/* コンテンツ幅の指定 */
.wrapper {
max-width: var(--width-contents);
padding: 0 var(--padding-inline);
margin: 0 auto;
}
/* セクション */
.section {
padding-top: 130px;
padding-bottom: 130px;
}
/* セクションタイトル */
.section-title {
font-family: var(--font-set-min);
font-weight: var(--font-weight);
font-size: 80px;
letter-spacing: 0.1em;
line-height: 1.2;
margin-bottom: 40px;
}
/* 見出し（大） */
.heading-lg {
font-family: var(--font-set-min);
font-weight: var(--font-weight);
line-height: 1.5;
}
.heading-lg__en {
display: block;
font-size: 40px;
}
.heading-lg__ja {
display: block;
font-size: 14px;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
}
.header__logo {
width: 100%;
max-width: 190px;
line-height: 0;
}
.header__logo a {
display: block;
}
.global-nav__list {
display: flex;
align-items: center;
}
.global-nav__item {
font-size: 14px;
margin-left: 40px;
}
/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
.mainvisual img {
width: 100%;
height: 600px;
object-fit: cover;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
.footer {
padding-bottom: 20px;
}
.footer__copyright {
text-align: center;
}
.footer__copyright small {
font-size: 12px;
}
/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
/* 共通パーツ
---------------------*/
.section {
padding-top: 40px;
padding-bottom: 40px;
}
.section-title {
font-size: 24px;
}
/* ヘッダー
---------------------*/
.header .logo {
max-width: 120px;
}
/* メインビジュアル
---------------------*/
.mainvisual img {
height: 480px;
}
}
