Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
4

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.

@intern

CSS入門（akiinu）

Last updated at Posted at 2014-04-14

CSSとは

HTMLの要素の装飾の指示をする
cascading style sheet
HTML(文書構造)+CSS(見た目)=Webページ

セレクタ {
　　プロパティ: 値;
　　プロパティ: 値;
　　プロパティ: 値;　/* 隠しコメント */
　　}

使用するCSS

CSS2.1

セレクタの種類

  • 要素：h1, p, ul, body 等
  • class：.item 等
  • id：#main 等

装飾の方法

  • インライン：直接タグにstyle属性をつける
  • styleタグ：<head>内
  • 外部ファイル：css

CSSの設定
`


　 `

セレクタの指定

  • *：(全てのセレクタ)
  • a,b：aとb
  • a b：aの下の全階層のb・子要素と孫要素
  • a > b：aの直下の階層のb・子要素のみ
  • a + b：aの直後のb
  • ab：a要素かつbであるもの

優先順位

  • 後から書いた方が優先
  • 詳細度の高い方が優先
  • インラインで書いた方が優先
  • !importantが最優先

詳細度

  • id(#)：(100)
  • class(.)：(10)
  • 要素：(1)

<style> 　　h1 { color: green; } ←1 　　#main h1{ color: red; } ←100+1 　　section#main h1{ color: yellow; } ←1+100+1 　　h1 { color: green !important; } ←最優先 </style>

#装飾の種類

色の指定

  • 名前：red blue purple
  • RGB：r(ed)/g(green)/b(lue) 0-255　rgb(125,255,80)
  • 16進数：#00f #ff0000

<style> 　　h1 { color: #ff0000; } </style>

テキストのスタイル

<style> 　　p { 　　　color: gray; 　　　font-weight: bold; ←またはnormal 　　　font-size: 20px; 　　　text-align: center; ←またはleft，right 　　　text-decoration: line-through;　←二重線 　　　font-family: Impact;　←フォントの指定 　　　line-height: 40px; ←20pxが文字の上下に振り分けられる 　　} </style>

background

<style> 　　body { 　　　　background-color: green; 　　　　background-image: url('bg.png'); 　　　　background-repeat: no-repeat; ←repeat x：横，repeat y：縦 　　　　background-position: 10px 10px; 　　　　background-attachment: scroll; ←fixed：流れない 　　} </style>

一度に指定可能
background: green url('bg.png') no-repeat;

ボックスモデル

HTMLの要素をブラウザに表示すると、それぞれが四角い領域を確保する
→その領域のスタイルを設定するための方法

Box（widthとheightで指定）

sample
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSSの練習</title>
    <style>
      body,html {
          height: 100%;
      }
      div {
          width: 50%;
          height: 50%;
          background: green;
      }
  </style>
</head>
<body>
   <div> Box </div>
</body>
</html>

※width,heightの指定はpxまたは%（親要素の領域に対して）
※heightを%指定するためには親要素の明示が必要（上記body,html部分）

(ボックスモデル)border

border（境界）

<style> 　　div { 　　　border-color: red 　　　border-width: 5px 　　　border-style: solid ←solid(実線) dashed（破線）dotted（点線）double（二重線）inset outset（立体的） 　　　} </style>

境界ごとに指定可能
border-left: red;

一度に指定可能
border-right: blue 5px solid;

(ボックスモデル)padding,margin

  • padding（borderの内側の余白）
  • margin（borderの外側の余白）

<style> 　　body,html { 　　　　height: 100%; 　　　　margin: 0; 　　　} 　　div { 　　　　background: green; 　　　　width: 50%; 　　　　padding-top: 10px; 　　　} </style>

四方で余白の幅を変える
padding: 10px 20px 30px 40px;
1つ → all
2つ → top&bottom left&right
3つ → top left&right bottom
4つ → top right bottom left
※marginも同様`

display,overflow

display（要素の表示方法の指定）

  • block：前後に改行
  • inline：前後に改行が入らない（高さと幅の設定が解除）
  • inline-block：前後に改行が入らない（高さと幅の設定が有効）
  • none：表示されない（スクリプト等で表示と非表示を切り替える際に使用）

display: inline-block;

overflow（要素の内容がはみ出した場合の挙動の指定）

  • visible：そのまま
  • hidden：はみ出した部分を隠す
  • scroll：スクロールバーをつける

overflow: scroll;

position

  • static：（初期値）
  • relative：（相対的）親要素
  • avsolute：（絶対的）子要素
  • fixed：（スクロールしても動かない）
    ⇒ある要素の子要素を親要素に対して相対的な位置で配置したい場合によく使われる。

ボックスの上に飾りのラベルをつける

sample
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSSの練習</title>
    <style>
      div {
          background: green;
          width: 100px;
          height: 100px;
          position: relative;
      }
      .label {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 14px;
          background: red;
          padding: 2px 4px;
          color: white;
      }
    </style>
</head>
<body>
   <div>
     <span class="label">NEW!!</span>
     Box </div>
</body>
</html>

右下ではみ出るパターン
bottom: -5px; right: -5px;

position: fixed;

スクロールしても表示されるメニューをつける

sample
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSSの練習</title>
    <style>
      div#menu {
        position: fixed;
        top: 0;
        background: blue;
        color: white;
        width: 100%;
        height: 50px;
        z-index: 2;
      }
      div {
        background: gray;
        color: white;
        width: 100px;
        height: 100px;
        z-index: 1;
      }
    </style>
</head>
<body>
   <div id="menu">Menu</div>
   <div>
     Box </div>
</body>
</html>

要素の重なりの指定

z-index: 1;
※同じ階層かつpositionがstatic以外のもの
※数値が大きいほど上に表示

float,clear

要素を回り込ませる
img { 　float: left; }

回り込むのを防ぐ
h2 { 　clear: left; }

list-style

  • list-style-type マーカーの種類
    　ul,circle,square,katakana
  • list-style-position マーカーの位置
  • outside,inside マーカーは領域の外側か内側か
  • list-style-image ※イメージの方が優先される

ul { 　list-style: url('smile.png') outside; }

cursor

カーソルの形状をある位置で変える

sample

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSSの練習</title>
    <style>
    .change {
       cursor: move; ←move,help,wait,pointer 等
    }
   </style>
</head>
<body>
    <p> こんにちは。こんにちは。<span class="change">こんにちは。</span></p>
</body>
</html>

擬似クラス

要素がある特定の状態になったときにスタイルを指定できる

  • :link：訪問前のリンク
  • :visited：訪問したリンク
  • :hover：マウスが乗ったとき
  • :active：クリックの最中
  • :focus：フォームなど選択中

<style> 　a:link { color: blue; } 　a:visited { color: glay; } 　a:hover {font-weight: bold; } 　a:active { background: red; } </style>
※必ずこの順番で書く

見出しに触れた際に色を変える
h1:hover { background: orange; }

フォーム選択中に色を変える
input:focus { background: green; }

5
4
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
Sign upLogin
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?