要素にフォーカスが当たったときは例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには以下のように記述する p:before{content:" 記号や文字 ";}

Size: px

Start display at page:

Download "要素にフォーカスが当たったときは例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには以下のように記述する p:before{content:" 記号や文字 ";}"

あきひさたかぎ
5 years ago
Views:

1 css とは web ページを構築する上で主に見た目にかかわる部分を記述するものである記述方法は html の <head> に直接書く方法 <body> のタグに一つ一つ書く方法と別のファイルとして書いておく方法がある 1つ目の方法は <style> タグを <head> に記述して起きその中に css で記述する 2つ目の方法は例えば <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.class{} a と b 両方に a の構造下の b だけ a の構造直下の b だけ a と b が続いたとき b だけ a に class がついたものだけに適用タグについている属性を参照する場合は以下のように記述するタグ名 [ 属性 ]{ } その属性があるものを対象タグ名 [ 属性 =" 値 "]{ } 属性がその値だった時タグ名 [ 属性 ~=" 値 "]{ } 属性のうち一つでも合致すれば適用また以下のようにセレクタを指定することが可能である疑似クラス ul li:first-child{ } 最初の要素だけ適用 a:link{ } 未訪問のリンク先 a:visited{ } 訪問済み a:hover{} マウスが上に乗ったとき a:active{} クリックしたとき css には優先度があり上の順番で書かないといけない

2 要素にフォーカスが当たったときは例えば以下のように記述する 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 のように

3 以下の画像を参考に要野の周りの長さを変えることができる 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

4 padding-bottom:10px; のように 1 部を指定することもできる 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 を用意しておくべきである

5 背景を変更する 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"> を入れ.row{display:table-row;} で表示することができる

6 要素の位置 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;} のように記述するそれにより表示したものが重なりその下にブロックを回り込ませたいときは h1{clear:right;} のように書く float したのが left の場合は left 両方の場合は both とかく

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説明 )

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには以下のように記述する p:before{content:" 記号や文字 ";}