1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSS入門(nojimayusuke)

Last updated at Posted at 2014-05-01

#まとめ

##CSS概要
cascading style sheetの略
html文書構造+css見た目=webページ

  • CSSでは基本的にHTML内の要素を指定して、それに対してstyleを当てはめていく。
  • 書き方はセレクタ(どの要素に対してスタイリングするかというもの、操作対象)を書いたあとに、{}を書いて、その中にプロパティと値をセットにして「プロパティ:値」のように書く。
  • プロパティと値のセットは複数書くこともできるので、その場合は;で区切って書く。
  • h1の文字を赤くしたい場合 
    「h1{color: red;}」
    と記述する。
    「h1」がセレクタで、「color」がプロパティで、「red」が値ということになる。
  • セレクタはHTMLの要素を指定する場合と、idを指定する場合と、classを指定する場合の書き方がある。
  • HTMLの要素を指定するにはh1,p,ulとタグをそのまま書いていけばよい。
  • idを指定する場合は「#」を付けて、idの名前を書いておく。
  • classの場合は「.」を付けて、class名を付けることでセレクタになる。
  • CSS中にコメントを書く場合、/..../で囲う。

##CSSはどこに書くか?

  • スタイルの指定は大きく分けて3つの書き方がある。1つ目はstyleタグの中に書いていく方法。2つ目はインラインで書いていく方法。3つ目は外部ファイルに書いていく方法がある。
  • styleタグはhead要素の中に入れなくてはいけない。head要素の中にstyleタグを作って、その中に書いていく。
  • 複数行に分けて書くこともできるが、見通しをよくするために1行で書くこともある。
  • インラインで書いていく場合は、タグに直接style属性を付けて、そこに指定する。例えば、文字色を緑にしたい場合には、「style="color:green;"」と記述する。この場合はセレクタは自明なので、プロパティと値だけ書けば良い。
  • 外部ファイルの指定はhead要素に記述していく。「」としてhref属性でファイル名を指定する。default.cssというファイルを作成->default.cssの中に「ul{color: pink;}」と記述->index.htmlからdefault.cssを読み込んでulに対して文字色をピンクにする。

##セレクタの指定方法

  • 「*」で指定した場合
    すべてのセレクタに影響を及ぼす
    a,b複数のセレクタを一気に指定
  • スペースで区切る場合
    section.item
    sectionの下の階層にあるすべてのitemを指定(子要素と孫要素を同時に選択できる)
  • 不等号で区切る場合
    section > .item
    sectionの直下の階層にあるitemを指定(子要素のみに影響を及ぼす)
  • +で区切る場合
    h2 + p
    h2の直後のp要素に影響
  • くっつけた場合
    p.item
    p要素であって尚且つclassがitemであるものを指定している。
  • 「,」で区切った場合
    複数のセレクタを一気に指定することができる。

##スタイル指定の優先度

  • セレクタが同じ場合->後から書いた方が優先
    外部ファイルやstyleタグに書くよりも、インラインで書いたほうが優先
    詳細度の高い方が優先
    !important指定が最優先
  • 詳細度について
    詳細度はセレクタの中でidを使うと1個につき100ポイント、クラスを1個使うたびに10ポイント、要素を1個使うたびに1ポイントで計算される。
    「h1{color: green;}」の場合1ポイント
    「#main h1{color:red;}」101ポイント
    「section #main h1{color:yellow;}」102ポイント

##色の指定

  • 名前で指定(red blue purple)
  • rgb数値で指定 rgb(0,255,0)
  • 16進数で指定 #00f->青(3桁)
    #ff0000->赤(6桁)

##テキストのスタイルを指定する

  • color 色
  • font-weight: bold; 太字
  • font-weight: normal; 普通の太さ
  • font-size: 14px; 文字の大きさを変える(ピクセルで指定)
  • text-align: center; 行揃えを指定する
  • text-decoration: 上下に線を引くことができる
    text-decoration: line-through; 打ち消し線
  • font-family: フォント指定
  • line-height: 40px;行の高さを指定

##backgroundについて(背景のスタイル)

  • baclground-repeat: url('bg.png');
    背景に画像を敷き詰める
  • background-repeat: no-repeat;
    1個しか画像を表示しない(左起点)
  • background-repeat: repeat-x;
    横方向だけに画像を敷き詰める
  • background-repeat: repeat-y;
    縦方向だけに画像を敷き詰める
  • background-position:10px 10px;
    右に10px下に10pxの場所を起点にして画像を表示する。
  • background-attachment: scroll;
    画面がスクロールした時にその背景画像をどうするのか指定する。
    [scroll] スクロールすると一緒に流される。
    [fixed] スクロールしても流されない。

以上のプロパティは順不同、省略可能でいっきに指定することもできる。
background: green url('bg.png')no-repeat;

