× 無料のユーザー登録をすると学習状況を管理することができるようになります

実践!ウェブサイトを作ろう (全17回)

サービスを紹介するウェブページを作りながら、様々なレイアウト手法について学んでいきます。

このレッスンでは HTML5 / CSS / CSS3 を使用しています。

#01 ウェブサイトを制作していこう
2017年1月19日

今回のレッスンについては以下も参考にしてみてください。

・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3
・CSS入門 (全23回)
http://dotinstall.com/lessons/basic_css_v3
・CSS3入門 (全19回)
http://dotinstall.com/lessons/basic_css3_v2

#04 ヘッダーのマークアップをしていこう
2017年4月7日

normalize.cssのバージョンアップに伴い、body要素に余白がつくようになりました。レッスンと同じように進めたい場合はstyles.cssに以下を加えるようにしてください。

body {
  margin: 0;
}
#05 ヘッダーの背景を設定してみよう
2017年4月7日

normalize.cssのバージョンアップに伴い、body要素に余白がつくようになりました。レッスンと同じように進めたい場合はstyles.cssに以下を加えるようにしてください。

body {
  margin: 0;
}
Safariでfaviconが表示されません PREMIUM - #02 normalize.cssとfaviconを導入しよう
macOSの最新版でレッスンと同じように実践していますが、Chromeではfaviconが表示されて、Safariでは...
HTMLにないのにaやpのセレクタが出てくるのはなぜですか? PREMIUM - #03 styles.cssを作っていこう
初歩的なことですが、遡って調べてもわからなかったので教えてくださると助かります...。 HTMLにa要素やp要素...
p タグ には margin-top は設定されていないのに余白ができてしまっているのはなぜですか? PREMIUM - #05 ヘッダーの背景を設定してみよう
動画中の説明で、「これはいわゆる margin の相殺によるもので、こちらの p タグの margin-top が反映...
pタグにmargin-topを設定していないのに余白ができてしまうのはなぜですか? PREMIUM - #05 ヘッダーの背景を設定してみよう
styles.css 内で、 p タグに margin-top は設定していないのにどうして上部の余白が出来てしまう...
containerが中央揃えになっていないのではないでしょうか? PREMIUM - #05 ヘッダーの背景を設定してみよう
動画中で「中央揃えにしたいので margin: 0 auto; とすれば OK です。」とありますが、仕上がりを確認す...
820pxはどうやって決めたのでしょうか? PREMIUM - #05 ヘッダーの背景を設定してみよう
container要素を中央揃えにするためのスタイルで width: 820px; margin: 0 aut...
色はどうやって決めているのでしょうか? PREMIUM - #05 ヘッダーの背景を設定してみよう
色を決めるときはどのように決めているのでしょうか?
nth-child(odd)は奇数なのに偶数番目のセクションに背景がついてしまいます PREMIUM - #09 sectionのマークアップをしよう
section:nth-child(odd) { background: #f8f8f8; } 今回セ...
何故 float させていない img 画像も左右に振り分けられるのでしょうか PREMIUM - #12 要素を左右に振り分けてみよう
pull left、pull right クラスの中にある h3,p は css で float して左右に行くのはわ...