『Webデザインとコーディングのきほんのきほん』サポートページ
●サンプルデータのダウンロード
本書Part3で使用しているサンプルデータは、以下よりダウンロードできます。
・Part3 Chapter2 (デザインカンプのファイル)
・Part3 Chapter3 (コーディングファイル)
■サンプルデータ利用上のご注意
・データを見やすくするため、レイヤーの名前などをわかりやすく付け直しています。紙面と異なる名前になっていることもございますので、ご了承くださいませ。
●補足・訂正情報
■P.173 手順3の「+」マークの調整について
「+」の背面にある円形については、紙面にあるとおり、レイヤースタイルの画面で「カラーオーバーレイ」でアクセントカラーをつけ、「境界線」でフチをつけてください。
「+」自体については、「カラーオーバーレイ」で、「白」を設定してください。「境界線」の設定は不要です。
■P195 図03について
「スマートフォン」アートボードの右上のハンバーバーメニューも書き出し対象なので、マーキングが必要でした。
■P.197 パーツの書き出しについて
P.197の手順3では、「PC」アートボードのレイヤーをすべて選択して「書き出し形式」を選ぶように説明をしておりますが、「スマートフォン」アートボードでは異なる操作が必要でした。
「スマートフォン」アートボードでは、レイヤーを開いて、書き出したい対象のレイヤー(ヘッダーのロゴ画像、ハンバーガーメニュー、3コンテンツのアイコン画像、ロゴ画像)を選択してから、「書き出し形式」を選んでください。
■P200 図15について
ハンバーガーメニューの画像が含まれておりませんでした。この段階でハンバーガーメニューについても画像として書き出しておきます。
■P.212 図06について
画像にalt属性の設定をしている図になっていますが、誤りでした。alt属性はここではまだ設定せず、widthとheightだけを設定して進めてください。alt属性はP.216で指定します。
■P.223 図11について
図11の右側下において、「株式会社エム・ソリューション」の文字がその下の住所よりも大きくなっていますが、誤りでした。住所と同じぐらいの大きさで表示されるのが正しいです。
■P.254 図01について
「Facebook」がsection要素としてマークアップされていますが、誤りでした。P.214の図14の通り、div要素としてマークアップするのが正しいです。
■P276 図06について
タブレット、スマートフォンのデザインカンプにて、「Facebook」の表示スペースが横長になっていますが、誤りでした。実際にはP.193の図26のように、正方形に近い形としてマークアップします。
■P288 図21について
main .informationarea .inner .mainfacebook に、「width: 100%」は不要でした。