css とは、web ページを構築する上で、主に見た目にかかわる部分を記述するものである。 記述方法は、html の<head>に直接書く方法、<body>のタグに一つ一つ書く方法と、別の ファイルとして書いておく方法がある。
１つ目の方法は、<style>タグを<head>に記述して起き、その中に css で記述する。 ２つ目の方法は、例えば<p style=”color:red;”></p>のように、タグに記述する。
3 つ目の方法は、<link rel="stylesheet" href="default.css">のようにリンクを<head>に記述 して起き、リンク先のファイルに記述しておくという方法である。 構造は、セレクタ{プロパティ名:値;}であり、指定するセレクタは以下の表のようなことも できる。 *{} すべてのセレクタ #id{} id で指定したタグのみ .class{} class で指定したタグのみ a,b{} a と b 両方に a b{} a の構造下の b だけ a>b{} a の構造直下の b だけ a+b{} a と b が続いたとき b だけ a.class{} a に class がついたものだけに適用 タグについている属性を参照する場合は以下のように記述する。 タグ名[属性]{ }その属性があるものを対象 タグ名[属性="値"]{ }属性が、その値だった時 タグ名[属性~="値"]{ }属性のうち、一つでも合致すれば適用 また、以下のようにセレクタを指定することが可能である。 疑似クラス ul li:first-child{ }最初の要素だけ適用 a:link{ }未訪問のリンク先 a:visited{ }訪問済み a:hover{}マウスが上に乗ったとき a:active{}クリックしたとき css には優先度があり、上の順番で書かないといけない。
要素にフォーカスが当たったときは、例えば以下のように記述する。 input:focus{} 疑似要素 p:first-lin{ }一行目だけ p:first-letter{}最初の文字だけ 要素の前や後に付け加えるには、以下のように記述する。 p:before{content:"記号や文字";} p:after{content:"記号や文字";} セレクタの詳細度（優先度のようなもの）は、以下の順で優先される。 (a)style="" (b)id (c)属性/疑似クラス (d)要素/疑似要素 ただし、 a{color:skyblue !important;} のように最優先させることも可能である。 プロパティの値の設定 p{font_size:16px}のように指定できる。 単位には、以下のものが使える。 px ピクセル em 親要素の何倍 %親要素の何倍 色は以下のように指定できる h1{color:blue;} h1{color:#00f;}16 進数で記述 h1{color:#0000ff;} 16 進数で記述 h1{color:rgb(0,0,255);}RGB 値で記述 h1{color:rgb(0%,0%,100%);}RGB 値を％で指定 div{width:200px;}のように大きさを決めることができるが、height を％で表す場合、 body,html{height:100%}のように記述して起き、親要素の値を指定しておかなければならな い。
以下の画像を参考に、要野の周りの長さを変えることができる border の編集 div{ border-color:orange;色 border-width:4px;幅 border-style:dotted;以下の※で説明 （ここまでをまとめて、border:orange 4px dotted;とも書ける） } border-top や border-bottom のように、一部だけを指定できる。 ※style の種類 solid 実線 dotted 点線 dashed 波線 double 二重線 inset/ outset 立体的 padding の編集 div{ padding:10px 20px; } 上記のように複数書くと、以下のように個数によって、判別される。 top/bottom right/left
top right/left bottom top right bottom left
padding-bottom:10px;のように、１部を指定することもできる。
margin も padding と基本同じだが、
margin の相殺が起こることに注意。margin の相殺とは、上下に隣り合った margin が重な り合い、結果大きいほうの margin しか間隔があかないことである。 文字の表示についての編集方法と例 color 色を変更 font-size 大きさを変更 font-family フォントを変更 font-weight: bold/normal 太文字かを選択 text-align: right/center/left 行揃えを変更 text-decoration: underline/line-through/none 下線/打消し線/下線なし スペースで二つ付 けることも可能である リストに関するスタイル ul{ list-stylel:url('画像名'); } タイプには画像のほかに disc/circle/square/decimal/lower-alph や inside/outside を設定可 能。内容は 黒丸/白丸/四角/連番/アルファベットとなる。 inside を指定すると、マーカーが内側に入る。 カーソルを変える cursor:help; ？カーソル cursor:move; 上下左右矢印カーソル cursor:pointer; 指のマーク cursor:url('画像名'),auto; 画像に変える。画像がないときのために,auto を用意しておくべ きである。
背景を変更する
background-color 色の変更 background-image 画像を適用
background-repeat:no-repeat 画像を一度だけ適用 background-repeat:repeat-x x 軸にだけリピート
background-position px で設定したり、top center を設定できたりする。 background-attachment:scroll/fixed スクロールしたとき固定するかどうか これらは background:でまとめて書くことができる。 要素の配置方法変更 <h1>や<p>のように、下にどんどん積み重なる要素をブロックボックスと呼ぶ。 また、<a>や<span>のような左詰められていくものをインラインボックスと呼ぶ。 display:の次に記述する値が以下によって変わる。 block ブロックボックスにする inline インラインボックスで表示 list-item リストのようにマーカーを持たせる inline-block インライン要素だが、幅や高さを指定したいときに使用 none 表示しない ; 表の表現
本文の<div class="container">で囲った<div class="box">を .box{display:table-cell;}
.container{display:table;}と css で記述すると表のように表示できる。 さらに段にするには、
<div class="container">の中に<div class="row">を二つ作り、 その中に<div class="box">を入れ、
要素の位置 position:の値が次の場合に変更 static 初期値であり、今までのルールで記述される relative static の位置からずらして表示される fixed スクロールしても位置が固定される。他はこの要素が無視された表示になる。 absolute 親要素のポジションによって変わる
親要素の position が static なら左上、relative ならそこを基準にする
要素が position:static 以外に対して、重なる時の表示の優先度を設定できる。 基本は後に書いたものが上だが、z-index:1;のように設定し、値の大きいものが上にくるこ とになる。 ブロック要素の中身が大きさを超えはみ出た場合、overflow でどう処理するか設定できる。 visible そのままはみ出して表示する hidden 見えなくする scroll そのブロックの中でスクロールできるようにする overflow:hidden;のように記述する。 文字を表示したとき、行単位で高さを調整できる。 line-height:20px;のように書く。 画像を行上に表示するとき、vertical-align で場所を調整できる。 img{vertical-align: baseline/top/bottom/middle/?px/?em ;}の中から値を選び、記述する。 指定した要素を、通常の表示から話して、左右に表示するために float を使う。 img{float:right;}のように記述する。 それにより表示したものが重なり、その下にブロックを回り込ませたいときは、
