こちらのページから、『現場のプロが本気で教える HTML/CSSデザイン講義』のサンプルデータがダウンロードすることが出来ます。
購入はこちらから
誤植や紛らわしい表記のため、読みづらくなっており、申し訳ございません。
誤植についてはこちらのページにて情報を更新していきます。
コードの太字については、追加した場所だけでなく、ポイントとなっているところも太字になっている部分も太字になっております。
コード部分は太字だけでなく、他の部分も読みながら読み進めて頂けるようお願い申し上げます。
- 右上の「Clone or download」をクリックし、ダイアログを表示させます。
- 表示されたダイアログ内の「DOWNLOAD ZIP」を押せばダウンロードが開始されます。
- リリースノート に更新内容を記載しておりますので、参考にしていただけますと幸いです。
- GitHubのアカウントをお持ちの方はwatchしていだけると、更新された際には通知が届くようになります。
本書のP82にリセットCSSとして「sanitize.css」の使い方を紹介しています。この3段落目に「ダウンロードしましょう」とありますが、執筆時点からバージョンが上がってしまったこともあり、最新版（v4.1.0 2016年10月現在）のものを適用するとその後の部分でキャプチャ通りにならなくなります。 本ダウンロードファイルのsanitizeというフォルダの中に、執筆時点のバージョン（v3.2.0）を入れました。 最新版は使用せず、このファイルをご使用ください。
当方の確認不足によって、「疑似要素」という文言が「擬似要素」となっている箇所が数か所ございます。正確には「疑似要素」ですので、「擬似要素」としてお読みください。
それまでgulpが正常に動いてる場合、gulp側のエラーではなくscssファイル側に記述ミスが発生している可能性があります。
ターミナルやコマンドプロンプト上にもエラーが起きていそうな行数が表示されているので、その周辺の修正をお願いいたします。
見づらいレイアウトとなっていますが、こちらはTipsというもので、本編とは違う発展的な内容になっています。
本編だけを読みたいという方はこのTipsは読み飛ばしていただいても問題ございません。
本書はあくまでCSS設計の本なので、細かいFontAwesomeの解説は省いております。しかし、もう少し詳しいことを知りたいという声があったので追記いたします。
FontAwesomeでアイコンを使うには、cssファイルとフォントデータが必要になります。P190では、最初にmain.scssにfont-awesomeの読み込みを記述し、cssファイルを読み込んでいます。
次にダウンロードしたファイルの「fonts」データをdistに移しているのですが、これがFontAwesomeのフォントデータを本書のサイトに移している作業になります。
こうしてFontAwesomeを使用できる環境である、cssファイルとフォントデータが揃いました。
FontAwesomeの公式サイトでは、フォントデータ用のpathを設定しようとあります。しかし、本書ではその手順が書かれていません。なぜそれでも動くかというと、FontAwesomeに最初から記述されている場所にフォントデータを置いているからです。
FontAwesomeのscssのフォルダにある、_variables.scssに$fa-font-path:"../fonts" !default;という記述があります。。これはFontAwesomeのcssファイルからフォントデータを読み込む場所を記述する場所が書くところです。
コンパイルされたscssはdist/css内に吐き出されます。このcssから1つ上の階層に上がり、fontsディレクトリを設定しているために、本書では記述を変更せずに動くことができています。
もしも、フォントデータを置く場所を変えたいということであれば、ここに記述するパスを変更すれば、使用することができます。
開設時に使用します。
解説時に使用します。
画像にnode_modulesというフォルダが含まれていますが、この時点では含まれず以下のようになります。
├── article.html
├── campaign.html
├── dist
├── gulpfile.js
├── index.html
├── package.json
├── src
└── test.html
必要なものが正しくイントール
必要なものが正しくインストール
これらインスールしたものを使って
これらインストールしたものを使って
ダウンロードに入っているHTMLの参照先とpタグが抜けているので追加をしてください。
なお、現時点のダウンロードのコードには、正の状態になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./dist/css/sample.min.css">
<title>Sample</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./dist/css/main.min.css">
<title>Sample</title>
</head>
<body>
<p>テキスト</p>
</body>
</html>ブラウザでindex.htmlを開いてください。
ブラウザでtest.htmlを開いてください。
詳細度をコントールしています。
詳細度をコントロールしています。
対して、!imporatantはCSS内に作っているので、
対して、!importantはCSS内に作っているので、
Class名は、「topicBox__topickDetail__text」のよう
Class名は、「topicBox__topicDetail__text」のよう
<img class="EntryPanel__thumb" src="./dist/images/top/entry1.jpg" alt=""><img class="EntryPanel__thumb" src="./dist/images/top/entry1.jpg" alt="" width="275" height="250"><img class="EntryPanel__thumb" src="./dist/images/top/entry2.jpg" alt=""><img class="EntryPanel__thumb" src="./dist/images/top/entry2.jpg" alt="" width="275" height="250">min-heightとしているが、heightが正しい。これに伴い次のコードブロックのコンパイル後の結果のCSSも、
min-heightではなく、heightとなる
.Header {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 98px; //このコードが誤り
&__head {
//ここにHeader__headのスタイルを記述する
}
}.Header {
display: flex;
align-items: center;
justify-content: flex-start;
height: 98px; //このコードが誤り
&__head {
//ここにHeader__headのスタイルを記述する
}
}main.scssの1行目
@import "./modules/common/header";
modulesではなく、componentsが正しいです。
@import "./components/common/header";
&__main {
display: flex;
flex: 1 1 50%;
flex-direction: column;
justify-content: space-between;
align-self: stretch;
}&__main {
display: flex;
justify-content: space-between;
align-self: stretch;
flex: 1 1 55%;
flex-direction: column;
padding: 20px 0;
}カンマが抜けているため、1,0,0pxが100pxになってしまっている
自動的に幅が合わさるように、flexを100pxに指定します。
自動的に幅が合わさるように、flexを1,0,0pxに指定します。
「デザインカンプ通りのレイアウトになりました。」とありますが、この時点では、アスペクト比を修正しただけですので、「デザインカンプ通りのサイズになりました」が正しいです。 その後のP143でデザインカンプ通りになります。
不要なclassがついている
<div class="Section__body l-row"> // Section__bodyが不要
<div class="EntryPanel l-halfColumn">
(省略)
</div>
</div><div class="l-row">
<div class="EntryPanel l-halfColumn">
(省略)
</div>
</div>カンマが抜けているため、1,0,0pxが100pxになってしまっている
自動的に幅が合わさるように、flexを100pxに指定します。
自動的に幅が合わさるように、flexを1,0,0pxに指定します。
記述が間違っていました。
.sectionLabel {
(省略)
flex: 1 1 auto;
padding: 14px inherit;
padding-bottom: 14px;
(省略)
}.sectionLabel {
(省略)
flex: 1 1 auto;
padding: $space-unit;
padding-bottom: $space-unit*2;
(省略)
}.OverlayPanel {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%; //widthが必要です。
padding: 10% 20%;
background-color: rgba(0,0,0,.2);
color: $color-white;
&:hover {
color: $color-white;
background-color: rgba(0,0,0,.4);
}
}
letter-spacing: .1emとなっていますが、こちらは誤りではございません。0を省略する書き方で、この書き方で0.1emとなります。
ここで出ているhtmlのtime要素にある、datetimeがdatatimeになっている
<time class="NewsList__head" datatime="2016-10-12">2016.10.12</time><time class="NewsList__head" datetime="2016-10-12">2016.10.12</time>まだこの時点では書かなくて良いコードが含まれてしまっている
.Footer {
(省略)
&__head { //不要
flex: 2 1 50%;//不要
} //不要
&__head, //不要
&__body { //不要
padding-right: $space-unit; //不要
} //不要
&__body, //不要
&__foot { //不要
align-self: flex-start; //不要
flex: 1 1 25% //不要
} //不要
a {
(省略)
}
}
.Footer {
(省略)
color: &color-link;
a {
color: $color-link;
&::hover {
color: $color-white
}
}
}
コードとしては問題ありませんが、整理として_footer.scssの記述場所がズレている。
（省略）
//フッター
@import "./components/common/footer";
//Common
//----------------------------
//ヘッダー
@import "./components/common/header";
(省略)（省略）
//Common
//----------------------------
//ヘッダー
@import "./components/common/header";
//フッター
@import "./components/common/footer";
(省略)$color-grayとするべきところが、$color-linkとなっている
.IconPanel {
(省略)
&__icon {
margin-bottom: $space-unit;
padding: $sp-space-unit;
font-size: 26px;
color: $color-link; //$color-grayが正しい
}
(省略)
}.IconPanel {
(省略)
&__icon {
margin-bottom: $space-unit;
padding: $sp-space-unit;
font-size: 26px;
color: $color-gray;
}
(省略)
}（省略）
<a class="IconPanel l-quaterColumn">
<span class="IconPanel__icon fa fa-tree"></span> <!-- 追加 -->
<h3 class="IconPanel__head">こだわりの空間</h3>
<p class="IconPanel__body">
ランチからディナーまでいつでもリラックスして使えるくつろぎ空間。椅子や壁、細部にまでこだわっています。
</p>
</a>
（省略）表現がわかりづらいというコメントをいただきましたので、正確には以下のような内容です。
今作った「SNS」というclassと「SNS__text」というclassを、HTMLに付与します。
今作った「SNS」というclassと、後述する「SNS__text」というclassも併せて、HTMLに付与します。
sassでコンパイルすると10pxとなりどちらも同じ値になりますが、P117ページとの整合上、以下は10pxと直接が適切です。
(省略)
.EntryPanel {
(省略)
&__body {
margin-top: 10px; //10pxが正しいです。
font-size: 14px;
@include mq-sp {
font-size: 12px;
}
}
}
(省略) 本文にあるコードブロックでは、0.3という表記になっていますが、サンプルコードでは、省略表記である.3となっています。
これは0を省略している書き方で、0.3も.3もどちらも同じ値を示しています。
サンプルコードでは、transition: opacity 0s .3s easeや、box-shadow: 0 1px 10px rgba(black, .3)となっていますが、
それぞれtransition: opacity 0s 0.3s easeとbox-shadow: 0 1px 10px rgba(black, 0.3)のことです。
.isOpend & {
opacity: 1;
transition: opacity 0s 0s ease;
}.isOpend & {
opacity: 1;
z-index: 1;
transition: opacity 0s 0s ease;
}Section__headというclassのついているdivが不要です。
（省略）
<section class="Section l-column">
<div class="Section__head"> //不要
<h2 class="sectionLabel">Title1</h2>
</div> //不要
</section>
（省略）（省略）
<section class="Section l-column">
<h2 class="sectionLabel">Title1</h2>
</section>
（省略）sassでコンパイルすると20pxとなりどちらも同じ値になりますが、P117ページとの整合上、以下は20pxと直接が適切です。
(省略)
.EntryPanel {
(省略)
&__sub {
flex: 1 1 45%;
margin-right: 20px;
.EntryPanel--vertical & {
margin-right: 0;
}
}
(省略)
}
(省略)不要なdivタグがある。
<section class="Section l-column">
<div class="Section__head"> //不要
<h2 class="sectionLabel">CAMPAIGN</h2>
</div> //不要
<div class="l-row">
<section class="EntryPanel EntryPanel--portrait l-tripartitionColumn"> // EntryPanel--vertical
<div class="EntryPanel__sub">
<img class="EntryPanel__thumb" src="./dist/images/campaign/cp_entry1.jpg" alt="フルーツとグラノーラ">
</div>
<div class="EntryPanel__main">
<h3 class="EntryPanel__head">1日のはじまりに</h3>
<div class="EntryPanel__body">
大切なあの方にありがとうを届けたい。<br>心も体も温まる素敵なギフト。<br>プレゼントキャンペーン実施中
</div>
<div class="EntryPanel__foot"><a href="#" class="button">READ MORE</a></div>
</div>
</section><section class="Section l-column">
<h2 class="sectionLabel">CAMPAIGN</h2>
<div class="l-row">
<section class="EntryPanel EntryPanel--vertical l-tripartitionColumn">
<div class="EntryPanel__sub">
<img class="EntryPanel__thumb" src="./dist/images/campaign/cp_entry1.jpg" alt="フルーツとグラノーラ">
</div>
<div class="EntryPanel__main">
<h3 class="EntryPanel__head">1日のはじまりに</h3>
<div class="EntryPanel__body">
大切なあの方にありがとうを届けたい。<br>心も体も温まる素敵なギフト。<br>プレゼントキャンペーン実施中
</div>
<div class="EntryPanel__foot"><a href="#" class="button">READ MORE</a></div>
</div>
</section>display:blockとするところが、flexとなっている
これまで通り、「display」を「flex」にし、
.Campaign {
&__sweets {
display:flex;
}
}
「display」に「block」を設定し、
.Campaign {
&__sweets {
display: block;
}
}
&__mainとしなくてはいけないのに、&__itemsとなっている。
.Campaign {
(省略)
&__items {
(省略)
}
(省略)
}
.Campaign {
(省略)
&__main {
(省略)
}
(省略)
}