このチャプターの目次
Figmaでページ全体の構造が把握できれば、実際にHTMLのコーディングをしていきましょう。
※今回は、SassやFLOCSSに関するチュートリアルなのでHTMLの詳しい説明はちょこちょこ割愛しています。
エディタはVisualStudioCode（VSCode）を使います。（なのでショートカットもVSCode仕様なことが多いです。）
プロジェクトフォルダをつくってindex.htmlを作成します。今回はsass-flocss-tutorialというフォルダでコーディングしていきます。
sass-flocss-tutorial
└─index.html
では、このindex.htmlをコーディングしていきます。
VSCodeなら!にtabキーで、一気にここまでコーディングできます。
<html lang="ja">の部分はVSCodeの設定によってはenになっていると思うので適宜修正してください！
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
head部分のHTMLコーディング
まずはhead部分をコーディングしていきます。
head部分に書く内容としては以下の3点。
- サイトの付帯情報（メタ情報）
- SNS等の共有に必要な情報（OGP）
- CSSを読み込ませるリンク
メタ情報
サイトの付帯情報（メタ情報）は、Googleにサイトの情報を認知してもらえるように書く内容です。
サイトのタイトルやサイトの説明文、サイトの制作者などを書いていきます。
URLはGoogleに正規のURLを認知してもらえるように書きます。
index.html
<!-- サイトのタイトル -->
<title>LPをつくって学ぶSass×FLOCSS</title>
<!-- サイトの説明文 -->
<meta name="description" content="現場で頻出のSassの使い方からFLOCSSの記法までをLPをつくりながら学ぶ電子書籍！"/>
<!-- サイト制作者 -->
<meta name="author" content="@yurukei20" />
<!-- サイトのURL -->
<link rel="canonical" href="https://traveler20.github.io/sass-flocss-tutorial/"/>
OGP情報
続いて、SNS共有に必要な情報を書いていきます。SNSを共有した際に表示される画像やタイトルの内容です。
Zennでも実際にこんな感じで表示されます。▼
『LPをつくって学ぶSass×FLOCSS』はじめに より
正直、タイトルや説明文は先程記載したタイトルや説明文と内容が同じでもいいかなと。
実際に書いていくコードとしてはこのようになります。
index.html
<!-- サイトタイトル -->
<meta property="og:title" content="LPをつくって学ぶSass×FLOCSS" />
<meta property="og:site_name" content="LPをつくって学ぶSass×FLOCSS" />
<!-- サイト説明文 -->
<meta property="og:description" content="現場で頻出のSassの使い方からFLOCSSの記法までをLPをつくりながら学ぶ電子書籍！"/>
<!-- サイトのURL -->
<meta property="og:url" content="https://traveler20.github.io/sass-flocss-tutorial/"/>
<!-- サイトを共有した際に表示される画像URL -->
<meta property="og:image" content="https://traveler20.github.io/sass-flocss-tutorial/asset/img/ogp.webp"/>
<!-- サイトの種類 -->
<meta property="og:type" content="website" />
<!-- Twitterで表示させたときの見え方 -->
<meta name="twitter:card" content="large" />
<!-- Twitterのユーザー名 -->
<meta name="twitter:site" content="@yurukei20" />
<!-- サイトの言語情報 -->
<meta property="og:locale" content="ja_JP" />
<!-- サイトのアイコン -->
<link rel="icon" type="image/x-icon" href="./asset/img/favicon.ico" />
CSSのリンク
最後に、読み込ませるCSSファイルなどを書いていきましょう。
fontawesomeも使うのでCDNを読み込みます。
あと、リセットCSSとして今回はdestyle.cssを使っていきます。
destyle.cssの主な表示としてはこのようになります。
今回はSassでstyle.min.cssにコンパイル（変換）させるので、読み込ませるCSSはstyle.min.cssになります。
index.html
<!-- fontawesome -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
<!-- reset.css destyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
<!-- style.min.css -->
<link rel="stylesheet" href="./asset/css/style.min.css" />
head部分のコード
最終的なコードはこのようになります。
head部分のコーディング
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LPをつくって学ぶSass×FLOCSS</title>
<meta name="description" content="現場で頻出のSassの使い方からFLOCSSの記法までをLPをつくりながら学ぶ電子書籍！"/>
<meta name="author" content="@yurukei20" />
<link rel="canonical" href="https://traveler20.github.io/sass-flocss-tutorial/"/>
<meta property="og:url" content="https://traveler20.github.io/sass-flocss-tutorial/"/>
<meta property="og:title" content="LPをつくって学ぶSass×FLOCSS" />
<meta property="og:type" content="website" />
<meta property="og:description" content="現場で頻出のSassの使い方からFLOCSSの記法までをLPをつくりながら学ぶ電子書籍！"/>
<meta property="og:image" content="https://traveler20.github.io/sass-flocss-tutorial/asset/img/ogp.webp"/>
<meta name="twitter:card" content="large" />
<meta name="twitter:site" content="@yurukei20" />
<meta property="og:site_name" content="LPをつくって学ぶSass×FLOCSS" />
<meta property="og:locale" content="ja_JP" />
<link rel="icon" type="image/x-icon" href="./asset/img/favicon.ico" />
<!-- fontawesome -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
<!-- reset.css destyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
<link rel="stylesheet" href="./asset/css/style.min.css" />
</head>
<body></body>
</html>
全体レイアウトのHTMLコーディング
head部分のコーディングが終えれば、ページ全体のレイアウトをコーディングしていきましょう。
先程Figmaでタグ付けした内容をもとにコーディングをします。
構造としては、ヘッダー部分とメインコンテンツ部分とフッター部分の3構成。body内をl-headerとmainとl-footerとしてコーディングしていきます。
index.html
<body>
<!-- .l-header -->
<header class="l-header"></header>
<!-- /.l-header -->
<!-- main -->
<main></main>
<!-- /main -->
<!-- .l-footer -->
<footer class="l-footer"></footer>
<!-- /.l-footer -->
</body>
mainの中には複数のセクションがあるので、セクションタグも追加して骨組みを組んでいきます。
その際、headerやfooterを含めて、各セクションの最大横幅を設定しておきたいので、header直下にはc-innerクラスのdivタグで囲います。
index.html
<body>
<!-- .l-header -->
<header class="l-header">
<div class="c-inner"></div>
</header>
<!-- /.l-header -->
<!-- main -->
<main>
<!-- .p-fv -->
<section class="p-fv">
<div class="c-inner"></div>
</section>
<!-- /.p-fv -->
<!-- .p-theme -->
<section class="p-theme c-section">
<div class="c-inner"></div>
</section>
<!-- /.p-theme -->
<!-- .p-solution -->
<section class="p-solution c-section">
<div class="c-inner"></div>
</section>
<!-- /.p-solution -->
<!-- .p-faq -->
<section class="p-faq c-section">
<div class="c-inner"></div>
</section>
<!-- /.p-faq -->
<!-- .p-cv -->
<section class="p-cv c-section">
<div class="c-inner"></div>
</section>
<!-- /.p-cv -->
</main>
<!-- /main -->
<!-- .l-footer -->
<footer class="l-footer">
<div class="c-inner"></div>
</footer>
<!-- /.l-footer -->
</body>
.l-header部分のHTMLコーディング
それでは、l-headerの部分のHTMLをコーディングしていきます。
横並びはflexboxでスタイリングしたいので、l-header__contentクラスをつくり、そのなかにロゴ部分とボタン部分のコーディングをしていきます。
index.html
<!-- .l-header -->
<header class="l-header">
<div class="c-inner">
<div class="l-header__content">
<a href="" class="l-header__logo"><img src="./asset/img/header-logo.svg" alt=""/></a>
<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
</div>
</div>
</header>
<!-- /.l-header -->
.p-fv部分のHTMLコーディング
続いて、p-fvセクション部分のHTMLをコーディングしていきます。
まず、p-fv__contentでflexboxを設定していきます。
index.html
<!-- .p-fv -->
<section class="p-fv">
<div class="c-inner">
<figure class="p-fv__content">
<figcaption></figcaption>
<img src="" alt="" />
</figure>
</div>
</section>
<!-- /.p-fv -->
figcaptionタグのなかに、サイト全体のタイトルであるh1タグや説明文のpタグを追加していきましょう。
spanタグで部分部分のフォントサイズを調整したり、改行の位置を調整します。
index.html
<figcaption>
<h1>
<span class="u-inline-block"
><span class="text-100">LP</span>をつくって学ぶ</span
><span class="u-inline-block"
><span class="text-96">Sass</span
><span class="text-80">×</span
><span class="text-96">FLOCSS</span></span>
</h1>
<p>
現場で頻出のSassの使い方からFLOCSSの記法までを<br />LPをつくりながら学ぶ電子書籍！
</p>
</figcaption>
u-inline-blockタグで改行したい文章のカタマリを囲ってdisplay:inline-blockを当てると、ちょうどいい感じに改行できます。（後ほど実装します。）
最終的にp-fvセクション部分はこのようになります。
p-fv部分
index.html
<!-- .p-fv -->
<section class="p-fv">
<div class="c-inner">
<figure class="p-fv__content">
<figcaption>
<h1>
<span class="u-inline-block"
><span class="text-100">LP</span>をつくって学ぶ</span
><span class="u-inline-block"
><span class="text-96">Sass</span
><span class="text-80">×</span
><span class="text-96">FLOCSS</span></span
>
</h1>
<p>
現場で頻出のSassの使い方からFLOCSSの記法までを<br />LPをつくりながら学ぶ電子書籍！
</p>
</figcaption>
<img src="./asset/img/fv-book.webp" alt="" />
</figure>
</div>
</section>
<!-- /.p-fv -->
.p-theme部分のHTMLコーディング
次に、p-themeセクション部分のHTMLをコーディングしていきます。
まず、各セクションで用いる共通のタイトルからコーディングしていきましょう。
スマホ時は改行、PC時は一文にするためにここでもu-inline-blockクラスのspanタグをカタマリごとにあてていきます。
index.html
<div class="c-inner">
<h2 class="c-section__title">
<span class="u-inline-block">コーディング学習で</span
><span class="u-inline-block">よくある相談</span>
</h2>
</div>
そして、その下は2カラムの構造になっているので、flexboxのp-theme__contentクラスを追加していきます。
ついでにリスト部分もスタイリングが必要なので、p-theme__listsクラスのul/liタグを追加していきましょう。
index.html
<figure class="p-theme__content">
<img
src="https://images.unsplash.com/photo-1575089976121-8ed7b2a54265?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt=""
/>
<figcaption>
<ul class="p-theme__lists">
<li>HTML・CSSは勉強したけど、現場のスキルに合うか不安…。</li>
<li>現場でSassを使ってるみたいだけど全然わからない…。</li>
<li>CSSのクラス名が整理できずCSSの修正案件に時間がかかる…。</li>
<li>もっと整理されたCSSを書きたい！</li>
<li>FLOCSSの具体的な書き方を知りたい！</li>
</ul>
</figcaption>
</figure>
現時点のp-themeセクションのコードは以下のようになります。
p-theme部分
index.html
<!-- .p-theme -->
<section class="p-theme c-section">
<div class="c-inner">
<h2 class="c-section__title">
<span class="u-inline-block">コーディング学習で</span
><span class="u-inline-block">よくある相談</span>
</h2>
<figure class="p-theme__content">
<img
src="https://images.unsplash.com/photo-1575089976121-8ed7b2a54265?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt=""
/>
<figcaption>
<ul class="p-theme__lists">
<li>HTML・CSSは勉強したけど、現場のスキルに合うか不安…。</li>
<li>現場でSassを使ってるみたいだけど全然わからない…。</li>
<li>CSSのクラス名が整理できずCSSの修正案件に時間がかかる…。</li>
<li>もっと整理されたCSSを書きたい！</li>
<li>FLOCSSの具体的な書き方を知りたい！</li>
</ul>
</figcaption>
</figure>
</div>
</section>
<!-- /.p-theme -->
.p-solution部分のHTMLコーディング
次に、p-solutionセクションのHTMLをコーディングします。
p-solutionセクションも、p-themeセクションと同様に共通のコンポーネント要素であるタイトルからコーディングします。
index.html
<div class="c-inner">
<h2 class="c-section__title">
書籍『LPをつくって学ぶSass×FLOCSS』なら
</h2>
</div>
で、今回のセクションは3カラムなので、ul/liタグにp-solution__listsなどと名付けて3つのカラムをコーディングしていきます。
index.html
<ul class="p-solution__lists">
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
<p>Sass×FLOCSSを<br />実際に書きながら学べる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1580894742597-87bc8789db3d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt=""
/>
<p>現場レベルのHTML/CSSの<br />技術を体感できる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1052&q=80"
alt=""
/>
<p>つくったLPは<br />ポートフォリオに掲載OK！</p>
</li>
</ul>
p-solutionセクションのコードは以下のようになります。
p-solution部分
index.html
<!-- .p-solution -->
<section class="p-solution c-section">
<div class="c-inner">
<h2 class="c-section__title">
書籍『LPをつくって学ぶSass×FLOCSS』なら
</h2>
<ul class="p-solution__lists">
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
<p>Sass×FLOCSSを<br />実際に書きながら学べる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1580894742597-87bc8789db3d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt=""
/>
<p>現場レベルのHTML/CSSの<br />技術を体感できる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1052&q=80"
alt=""
/>
<p>つくったLPは<br />ポートフォリオに掲載OK！</p>
</li>
</ul>
</div>
</section>
<!-- /.p-solution -->
.p-faq部分のHTMLコーディング
続いて、アコーディオンメニューのあるp-faq部分のHTMLをコーディングしていきます。
p-theme/p-solutionセクションと同様、共通タイトルをコーディングします。
そして、そのタイトルの下に、アコーディオンメニューのカタマリとなるp-faq__contentクラスのdivタグをつくります。
index.html
<div class="c-inner">
<h2 class="c-section__title">よくある質問</h2>
<div class="p-faq__content">
</div>
</div>
それでは、アコーディオンメニューのHTMLをコーディングしていきましょう。
最近のHTMLでは、detailsタグやsummaryタグを用いることで簡単にアコーディオンメニューを作成できます。
具体的には、detailsタグとsummaryタグをこのように書くと、▼
<details>
<summary>アコーディオンタイトル</summary>
<div>アコーディオンのコンテンツ</div>
</details>
CSSなしでもこのように簡易なアコーディオンメニューを作成できます。▼
それをp-faq__contentに当てはめると、以下のようになります。一応、スタイリングでFigmaファイルのようなデザインにしたいので、各タグにクラスも付けておきます。
index.html
<div class="p-faq__content">
<details class="p-faq__details">
<summary class="p-faq__summary">お金はかかりますか？</summary>
<div class="p-faq__answer">
かかりません。Zennにて0円で出版します。
</div>
</details>
</div>
ちなみに、より詳細なアコーディオンメニューについては、HTMLとCSSでできるJavaScriptっぽい機能という記事で紹介しています。
最終的に、p-faqセクションのコードは以下のようになります。
p-faq部分
index.html
<!-- .p-faq -->
<section class="p-faq c-section">
<div class="c-inner">
<h2 class="c-section__title">よくある質問</h2>
<div class="p-faq__content">
<details class="p-faq__details">
<summary class="p-faq__summary">お金はかかりますか？</summary>
<div class="p-faq__answer">
かかりません。Zennにて0円で出版します。
</div>
</details>
<details class="p-faq__details">
<summary class="p-faq__summary">
作成したLPをTwitterで共有しても大丈夫でしょうか？
</summary>
<div class="p-faq__answer">
もちろん、大丈夫です！<br />
ZennのURLや＠yurukei20をメンションしてもらえるとリツイートします！
</div>
</details>
<details class="p-faq__details">
<summary class="p-faq__summary">
作成したLPはポートフォリオにしていいですか？
</summary>
<div class="p-faq__answer">
はい！もちろんです。<br />
もし可能であれば、書籍の題名やZennのURLなどを一緒に記載していただけると幸いです。
</div>
</details>
<details class="p-faq__details">
<summary class="p-faq__summary">試し読みはできますか？</summary>
<div class="p-faq__answer">
全編無料なので試し読みもなにも全部無料で読めますよ！
</div>
</details>
</div>
</div>
</section>
<!-- /.p-faq -->
.p-cv部分のHTMLコーディング
セクションとしては最後のp-cvセクションです。
他のセクションと同様に共通のタイトルをコーディングします。
その下に、p-cv__contentクラスを付与したdivタグを追加していきましょう。
p-cv__contentのなかに、共通のボタンを設置したいので、c-buttonクラスを付与したaタグを追加したらほぼ終わりです。
このセクションは構造が単純なので、いきなり最終形態のコードを載せておきますね。
index.html
<!-- .p-cv -->
<section class="p-cv c-section">
<div class="c-inner">
<h2 class="c-section__title">まずは試し読みから！</h2>
<div class="p-cv__content">
<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
</div>
</div>
</section>
<!-- /.p-cv -->
.l-footer部分のHTMLコーディング
最後に、l-footer部分のHTMLをコーディングしていきます。
l-footer部分の構造はほとんどl-header部分と同じなので、まずは以下のようにコーディングしていきましょう。
index.html
<!-- .l-footer -->
<footer class="l-footer">
<div class="c-inner">
<div class="l-footer__content">
</div>
</div>
</footer>
<!-- /.l-footer -->
l-footer__contentのなかにある、各種リンクやコピーライトを書いていきましょう。
各種リンクはul/liタグでコーディングします。
コピーライトはsmallタグでコーディングしていきます。
index.html
<ul class="l-footer__lists">
<li><a href="https://yurukei-career.com/">運営会社</a></li>
<li><a href="https://yurukei-career.com/toiawase-form/">お問い合わせ</a></li>
</ul>
<small class="l-footer__copyright">©yurukei20</small>
最終的にl-footer部分のHTMLは以下のようになります。
p-footer部分
index.html
<!-- .l-footer -->
<footer class="l-footer">
<div class="c-inner">
<div class="l-footer__content">
<ul class="l-footer__lists">
<li><a href="https://yurukei-career.com/">運営会社</a></li>
<li>
<a href="https://yurukei-career.com/toiawase-form/"
>お問い合わせ</a
>
</li>
</ul>
<small class="l-footer__copyright">©yurukei20</small>
</div>
</div>
</footer>
<!-- /.l-footer -->
最終的なHTMLコード
最終的なHTMLのコードとしてはこのようになります。
このHTMLをもとに次の章からScssをコーディングしていきましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LPをつくって学ぶSass×FLOCSS</title>
<meta
name="description"
content="現場で頻出のSassの使い方からFLOCSSの記法までをLPをつくりながら学ぶ電子書籍！"
/>
<meta name="author" content="@yurukei20" />
<link
rel="canonical"
href="https://traveler20.github.io/sass-flocss-tutorial/"
/>
<meta property="og:title" content="LPをつくって学ぶSass×FLOCSS" />
<meta property="og:site_name" content="LPをつくって学ぶSass×FLOCSS" />
<meta
property="og:description"
content="現場で頻出のSassの使い方からFLOCSSの記法までをLPをつくりながら学ぶ電子書籍！"
/>
<meta
property="og:url"
content="https://traveler20.github.io/sass-flocss-tutorial/"
/>
<meta
property="og:image"
content="https://traveler20.github.io/sass-flocss-tutorial/asset/img/ogp.webp"
/>
<meta property="og:type" content="website" />
<meta name="twitter:card" content="large" />
<meta name="twitter:site" content="@yurukei20" />
<meta property="og:locale" content="ja_JP" />
<link rel="icon" type="image/x-icon" href="./asset/img/favicon.ico" />
<!-- fontawesome -->
<link
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
rel="stylesheet"
/>
<!-- reset.css destyle -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
/>
<link rel="stylesheet" href="./asset/css/style.min.css" />
</head>
<body>
<!-- .l-header -->
<header class="l-header">
<div class="c-inner">
<div class="l-header__content">
<a href="" class="l-header__logo"
><img src="./asset/img/header-logo.svg" alt=""
/></a>
<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
</div>
</div>
</header>
<!-- /.l-header -->
<!-- .l-main -->
<main class="l-main">
<!-- .p-fv -->
<section class="p-fv">
<div class="c-inner">
<figure class="p-fv__content">
<figcaption>
<h1>
<span class="u-inline-block"
><span class="text-100">LP</span>をつくって学ぶ</span
><span class="u-inline-block"
><span class="text-96">Sass</span
><span class="text-80">×</span
><span class="text-96">FLOCSS</span></span
>
</h1>
<p>
現場で頻出のSassの使い方からFLOCSSの記法までを<br />LPをつくりながら学ぶ電子書籍！
</p>
</figcaption>
<img src="./asset/img/fv-book.webp" alt="" />
</figure>
</div>
</section>
<!-- /.p-fv -->
<!-- .p-theme -->
<section class="p-theme c-section">
<div class="c-inner">
<h2 class="c-section__title">
<span class="u-inline-block">コーディング学習で</span
><span class="u-inline-block">よくある相談</span>
</h2>
<figure class="p-theme__content">
<img
src="https://images.unsplash.com/photo-1575089976121-8ed7b2a54265?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt=""
/>
<figcaption>
<ul class="p-theme__lists">
<li>HTML・CSSは勉強したけど、現場のスキルに合うか不安…。</li>
<li>現場でSassを使ってるみたいだけど全然わからない…。</li>
<li>CSSのクラス名が整理できずCSSの修正案件に時間がかかる…。</li>
<li>もっと整理されたCSSを書きたい！</li>
<li>FLOCSSの具体的な書き方を知りたい！</li>
</ul>
</figcaption>
</figure>
</div>
</section>
<!-- /.p-theme -->
<!-- .p-solution -->
<section class="p-solution c-section">
<div class="c-inner">
<h2 class="c-section__title">
書籍『LPをつくって学ぶSass×FLOCSS』なら
</h2>
<ul class="p-solution__lists">
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
<p>Sass×FLOCSSを<br />実際に書きながら学べる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1580894742597-87bc8789db3d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt=""
/>
<p>現場レベルのHTML/CSSの<br />技術を体感できる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1052&q=80"
alt=""
/>
<p>つくったLPは<br />ポートフォリオに掲載OK！</p>
</li>
</ul>
</div>
</section>
<!-- /.p-solution -->
<!-- .p-faq -->
<section class="p-faq c-section">
<div class="c-inner">
<h2 class="c-section__title">よくある質問</h2>
<div class="p-faq__content">
<details class="p-faq__details">
<summary class="p-faq__summary">お金はかかりますか？</summary>
<div class="p-faq__answer">
かかりません。Zennにて0円で出版します。
</div>
</details>
<details class="p-faq__details">
<summary class="p-faq__summary">
作成したLPをTwitterで共有しても大丈夫でしょうか？
</summary>
<div class="p-faq__answer">
もちろん、大丈夫です！<br />
ZennのURLや＠yurukei20をメンションしてもらえるとリツイートします！
</div>
</details>
<details class="p-faq__details">
<summary class="p-faq__summary">
作成したLPはポートフォリオにしていいですか？
</summary>
<div class="p-faq__answer">
はい！もちろんです。<br />
もし可能であれば、書籍の題名やZennのURLなどを一緒に記載していただけると幸いです。
</div>
</details>
<details class="p-faq__details">
<summary class="p-faq__summary">試し読みはできますか？</summary>
<div class="p-faq__answer">
全編無料なので試し読みもなにも全部無料で読めますよ！
</div>
</details>
</div>
</div>
</section>
<!-- /.p-faq -->
<!-- .p-cv -->
<section class="p-cv c-section">
<div class="c-inner">
<h2 class="c-section__title">まずは試し読みから！</h2>
<div class="p-cv__content">
<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
</div>
</div>
</section>
<!-- /.p-cv -->
</main>
<!-- /.l-main -->
<!-- .l-footer -->
<footer class="l-footer">
<div class="c-inner">
<div class="l-footer__content">
<ul class="l-footer__lists">
<li><a href="https://yurukei-career.com/">運営会社</a></li>
<li>
<a href="https://yurukei-career.com/toiawase-form/"
>お問い合わせ</a
>
</li>
</ul>
<small class="l-footer__copyright">©yurukei20</small>
</div>
</div>
</footer>
<!-- /.l-footer -->
</body>
</html>