##ボックスモデルの理解

  • width 幅
    width: 400px;
    %で指定することもできる。この場合、親要素の領域に対しての%表示になり、ブラウザを動かしても指定した%の領域を保っている。
  • height 高さ
    height: 200px;
    %で指定することもできる。この場合、親要素の高さを明示的に示してあげなければならない。
  • border 境界
  • padding 境界とコンテンツエリアの間にある内側の余白の部分
  • margin 境界の外にある余白の部分

##borderについて

  • border-color
  • border-width
  • boeder-style solid(実線) dashed(破線) dotted(点線) double(二重線) inset(立体的に見せる) outset(立体的に見せる)

background同様にborderで一気に指定することができる。(順不同省略可)
borderで指定すると上下左右すべてborderに対して指定した設定を適用する。

  • 左と右でスタイルを変えたい場合
    border-left: red 5px solid
    border-right: blue 5px solid
    右が青色、左が赤色のスタイルになる。

##padding,marginについて

  • padding: 10px; 1つの数字の指定だけで上下左右に余白を作ることができる。
  • 上下左右それぞれ別に指定する場合
    padding: 10px(上)20px(右)30px(下)40px(左);時計回りに指定できる。
  • 指定する数字の数によってどこが対応するのかの違い
    1 -> all
    2 -> top&bottom left&right
    3 -> top left&right bottom
    4 -> top right bottom left
  • 1つだけ指定したい場合(左の場合)
    padding-left: 10px;
  • marginもpaddingと同じである

##display,overflowについて

  • 要素の表示に関するプロパティ

  • display(要素の表示方法を指定するためのもの)

    • block 前後に改行が入る
    • inline 前後に改行が入らない(高さと幅の設定が解除)
    • none 表示されない(スクリプトで表示と非表示を切り替える際によく使われる)
  • overflow(要素の内容がはみ出した場合の挙動を指定するためのもの)
     - visible(ありのまま表示する、はみ出して表示される)
     - hidden(はみ出した部分を隠したいとき)
     - scroll(はみ出した部分がスクロールすると見えてくるようになる)

##positionについて

  • position(要素の配置方法を指定するためのプロパティ)
  • static(初期値)
  • relative(相対的な配置) 親要素に指定
  • absolute(絶対的な配置) 子要素に指定
  • fixed(スクロールしても位置を変えたくない)

一般的にはある要素の子要素を、親要素に対して相対的内地で配置したい場合によく使われる。その場合には、親要素に「position:relative;」を指定して、子要素に「position:absolute;」を指定すれば良い。

  • fixed(スクロールしても位置が変わらないものを作成するときに使用。例ヘッダーメニュー、フッターメニュー)

##z-indexについて

  • z-index(要素の重なりを指定するためのプロパティ)同じ階層でなおかつposition の指定がstatic以外のものに対して使うことができる。数値が大きいほど、重なりの上になる。

##float,clearについて

  • float(要素を回りこませる)
  • clear(要素を回りこませるのを解除する)
  • clear: left;(左)
  • clear: right;(右)
  • clear: both;(両方解除)
<style>
img {
          float: left;
     }
/*imgの左側に寄せたい場合*/
 h2 {
          clear: left;
/*回りこんでいる関係のない文字に対して回り込みを解除する*/

     }
</style>

##list-styleについて

  • list-style-type マーカーの種類(デフォルトだと黒丸)、circle(白丸)、square(四角)、katakana(ア、イ、ウ)
  • list-style-position マーカーの位置(デフォルトだとoutside)、outside(リスト領域の外側にマーカーが表示される)、inside(リスト領域の内側にマーカーが表示される)
  • list-style-image マーカーを画像で表示したい場合に使用する。

list-style-typeを指定していて、list-style-imageを指定するとimageの方が優先度は高い。

##cursorについて

  • cursor(マウスオーバーした際にカーソルの形状を変える)
  • プロパティ
    • move 十字カーソルに変わる(ドラッグ可能か知らせるため)
    • help 「?」マークに変わる
    • wait 待ち時間用のカーソルに変わる
    • pointer 指カーソルに変わる

OSやブラウザによって若干形状が違ってくる。

##擬似クラスについて

  • 要素がある特定の状態になったときにスタイルを指定できる。セレクタに「:」をつけて記述していく。
  • a:link { color:blue; } -> 未訪問のリンクに対してスタイルを指定
  • a:visited { color:gray; } -> 訪問済みのリンクに対してスタイルを指示
  • a:hover { font-weight: bold; } -> リンクにマウスオーバーした時に太字にする
  • a:active { background: red; } -> リンクを押してから離すまでのスタイルを指定
  • input:focus { background:green; } -> input要素にfocusがあたった時にbackgroundをgreenにする。
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?