More than 1 year has passed since last update.

HTML CSS JavaScript 基礎編-第2回 CSS基礎

Last updated at 2023-04-30Posted at 2023-04-30

仕事で、Plotly.jsを使ってデータを可視化する必要があるため、JavaScriptに詳しくない私は、HTML、CSS、JavaScriptについての書籍を勉強して基本的な知識を身につけておくことにしました。自分ためのメモですので、記事の中で一部中国語で書くことがあります。また、自分にとって重要ではないところも飛ばしています。

1. CSS基礎

フロントだけでも、いろんな技術がありますので、以下の順番で勉強するのがおすすめです。
HTML(済) → CSS → JavaScript → JQuery → CSS3 → HTML5 → Vue.js
第一回では、HTMLの基礎を紹介しました。これからCSSの勉強をしていきます。

CSSは三つの書き方があります：

インラインスタイルシート
インラインスタイルシートは、HTMLタグに直接CSSを書き込む方法です。例えば、
<p style="color: red;">文字の色を赤に指定</p>をbody本文に記載します。
内部スタイルシート
内部スタイルシートは、headタグにCSSを書き込む方法です。
外部スタイルシート(推奨)
外部スタイルシートは、CSSファイルを別に作り、HTMLファイルで読み込む設定にする方法です。

サンプルコードは以下の通りです：

CSS-sp-01.html

<!DOCTYPE html>
<html>
	<head>
        <style>
            p{
                color: blue;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/index_01.css">
	</head>
	<body>
        <p>おはようございます。</p>
        <p style="color: red;">文字の色を赤に指定</p>
        <p>こんばんは。</p>
	</body>
</html>

index_01.css

p{
    color: rgb(119, 0, 255);
}

2. CSSセレクター

2.1 要素のidとclass

HTML文書の特定要素のスタイルを変更することが出来るセレクターに、idセレクターとclassセレクターがあります。

「idセレクター」：HTML文書内で重複して「id属性」の値に設定することはできません、唯一なものです。
- セレクター名の前にシャープ(#)をつけます。
「classセレクター」：フォームの各項目など、ページ内に複数ある要素に関しては「classセレクター」を使います。
- セレクター名の前にドット(.)をつけます。

html

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
        <div id="x_01">はじめに</div>
        <p class="content">今日の説明は...</p>
        <p class="content">次は、これを...</p>
        <div id="x_02">終わりに</div>
	</body>
</html>

2.2 セレクター

セレクターの役割は様式を設定したい要素を特定するためのものです。
CSSセレクターのフォーマットが：

セレクター
{
    属性1: 値1;
    ...
    属性n: 値n;
}

基礎編では、五つのセレクターを説明します。

要素型セレクター

要素型セレクター

p{
    color: rgb(119, 0, 255);
}

IDセレクター#、クラスセレクター.
IDセレクターが特定要素に適用、クラスセレクタが種類ごとの複数要素に適用：

IDセレクター# クラスセレクター.

<!DOCTYPE html>
<html>
	<head>
        <style>
            #x_01,#x_02{
                color: blue;
            }
            .content{
                color: rgb(255, 0, 166);
            }
        </style>
	</head>
	<body>
        <div id="x_01">はじめに</div>
        <p class="content">今日の説明は...</p>
        <p class="content">次は、これを...</p>
        <div id="x_02">終わりに</div>
	</body>
</html>

子孫セレクター
子孫セレクタは、親要素に含まれる全ての要素Bに対して適用されます。
次の例では、section 要素に含まれる全てのp要素に対して文字色を変更しています。

子孫セレクター

<html>
	<head>
        <style>
            section p {
            color:orange;
            }
        </style>
	</head>
	<body>
        <p>sectionの前</p>    
        <section>
          <p>secionの子1</p>
          <div>
            <p>sectionの孫</p>
            <h1>sectionの孫</h1>
            <div>
              <p>sectionのひ孫</p>
            </div>
          </div>
          <p>secionの子2</p>
        </section>
        <p>section直後</p>
	</body>
</html>

グループセレクター
同じスタイルを複数の要素に適用させる場合、グループ化をすることで見やすくなり、効率的に書くことができます。以下の例のように、要素セレクターやClass/Idセレクターをグループ化しています。

グループセレクター

<html>
	<head>
        <style>
            .content,#x_01,#x_02,span{
                color: blue;
            }
        </style>
	</head>
	<body>
        <div id="x_01">はじめに</div>
        <p class="content">今日の説明は...</p>
        <p class="content">次は、これを...</p>
        <div id="x_02">終わりに</div>
        <span>こちらがSPAN</span>
        <h1>わしが何もないよ！</h1>
	</body>
</html>

3. フォントスタイル

font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。
フォントでよくある属性が：

font-family
font-size
font-weight
font-style
color

また、CSSのコメントは、Bodyのと違います。

CSS: /*こちらがCSSのコメント*/
body:

<html>
	<head>
        <style>
            /*こちらがCSSのコメント*/
            .content,span{
                font-family: Arial, Helvetica, sans-serif;
                font-weight: 200;
                font-style: italic;
                color: blue;
            }
            #x_01,#x_02{
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                font-size:36px;
                font-weight: 900;
            }
        </style>
	</head>
	<body>
        <!--こちらがBodyのコメント-->
        <div id="x_01">はじめに</div>
        <p class="content">今日の説明は...</p>
        <p class="content">次は、これを...</p>
        <div id="x_02">終わりに</div>
        <span>こちらがSPAN</span>
        <h1>わしが何もないよ！</h1>
	</body>
