CSSきほん

web・アプリさくせい >
CSSきほん

目次

cssのきほん

htmlファイルの<head>と</head>の間に<link rel="stylesheet" href="cssファイル名" type="text/css"></style>と書きます。
cssはhtmlの要素に色や大きさ、レイアウトを指定できます
htmlには、それぞれ適用する要素に、cssには色や大きさなど適用する内容をそれぞれ記述します。
HTMLファイルとは別に作成し、ファイル名は「～.css」として保存します。

CSSの書き方

セレクタ{プロパティ:値 ;}

セレクタ　cssの指示を適用させる範囲や要素（Hやid、class）

プロパティ　（float,marginなど配置する、余白をあける等）やること。

値色や大きさなどプロパティの設定する値。数値や%など

プロパティと値（色や大きさとか）の間は「:（コロン）」で区切る。
太字の場合 font-weight: bold;
色と大きさとか２つ以上指定するときには「;（セミコロン）」で区切る。
太字で文字サイズ大の場合 font-weight: bold; font-size: x-large;

H1を中央配置、フォントサイズ34PX,太字に設定した場合
H1 { text-align: center; font-size: 34px; font-weight: bold; }

コメント /* */ で囲んだ範囲はコメントとなり、テキストエディタ内だけでの表示になります。

外部リンク参考サイトさん新しく詳しいサイトさん

CSS、IDとクラス

CSSファイルに、id属性は「#」(シャープ)。　class属性は「.」(ドット)と記載。「id属性」はWebページ上に同じ「id名」を一つしか使えない

名前に使用できる文字列　アルファベット、数字、「-」(ハイフン)、「_」(アンダースコア)です。ただし、先頭に数字または「-」は使えません。
クラス

「.」(ドット)の後にクラス名を記述　クラス名をつけたセレクタを「クラスセレクタ」と呼びます。

CSS側　.クラス名{プロパティ:値 ;}
HTML側　<要素 class="クラス名">

複数のクラス

HTMLの要素にclassを複数指定するには半角スペースで区切り、"　"で囲みます。

<要素 class=”aaa bbb“>

同じHTML要素にidとclass両方つけることも可能です <div id="aaa" class="bbb">

外部リンク参考サイトさん　いろいろな適用

css　divとspan　

DIV

DIVとは箱のようなもの。divタグにidやclassをつけてdivタグ内に色などスタイルを適用する。
<div class="aaa"> </div>

divの幅、高さなどの設定

divの配置 floatプロパティやdisplayプロパティ、positionプロパティ等で左右など位置を設定できます

floatプロパティ float : left (左へ回り込む)　　float : right （右へ回り込む）

CSSレイアウト (flexbox、 display、positionなど) のページへ

SPAN

　idやclassをつけて、文中の特定のテキストだけ色や書体を変えたい時などに使います。
<span class="aaa">テキスト</span>

span要素はインライン要素であり前後が改行されることはなく、ブロックにはなりません。

楽しくpc