Movie
このサイトの作り方は、「いのり＆にゅーいのWEBデザイン教室」という配信で解説しています！
Profile
Stady
必要な知識はこれだ！
- HTML
- CSS
- Javascript（JQuery）
- Photoshop
この順番で勉強しよう！
- WEBサイトの仕組みを知ろう！
- WEBサイト作りを一通り体験しよう！
- 必要だと思った言語を勉強しよう！
- 自分でWEBサイトを作ってみよう！
必要なツールを準備しよう！
- GoogleChrome
- https://www.google.com/intl/ja_jp/chrome/
- Bracket
- http://brackets.io/
- Photoshop
- https://www.adobe.com/jp/products/photoshop/
- PNGoo
- https://pngquant.org/
CSSセレクタ、疑似クラスを覚えよう！
| セレクタ、疑似クラス | 用法 |
|---|---|
| セレクタ |
p、span、aなどのタグを、そのままセレクタとして指定する。 例）a { color: blue; } |
| * |
すべての要素に、まとめてスタイルを適用する。 例）* { color: blue; } |
| . |
「.」+「class名」で、指定したクラスのみにスタイルを適用する。 例）.stady01 { background-color: #ccc; } |
| # |
「#」+「id名」で、指定したidのみにスタイルを適用する。 例）#stady { background-color: #fff; } |
| 親要素 子要素 |
「親要素のセレクタ」+「半角スペース」+「子要素のセレクタ」で、指定した子要素全てにスタイルを適用する。 例）nav p { color: #fff; } |
| セレクタ, セレクタ |
「セレクタ」+「,」+「セレクタ」で、複数のセレクタに同じスタイルを適用する。 例）profile01, profile02 { width: 50%; } |
| 親要素 > 子要素 |
「親要素のセレクタ」+「>」+「子要素のセレクタ」で、一階層下の子要素にのみスタイルを適用する。 例）nav > p { color: #fff; } |
| セレクタ + セレクタ |
「セレクタ」+「+」+「セレクタ」で、隣接したセレクタにのみスタイルを適用する。 例）h3 + img { width: 200px; } |
| セレクタ:hover |
「セレクタ」+「:hover」で、指定セレクタのホバー時にのみスタイルを適用する。 例）a:hover { color: red; } |
| セレクタ:nth-child(n) |
「セレクタ」+「:nth-child(n)」で、n番目の該当セレクタにのみスタイルを適用する。 例）li:nth-child(1) { color: red; } |
| セレクタ:nth-child(odd) |
「セレクタ」+「:nth-child(odd)」で、奇数行の該当セレクタにのみスタイルを適用する。 例）tr:nth-child(odd) { background-color: #eee } |
| セレクタ:nth-child(even) |
「セレクタ」+「:nth-child(even)」で、偶数行の該当セレクタにのみスタイルを適用する。 例）tr:nth-child(even) { background-color: #eee } |
スマホ版・PC版のデザインを作ろう！
まずは、ビューポートを設定しよう！
<meta name="viewport" content="width=560">メディアクエリで、指定したブラウザ幅の時のみにスタイルを適用しよう！
ベースとなるデザイン＝スマホのデザインとして記述します。
PCのみにスタイルを適用したいとき（横幅561px以上）
@media screen and (min-width: 561px) {
p { color : red; }
}