デイトラの卒業課題を1日（1〜2時間）行なっています。
ダウンロードフォーム
html(FLOCSS)
この課題に対してFLO CSSを意識して作成してますが、今一ピンとこない…
FLOの意味
- F=Foundation（ファンデーション）
- L=Layout（レイアウト）
- O=Object（オブジェクト）
Fはリセットcssなので問題なし。Lもheader.main.footerと個人的にはキャンバスのイメージ。
問題はO。ここの分け方が悩む、Objectをさらに分解するとこう言う意味
- C=Component（コンポーネント）
- P=Project（プロジェクト）
- U＝Utility（ユーティリティ）
Cは再利用できて小さい、Pは固有。この区切りが難しい！
Uは余白用なのですが、自分には使いこなせないので保留。
このFLO CSSはBEM（ベム）をベースに作成されているとの事。
BEMの意味
- B＝Block（ブロック）
- E＝Element（エレメント）
- M＝Modifier（モディファイア）
CSS設計完全ガイドから意味を引用すると以下になります。
Blockはクラス名から見た目、機能、役割が想像でき『特定のコンテキストに依存していない、どこでも使いまわせるパーツ』
Elementはクラス名から影響範囲が想像でき『Blockを構成し、Blockの外では独立して使用できないもの』
Modifierは拡張しやすく『BlockもしくはElementの見た目や状態、振る舞いをするもの』ただ、必ずしも必要なものではありません
と言う定義を踏まえてhtmlを作成
<section class="p-download">
<div class="p-download__inner l-inner">
<!-- 左側：情報コンテンツ領域 -->
<div class="p-download__info">
<h2 class="p-download__title">
世界で活躍できるグローバルな人材を育てる３つの研修プログラムをご用意しております。
</h2>
<div class="p-download__image-wrap">
<img src="/public/assets/img/pamphlet.png" alt="ビジネス英会話研修 Document" class="p-download__image">
</div>
<div class="p-download__text-block">
<p class="p-download__text">
急速にグローバルに活躍できる企業が生き残る時代と移り変わりました。
<br>
ビジネス英語や経営学を効率よく学びながら、世界各国から集まるビジネスパーソンと交流し、世界レベルでの人脈を構築する研修をご用意しております。
<br>
<br>
英語に苦手意識のある方でもご安心ください。
<br>
ビジネスで必要なコミュニケーションが取れるようになるまで実績豊富な講師陣がサポートいたします。
<br>
まずはこちらの資料をごらんください。
</p>
</div>
</div>
<!-- 右側：フォーム領域 -->
<div class="p-download__form-wrapper">
<h3 class="p-download__form-title">資料ダウンロード</h3>
<form action="#" method="post" class="p-download__form c-form">
<div class="c-form__item">
<label for="company" class="c-form__label">会社名</label>
<input type="text" id="company" name="company" class="c-form__input" placeholder="例）〇〇株式会社">
</div>
<div class="c-form__item">
<label for="department" class="c-form__label">部署</label>
<input type="text" id="department" name="department" class="c-form__input" placeholder="例）人事部">
</div>
<div class="c-form__item">
<label for="name" class="c-form__label">
お名前 <span class="c-badge c-badge--required">必須</span>
</label>
<input type="text" id="name" name="name" class="c-form__input" required placeholder="例）鈴木 一郎">
</div>
<div class="c-form__item">
<label for="kana" class="c-form__label">
お名前（フリガナ） <span class="c-badge c-badge--required">必須</span>
</label>
<input type="text" id="kana" name="kana" class="c-form__input" required placeholder="例）スズキ イチロウ">
</div>
<div class="c-form__item">
<label for="email" class="c-form__label">
メールアドレス <span class="c-badge c-badge--required">必須</span>
</label>
<input type="email" id="email" name="email" class="c-form__input" required placeholder="例）info@example.com">
</div>
<div class="c-form__privacy">
<label class="c-form__checkbox-label">
<input type="checkbox" name="privacy" class="c-form__checkbox" required>
<span class="c-form__checkbox-text">
<a href="#" target="_blank" class="c-form__link">個人情報保護方針</a>に同意します。
</span>
</label>
</div>
<div class="c-form__submit-wrap">
<button type="submit" class="c-button-type2 c-button-type2--download">資料をダウンロードする</button>
</div>
</form>
</div>
</div>
</section>これでいいのか？
違うページでc-button-type2を作成していて、今回はパディングが変わるぐらいだったので–downloadにしてみました。それともc-button-type3を新たに作成する方法がいいのか悩む…
それにc-form__itemにしたけれどもp-download-form__itemにした方がいいのか？
結果
CSSでのデザインの再現性は出来たと思うので、次に作成するお問い合わせページも構成が同じなので照らし合わせながら作成してみます。
以上、デイトラweb制作の状況でした。
小さな疑問でも下記のURLにお問い合わせ下さい。
ポートフォリオサイトはこちらになります。
