サイタWeb・デザインスクールHTML/CSS入門講座 北海道 楽しみながらHTMLとCSSを学ぼう レッスンノート #2 CSSのお悩みと書き方

#2 CSSのお悩みと書き方

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

●cssのコメントの使い方

コメントをうまく活用して一時的に読み込ませないようにして
どこに影響がでるか確認してみる

CSSのコメントの書き方
/* ここに書いたものはコメントとなり、読み込まれない */

コメントは仕切りの意味合いにも使えるし、自分のメモとしても使える
ただし、コメントに書いた内容はCSSファイルに表示されるので
外部に公開する場合は取り扱いに注意する

●一般的なCSSファイルの記述の順番

1.ブラウザごとの自動設定を一定にするために
*(全称セレクタ:全ての要素に適用する)やreset.cssを活用する

2. h1h2,,p,ul,ol,li,tableなどに統一の設定をする

 ※margin,padding,borderなど

3.ページごとの設定
 ブロックごとの全体のレイアウト(位置やサイズ)

4. 各ブロックごとのレイアウトや装飾

5. 文字や画像

クラスとIDについて

IDはなるべくCSSでは使わない
クラスについても1つのタグに対して1つのクラスだけを使用しない。
役割(サイズや装飾、レイアウト)ごとに複数のクラスを使い、再利用することを考える

例)クラスの使い方1例

サイズや背景を1つのクラス
横並びにする方法(フロートやフレックス)で1つのクラス

●ブラウザの開発ツールを使って、そのタグに適用されているCSSを確認できる
edgeの場合は設定から「開発者ツール」でタグを選択すると、右下にそのタグに適用されているCSSがわかる

●【重要】とにかくブロックを仕切る divをうまく使う
 横並びにしたい場合、画像とテキストを並べたい場合など、divで外側に箱を作って、その中の間取りを細かく仕切る(divタグを使う)ことで管理しやすくなる。使い方を工夫する

【演習】flexを使って要素を横並びにする

htmlファイル内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>レッスン1回目</title>
</head>
<body>
<div class="oya"><!--外側の箱=親 -->
<!--内側に3つの箱=子が3個 -->
<div class="left child">左</div>
<div class="center child">中</div>
<div class="right child">右</div>
</div>
</body>
</html>

cssの記述内容



/*ここからの3つのクラスはそれぞれ「色」と「サイズ」を指定する*/
.left{
width: 30%;
background-color: blue;
}
.center{
width: 50%;
background-color: deeppink;
}
.right{
width: 20%;
background-color: greenyellow;
}

/*ここからは箱を横並びにする記述*/
.oya{
display: flex;
}
.child{
flex-direction: column;
}
 
このレッスンノートを書いたコーチ

職業訓練校での指導も好評!興味を引き出しながら分かりやすくレクチャー

新着レッスンノート

●ビューポートとメディアクエリーとは? ビューポート:htmlファイルに書く 表示領域について設定を書く=画面の見え方 メディアクエリー: CSSファイルに書く 横幅の切り替えポイントを設定して表示の切り替えをする ビューポートの設定をしたが、画面いっぱいに表示されて余白がない ...

●レスポンシブレイアウトに必要なこと 1.リキッドレイアウト 幅や高さのサイズをピクセルではなくて、%で指定すること 2.メディアクエリー(Media Queries) 画面幅のパターンごとにレイアウトを決める (1)1200px以上 (2)992px〜1200px未満 ...

●cssのコメントの使い方 コメントをうまく活用して一時的に読み込ませないようにして どこに影響がでるか確認してみる CSSのコメントの書き方 /* ここに書いたものはコメントとなり、読み込まれない */ コメントは仕切りの意味合いにも使えるし、自分のメモとしても使える...

今回は初回ということで、ホームページ作成する際の htmlファイルとcssファイルの役割や違いについて簡単に説明しました。 cssを適用させる方法がいくつかあることについても触れました。 方法は埋め込み、インライン、外部シート 一般的なのは外部シートにリンクさせる方法です。 ...

1.ワードプレスについて ワードプレスのページが世界的に増えており、現在もっとも利用されているweb作成ツールであるから、 今後は自分でも作成ができればさらにいい ワードプレスはhtmlファイルの型となるテンプレートを用意して それをもとにhtmlに出力→ブラウザがhtmlを読...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta