css の覚え書き

初版作成　　2014.2
最終更新　　2024.04.01

◆◆ 参考資料 ◆◆


「html & スタイルシート  プロ顔負けのホームページ作成術」
西村文宏
成美堂出版

◆◆ スタイルシートの記述場所 ◆◆


普通は別ファイルにしてヘッダでインクルードする

<head>

  <link rel="stylesheet" type="text/css" href="style.css">
</head>

ヘッダの中に記述する方法

<head>

    <style type="text/css">
    h1 {
        font-weight: normal;
    }
    </style>
</head>

一箇所だけ指定する方法

<p style="background:#ffffcc;">文章</p>

◆◆ 注意 ◆◆


css ファイル中でのコメントは /* aaaaa */ のみ
//  はエラーが発生し、それ以降の設定が無効になる。

このエラーは発生に気がつきにくいので、嵌まる原因となる。

php の中と混同しないように

◆◆ 要素の設定方法 ◆◆


* {                   あらゆる要素に適用
    margin-top: 0px;
}

body {
    background: gray;
}

h1,h2 {
    background: #000000;
    color: #ffffff;
}

p {
    color: darkblue;
    text-indent: 1em;
}

◆◆ 個別の箇所にスタイル設定 (class 使用) ◆◆


>> 文字単位

□□□□<span class="pen1">○○○○</span>□□□□

蛍光ペン

span.pen1 {
    background-color: yellow;
    padding: 0.1em 0px;
}

アンダーライン

span.pen1 {
    border-bottom: double 3px red;
}

span よりも strong の方がふさわしいかもしれない。
span の部分を省略して

.pen1 {

}

のように書くことも可能。

>> 段落単位

<p class="main">主要箇所</p>
<p class="note">注釈</p>

p.main {
    line-height: 1.4;
}
p.note {
    font-size: 80%;
    color: green;
}

p は省略可能

>> 複数の要素をまとめたブロックに適用

<div class="bar">


</div>

div.bar {
    background-color: green;
    padding: 0.5em;
}

◆◆ 個別の箇所にスタイル設定 (id 使用) ◆◆


class は複数箇所に指定できるのに対して、
id は 1 つの html ファイルに 1 箇所しか設定できない。

ゆえに、ヘッダ、サイドメニュー、メイン記事、フッタなどの
領域ごとの設定に適する。

<div id="header">

</div>

#header {
    background: red;
}

>> id とタグの組み合わせ

<div id="id1">
<h2>見出し2</h2>
</div>

#id1 h2 {          /* div で囲まれた領域内のみ適用 */
    margin: 0;
}

>> id とクラスの組み合わせ

<div id="toiawase">
<div class="inner">

</div>
</div>

#toiawase .inner{
    background: #ffffff;
    padding: 0 10px;
}

◆◆ 子要素への適用 ◆◆


<div class="navi">
<ul>
    <li>aaaa</li>
    <li>bbbb</li>
</ul>
</div>

.navi {
    padding: 0;
}

.navi ul {
    background: #2088e1;
    list-style: none;
    margin: 0;
}

.navi ul li {
    background: url(images/image.png) no-repeat 10px 16px;
    border-bottom: #ffffff dotted 1px;
}

◆◆ 文字・段落の属性 ◆◆


line-height: 1.4             行間

color: #7fffd4;              文字の色
background-color: black;     背景色

font-size: 240%;             サイズ
font-weight: bold;           太さ      normal  bold
font-family: monospace;      フォント  monospace  serif  sans-serif

text-align: right;           配置      left  right  center

letter-spacing: 0.7em;       文字間隔

text-indent: 1em;            字下げ

◆◆ 境界 ◆◆


border-style:           solid  double  dotted  dashed
border-color:
border-width: 0px 3px 3px 0px;
      値の個数
      1   上下左右
      2   上下  左右
      3   上  左右  下
      4   上  右  下  左

margin: 0.5em 0px;           境界の外側の余白
margin-top:
margin-bottom:
margin-left:
margin-right:

padding: 0.1em;              境界の内側の余白

◆◆ 画像のフローティング配置 ◆◆


<p>
<img src="aaa.jpg" class="gazou">
画像の説明
</p>
<p class="stopfloat">
次の文章
</p>

img.gazou {
    float: right;
    border: double 4px #a52829
    margin-left: 5px
}

p.stopfloat {
    clear: both;
}

◆◆ 背景画像 ◆◆


body {
    background: url("aaa.jpg") no-repeat 10px 20px #ff00ff;
}

位置は左から 10px, 上から 20px

◆◆ 自由な配置 ◆◆


>> 画像を自由な位置に配置する

<div>
<img src="aaa.jpg" class="sakura">
</div>

img.sakura {
    position: absolute;
    top: 3px;
    right: 3px;
}

>> 画像と文字を重ねる

<div class="base">
    <img src="aaa.jpg" width="200" height="150"><br>
    <div class="moji">
        ここに文字を書く
    </div>
</div>

div.base {
    position: relative;   /* 画像の左上を基準位置とする */
}

div.moji {
    position: absolute;
    top: 30px;
    left: 30px;
    width 130px;
}

div.base の中に div.moji が入れ子になっているので、
div.moji での position が div.base の左上になる。

◆◆ リストの先頭文字を画像にする ◆◆


<ul class="gazou">


ul.gazou li {
    list-style-image: url("aa.gif");
}

ul li {
    color: blue;          /* 文字色 */
    padding-left: 0.2em   /* 画像と文字の間隔 */
}

◆◆ ナビゲーションバー ◆◆


<ul class="navi">
<li><a href="link1.html">メニュー1</a>あ</li>
<li><a href="link2.html">メニュー2</a>い</li>
<li><a href="link3.html">メニュー3</a>う</li>
</ul>

ul.navi {
    background-color: blue;
    color: yellow;
    margin: 0px;
    padding: 10px;  /* background-color の領域 　先頭記号は含まれない */
}
ul.navi li {
    display: inline;     /* 横に並べて表示
                            自動的に list-style-type: none になるようだ */
    list-style-type: none;   /* 先頭文字不要 */
    margin: 1em; 3em;        /*  上下のマージン (3em) は効かないようだ */
}
ul.navi a {
    color: white;
    text-decoration: none;   /* リンクの下線を消す */
    border: 1px blue solid
}
ul.navi a:hover {            /* カーソルが上に乗ったときの色 */
    border: 1px yellow solid;
    background-color: #aaccff;
    color: blue;
}

◆◆ スペースや改行をそのまま表示する ◆◆


<p class="pri">
program list
等幅
</p>

p.pri {
    white-space: pre;
    font-family: monospace;
    border: solid 1px green;
    padding: 1em;
}

◆◆ 段落は 1 字下りにする ◆◆


<p class="indent">
この段落は字下げする。
</p>

p.indent {
    text-indent: 1em;
}

◆◆ リンク ◆◆


a:link { color: #4D82C4;}     /* リンク */
a:visited{ color: #800080;}   /* 訪問済リンク */
a:hover{ color: red;}         /* カーソルが上にある */
a:active{ color: red;}        /* クリックした瞬間 */