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

CSS入門 (全23回)

ホームページの見た目を制御することができるCSSについて基本的な使い方を学んでいきます。

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

#01 CSSとはなにか?
2015年3月18日
CSSを理解するにはHTMLの理解が必須となります。以下のレッスンを参考にしてみてください。

・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3
#07 擬似要素を使ってみよう
2016年10月6日
レッスンでは「ある要素の直前や直後」と説明されていますが、正確には、

・:before ・・・ ある要素の子要素の先頭に要素を追加
・:after ・・・ ある要素の子要素の末尾に要素を追加

となります。

https://developer.mozilla.org/ja/docs/Web/CSS/::before
https://developer.mozilla.org/ja/docs/Web/CSS/::after
#08 セレクタの詳細度を理解しよう
2017年4月7日

動画中の</div>タグですが、収録時のミスで入り込んだもので本来は不要なものなのでした...。無視してレッスンを進めてください。

id と class の使い分けについて教えてください PREMIUM - #03 セレクタとプロパティを理解しよう
id と class の使い分けとはどのようなケースで行うのでしょうか?
ブラウザで見たときに日本語が文字化けします PREMIUM - #03 セレクタとプロパティを理解しよう
ブラウザで見たときに日本語が文字化けします。解決方法を教えてください。
「h1, p」と「p.points」は、同じ意味でしょうか? PREMIUM - #04 もっとセレクタを使ってみよう
&lt;h1&gt;見出し&lt;/h1&gt; &lt;p class="point"&gt;テキスト&lt;/p...
コメントアウトをする時のショートカットキーを教えてください PREMIUM - #05 属性セレクタを使ってみよう
コメントアウトをする時にワンタッチで行われているようですが、ショートカットキーを使っているのでしょうか?
CSSのバージョンはどこかで宣言して使い分けできるのでしょうか? PREMIUM - #06 擬似クラスを使ってみよう
『ちなみに CSS 2.1 だと順番に関する擬似クラスはこの first-child しかないのですが、CSS3 だと...
:first-lineの表示のされ方 PREMIUM - #07 擬似要素を使ってみよう
:first-line は文章中の1行目だけスタイルを当てたい場合に使いますが、ディスプレイの解像度やブラウザのウイン...
body, html {}は、html, body {}と書いても問題ないのでしょうか? PREMIUM - #10 ボックスモデルを理解しよう
レッスンでは、 body, html { height: 100%; } このように書かれていますが...
フォントの種類はどれか一つを指定するのではないですか? PREMIUM - #14 文字に関するプロパティを使ってみよう
フォントの種類に関しては font-family というプロパティにしてあげて、あとは優先度の高いものからカン...
list-styleで画像を使いたいのですがうまく反映されません PREMIUM - #15 list-styleでリストのスタイルを変えよう
レッスンで list-style に smile.png という画像を使用しているので、自分もデスクトップにある画像を...
list-style と list-style-image の違いについて PREMIUM - #15 list-styleでリストのスタイルを変えよう
例えば list-style: url('img.png'); と記述するところを、 list-style-imag...
文字以外の場所でもカーソルが変化してしまいます PREMIUM - #16 cursorでカーソルの形状を変えよう
カーソルが変化するのはわかったのですが、同じ行であれば文字の上でなくてもカーソルが変化してしまいます。どうしたらいいで...