diff --git a/README.md b/README.md index 9c548d7..e141e31 100644 --- a/README.md +++ b/README.md @@ -3,10 +3,15 @@ ![http://basara669.com/wp-content/uploads/2016/08/html_css_pro_3.jpg](http://basara669.com/wp-content/uploads/2016/08/html_css_pro_3.jpg) こちらのページから、『現場のプロが本気で教える HTML/CSSデザイン講義』のサンプルデータがダウンロードすることが出来ます。 -今後こちらに正誤表なども掲載をしていく予定です。 購入は[こちら](http://www.amazon.co.jp/dp/4797386533)から +### 誤植や紛らわしい表記について +誤植や紛らわしい表記のため、読みづらくなっており、申し訳ございません。 +誤植についてはこちらのページにて情報を更新していきます。 +コードの太字については、追加した場所だけでなく、ポイントとなっているところも太字になっている部分も太字になっております。 +コード部分は太字だけでなく、他の部分も読みながら読み進めて頂けるようお願い申し上げます。 + ### ダウンロード方法 - 右上の「Clone or download」をクリックし、ダイアログを表示させます。 - 表示されたダイアログ内の「DOWNLOAD ZIP」を押せばダウンロードが開始されます。 @@ -15,14 +20,113 @@ - [リリースノート](https://github.com/basara669/html_css_book/releases) に更新内容を記載しておりますので、参考にしていただけますと幸いです。 - GitHubのアカウントをお持ちの方はwatchしていだけると、更新された際には通知が届くようになります。 +### FAQ +#### scssファイルの更新がcssに反映されない場合 +それまでgulpが正常に動いてる場合、gulp側のエラーではなくscssファイル側に記述ミスが発生している可能性があります。 +ターミナルやコマンドプロンプト上にもエラーが起きてそうな行数が表示されているので、その周辺の修正をお願いいたします。 + +#### P118で突然コードが変わる +見づらいレイアウトとなっていますが、こちらはTipsというもので、本編とは違う発展的な内容になっています。 +本編だけを読みたいという方はこのTipsは読み飛ばしていただいても問題ございません。 + ### 正誤表 +#### P18 上部画像 +##### 誤 +![http://basara669.com/wp-content/uploads/2016/09/694d904d39b7b041f11d147c36f55994.png](http://basara669.com/wp-content/uploads/2016/09/694d904d39b7b041f11d147c36f55994.png) + +##### 正 +画像にnode_modulesというフォルダが含まれていますが、この時点では含まれず以下のようになります。 + +``` +├── article.html +├── campaign.html +├── dist +├── gulpfile.js +├── index.html +├── package.json +├── src +└── test.html + +``` + + +#### P23 test.html +ダウンロードに入っているHTMLの参照先とpタグが抜けているので追加をしてください。 +なお、現時点のダウンロードのコードには、正の状態になっています。 + +##### 誤 + +```html + + + + + + Sample + + + + + +``` + +##### 正 +```html + + + + + + Sample + + +

テキスト

+ + + +``` + + +#### P30 2行目 +##### 誤 +ブラウザでindex.htmlを開いてください。 + +##### 正 +ブラウザでtest.htmlを開いてください。 + + +#### P156 下部scss +##### 誤 +![http://basara669.com/wp-content/uploads/2016/09/9a82cb177e68a01b3d82b6779fb860ab.png](http://basara669.com/wp-content/uploads/2016/09/9a82cb177e68a01b3d82b6779fb860ab.png) + + +##### 正 + +```scss +.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); + } +} + + +``` + #### P192 上部HTML ##### 誤 ![http://basara669.com/wp-content/uploads/2016/09/e7e6e6a525fc9d645982f867cc88b99c.png](http://basara669.com/wp-content/uploads/2016/09/e7e6e6a525fc9d645982f867cc88b99c.png) - ##### 正 ```html @@ -36,3 +140,51 @@ （省略） ``` + + +#### P221 中部scss +sassでコンパイルすると10pxとなりどちらも同じ値になりますが、P117ページとの整合上、以下は10pxと直接が適切です。 + +##### 誤 +![http://basara669.com/wp-content/uploads/2016/09/61e42931750b0d71deb1ccfca3280206.png](http://basara669.com/wp-content/uploads/2016/09/61e42931750b0d71deb1ccfca3280206.png) + +##### 正 +```scss +(省略) +.EntryPanel { + (省略) + &__body { + margin-top: 10px; //10pxが正しいです。 + font-size: 14px; + @include mq-sp { + font-size: 12px; + } + } +} +(省略) +``` + +#### P250 上部scss +sassでコンパイルすると20pxとなりどちらも同じ値になりますが、P117ページとの整合上、以下は20pxと直接が適切です。 + +##### 誤 +![http://basara669.com/wp-content/uploads/2016/09/61e42931750b0d71deb1ccfca3280206.png](http://basara669.com/wp-content/uploads/2016/09/61e42931750b0d71deb1ccfca3280206.png) + + +##### 正 +```scss +(省略) +.EntryPanel { + (省略) + &__sub { + flex: 1 1 45%; + margin-right: 20px; + .EntryPanel--vertical & { + margin-right: 0; + } + } +（省略） +} +（省略） + +``` diff --git a/downloadFile/samples/chapter7/src/scss/components/_entryPanel.scss b/downloadFile/samples/chapter7/src/scss/components/_entryPanel.scss index 2d34687..b14d337 100644 --- a/downloadFile/samples/chapter7/src/scss/components/_entryPanel.scss +++ b/downloadFile/samples/chapter7/src/scss/components/_entryPanel.scss @@ -13,7 +13,7 @@ } &__sub { flex: 1 1 45%; - margin-right: $space-unit; + margin-right: 20px; .EntryPanel--vertical & { margin-right: 0; } diff --git a/downloadFile/site/test.html b/downloadFile/site/test.html index 0115443..157196f 100644 --- a/downloadFile/site/test.html +++ b/downloadFile/site/test.html @@ -2,10 +2,10 @@ - + Sample - +

テキスト