From c848c1a97bc7f31288d78a35e2d78ee68638732d Mon Sep 17 00:00:00 2001 From: basara669 Date: Fri, 16 Sep 2016 16:08:45 +0900 Subject: [PATCH 1/4] added comment to README --- README.md | 156 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 154 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9c548d7..0b79015 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) + + +##### 正 +``` +(省略) +.EntryPanel { + (省略) + &__sub { + flex: 1 1 45%; + margin-right: 20px; + .EntryPanel--vertical & { + margin-right: 0; + } + } +（省略） +} +（省略） + +``` From cf2b27681154f631df310eee58a289a8ad025462 Mon Sep 17 00:00:00 2001 From: basara669 Date: Fri, 16 Sep 2016 16:09:18 +0900 Subject: [PATCH 2/4] modified test.html --- downloadFile/site/test.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 - +

テキスト

From e7335fe766d87d70bb91bccec7e753180e75114e Mon Sep 17 00:00:00 2001 From: basara669 Date: Fri, 16 Sep 2016 16:10:14 +0900 Subject: [PATCH 3/4] modified chapter7's entryPanel.scss --- .../samples/chapter7/src/scss/components/_entryPanel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; } From da5a418d18da1f29fef387bd91e93badbf086e51 Mon Sep 17 00:00:00 2001 From: basara669 Date: Fri, 16 Sep 2016 16:26:40 +0900 Subject: [PATCH 4/4] modified japanese --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0b79015..e141e31 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@ 購入は[こちら](http://www.amazon.co.jp/dp/4797386533)から ### 誤植や紛らわしい表記について -誤植や紛らわしい表記があり、読みづらくなっており、申し訳ございません。 -誤植についてはこちらのページに更新していきます。 -また、コードの太字については、追加した場所だけでなく、ポイントとなっているところも太字になっている部分も太字になっております。 +誤植や紛らわしい表記のため、読みづらくなっており、申し訳ございません。 +誤植についてはこちらのページにて情報を更新していきます。 +コードの太字については、追加した場所だけでなく、ポイントとなっているところも太字になっている部分も太字になっております。 コード部分は太字だけでなく、他の部分も読みながら読み進めて頂けるようお願い申し上げます。 ### ダウンロード方法 @@ -172,7 +172,7 @@ sassでコンパイルすると20pxとなりどちらも同じ値になります ##### 正 -``` +```scss (省略) .EntryPanel { (省略)