</html>

4. テキストスタイル

テキストのスタイルには、以下の属性があります。

text-indent
text-align: left/center/right
text-decoration: none/underline/line-through/overline
text-transform: none/uppercase/lowercase/capitalize
line-height
letter-spacing,word-spacing

See the Pen textstyle-book by Junlee (@utanesuke0612) on CodePen.

5. ボーダースタイル

border-style は一括指定の CSS プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。
いかの属性があります。

border-width
border-style: none/dashed/solid
border-color
上記の三つのまとめ → border:1px solid red;
border-top-width
border-top-style
border-top-color
上記の三つのまとめ → border-top:2px solid red;(border-left,border-right,border-bottomも同じ)

<html>
	<head>
        <style>
            #p1{
                font-size: 14px;
                text-indent: 28px;
                text-align: left;
                border-style: dashed groove none dotted;
            }
            #p2{
                font-size: 14px;
                text-indent: 28px;
                text-align: left;
                border-style: dashed double none;
                border-color: brown;
            }
            h3{
                text-align: center;
            }
        </style>
	</head>
	<body>
        <h3>日本語の名文</h3>
        <p id="p1">齋藤孝先生が、小さな子どもに"声に出して読んでほしい”日本語の名文48作品を厳選した絵本です。女優の永作博美さんが朗誦するCD1枚付き。</p>
        <h4>内容紹介</h4>
        <p id="p2">NHK Eテレ「にほんごであそぼ」の総合指導も務める齋藤孝先生が、小さな子どもに"声に出して読んでほしい”日本語の名文48作品を厳選し、素敵なイラストとともに1冊にまとめた絵本。
女優の永作博美さんが朗誦するCD1枚付き。</p>
    </body>
</html>

6. リストスタイル

list-style は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。
以下の属性があります。

list-style-type: 順番あり場合 decimal(1,2,3) / lower-roman / upper-roman /..
list-style-type: 順番なし場合 disc / circle / square / none
list-style-image: url(img/leaf.png)

7. テーブルスタイル

テーブル関連のスタイル属性：

caption-side: 表題の位置 top / bottom
border-collapse: separate / collapse
border-spacing: 30px

<html>
<head>
    <style type="text/css">
        table,th,td{border: 10px solid orange;}
        table{border-spacing: 18px; caption-side: bottom;}
    </style>
</head>
<body>
    <table>
        <caption>おはようございます</caption>
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
    </tr>
    <tr>
        <td>セル3-1</td>
        <td>セル3-2</td>
    </tr>
    </table>
</body>    
</html>

8. 画像スタイル

9. 背景スタイル

CSS 背景と境界モジュールでスタイル付けをすると、背景を色や画像で埋めたり (クリッピングや寸法の変更も) 他の加工を行ったりすることができます。

10. リンクスタイル

11. ボックスモデル

ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な CSS 基本ボックスモデルに基づいた長方形のボックスとして表現します。 CSS は**これらのボックスの寸法、位置、プロパティ（色、背景、境界の幅など）**を決定します。

それぞれのボックスは 4 つの部品 (または領域) から構成され

content：内容、テキストや画像など
padding：内部距離、テキストと境界の間の距離
border：境界線の様式
margin：現在のボックスと他のボックスの距離

属性	値
content	width,height,overflow
padding	padding-top,padding-left,..,padding
border	border-width,border-style,border-color;border
margin	margin-top,margin-left,..,margin

こちらでdisplay:inline-blockを使っています、inline-blockを使うと、inline-block要素の長さが内容で決めます。例えば、以下のように外すと、一行になってしまう：

幅と高さ

ブロック要素だけが幅widthと高さheightの設定できますが、行内要素が設定できません。例えば、以下のようにdivがブロック要素、spanが行内要素です。

もし行内要素のspanも幅と高さを設定するとしたら、ブロック要素に変換する必要があります。

12. フローティングレイアウト

デフォルトの設定ですと、行内要素(inline)が複数個を一行に並んでも可能です。

例：

<!DOCTYPE html>
<html>
	<head>
        <style>
            #father{
                width: 300px;
                background-color: aquamarine;
                border: 1px solid silver;
            }
            #father div
            {
                padding: 10px;
                margin: 15px;
                border: 2px dashed red;
            }
            #son1{
                background-color: hotpink;
                float: left;
            }
            #son2{
                background-color:orange;
                float: left;
            }
        </style>
	</head>
	<body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
            <div class="clear">box3</div>
        </div>
	</body>
</html>

最後に、 .clear{clear: both;}を付け加えて、Box3のFloatingが消されます。

13. ポジショニングレイアウト

位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。

固定位置指定（Fixed positioning）: fixed、top/bottom/left/rightも必要
相対位置指定（Relative positioning）: relative、top/bottom/left/rightも必要
絶対位置指定（Absolute positioning）: absolute、top/bottom/left/rightも必要
静的位置指定（Static positioning）: static(default)

例：

<!DOCTYPE html>
<html>
	<head>
        <style>
            #father div
            {
                padding: 10px;
                margin: 15px;
                border: 2px dashed red;
            }
            #son1{
                background-color: hotpink;
                position: fixed;
                top:30px;
                left: 160px;
            }
            #son2{
                background-color:orange;
                position: relative;
                top: 290px;
            }
            #son3{
                background-color:orange;
                position: absolute;
                top: 390px;
                left: 300px;
            }
        </style>
	</head>
	<body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
            <div id="son3">box3</div>
        </div>
	</body>
</html>

参考情報

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up