More than 1 year has passed since last update.

完全初心者がCSSを学んでHTML作成をした！

Posted at 2022-02-24

こんにちは^^
前回作成した＜超簡略版＞お弁当発注画面制作を改良するためにCSS,JavaScriptが必要であると考えたため、今回はCSSを学び編集しようと思います。
CSSも全く触ったことが無いため、基礎の基礎から学習しようと考えています。

CSSとは

CSS（スタイルシート）では、作成したHTMLの背景色やフォントサイズなど見た目の指定を行うことができます。
前回HTMLでフォント指定や幅の調整を行いましたが、世の中ではHTMLで文書作成をし、CSSを利用して見た目変更を行うのが主流だそうです。

CSSの基本の型

CSSは、3つの要素を使用して見た目を変更します。
以下に例を示します。

aiueo{color: green;}

aiueo:セレクタ　{}内に記載されている内容に変更したい部分のHTMLタグを書く
color:プロパティ　何を変更するか　colorの場合は色を変更できる　
使用できる単語は沢山あり、変えたい内容に合わせて単語を変更する
プロパティの後ろには必ず[:]をつける
green:値　どのように変更するか　プロパティによって書き方が変わる
値のうしろには必ず[;]をつける

また、1つのセレクタに複数のプロパティを記述することができます。

aiueo{
      color: green;
      font-size: 20px;
      }

HTMLとの連動方法

HTML内に直接書き込む方法、別ファイルに作成しHTMLで読み込む方法と複数あります。
変更しやすく見やすいので、今回は別ファイルで作成します。

HTMLのheadタグ内に以下のコードを書き加えます。

<link rel="stylesheet" href="obento.css">

link:外部ファイルを読み込む
rel:relationshipの略でrel属性と呼ばれる
　　　読み込む対象と、HTMLの関係性を表す　
　　　今回はCSS（スタイルシート）を読み込むので右辺にstylesheetと書く
href:href属性と呼ばれ、読み込むCSSファイルの名称を記載する
　　　　「〇〇.css」の形式であれば〇〇は自由（アルファベットのみ）

別ファイルに作成する時の注意点として、HTMLファイルとCSSファイルを同一のフォルダ内に保存しておくことがあげられます。
別のフォルダに配置するとHTMLがCSSを読み込むことができず、見た目が変更されなくなります。

実際にうごかす

背景の色変更

HTMLのbody全体にグラデーションカラーを施し背景全体の色を変更しました。

body{
    background: linear-gradient(#a8ff78,#78ffd6) ; 
    }

background:背景を指定するためのプロパティ
linear-gradient(#a8ff78,#78ffd6):線状のグラデーション（開始色、終了色）
○○-gradientでグラデーションを示している
○○を変更すると円形や放射状など様々なグラデーションができる
開始色と終了色にはカラーコードを挿入する

実行すると以下のようになりました。HTMLは前回と変更していません。

白枠を作る

表もグラデーションになり見づらくなってしまったので、表の周りを白背景にします。
HTMLで作成した表を内部までまとめて動かすためにtableタグの外側にdivタグを加えました。

div{
    background: #ffffff;
    width: 450px;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
}

width:横幅の大きさを示す
padding:内側の余白を示す
margin-:外側の余白を示す　左右をautoにすると中央に揃う

表の枠をCSSで表す

前回はHTMLで枠の太さを調整していましたが、CSSで表しました。

table{
    border-collapse: collapse;
    border:solid 2px black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

table td, table th{
    border:dashed 1px black;
}

border-collapse: collapse:隣り合ったボーダーセルの表示方法を示す　
collapseは重ねて表示される　初期値（separate）は外枠と中の線が分離して表示される
border:solid:線の形状を示す　solidは直線　dashedは点線
後ろに線の太さと色をスペースを空けて示す
text-align: center:文字や画像を揃える　centerは中央揃え

これを実行した結果は以下のようになりました。

今回の最終形

お弁当の画像をHTMLで表示させるように変更し、大きさや左右の間隔はCSSで変更した。また、日付を指定できるカレンダーも中央に揃え、より見やすくしました。
HTMLとCSSのコードをそれぞれ示します。

こちらは最終形のHTMLコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charaset="utf-8" />

    <link rel ="stylesheet" href="obento.css">

    <title> お弁当発注システム </title>
</head>
<body>
    <h1>
    <input type="date" align="center">
    </h1>
    
    <div>
        <!--table 表-->
        <table>
        
            <!--tr=行作成、th=見出し、td=データ入力-->
            <tr>
                <th>お弁当名</th> <th>ご飯サイズ</th> <th>有無</th> <th>値段</th>
            </tr>

            <tr>
                <td>
                    <img src="https://1.bp.blogspot.com/-bb7kq5ltcaY/UnyF491i2uI/AAAAAAAAaWU/YxPzCSHQg7g/s800/obentou_sake.png"
                    >和食弁当</img>
                </td>

                <td>
                    <label><input type="radio" name="wasyoku" value="big" >大</label>
                    <label><input type="radio" name="wasyoku" value="tall" >中</label>
                    <label><input type="radio" name="wasyoku" value="short" >小</label>
                </td> 
                <td> <input type="checkbox" id="check1" onchange="Change"> </td>
                
                <td> 400円 </td> 
            </tr>

            <tr>
                <td>
                    <img src="https://4.bp.blogspot.com/-HC7_htu8tLI/UkJM9wJQ59I/AAAAAAAAYWk/mTs-LZ52aDw/s800/obentou_hamburg.png"
                    >洋食弁当</img>
                </td>
                <td>
                        <label><input type="radio" name="yousyoku" value="big">大</label>
                        <label><input type="radio" name="yousyoku" value="tall">中</label>
                        <label><input type="radio" name="yousyoku" value="short">小</label>
                </td> 
                <td> <input type="checkbox" /> </td> 
                <td> 400円 </td>
            </tr>

            <tr>
                <td>
                    <img src="https://2.bp.blogspot.com/-88SqS3pAFXc/VCka8aZwF4I/AAAAAAAAm-U/xEls_G7gl84/s800/food_obentou_makunouchi.png"
                    >幕の内弁当</img>
                </td>
                <td> ✕ </td> 
                <td> <input type="checkbox" /> </td> 
                <td> 500円 </td>
            </tr>

            <tr>
                <td>
                    <img src="https://1.bp.blogspot.com/-LHEZgJ6tpeA/UgSL_9y4KrI/AAAAAAAAW5s/DNRPJ4kSvpI/s800/food_curryruce.png"
                    >カレーライス</img>
                </td>
                <td> ✕ </td> 
                <td> <input type="checkbox" /> </td> 
                <td> 450円 </td>
            </tr>
            
        </table>  
    </div> 
</body>
</html>

前回はお弁当名を押すとリンク先に跳べるようにしていましたが、今回はimg src=画像のリンク　をしようしてブラウザに直接画像を貼りました。
日付指定ができるカレンダーをCSSで指定するためにh1タグを加えました。

次に、こちらが最終形のCSSコードになります。

body{
    background: linear-gradient(#a8ff78,#78ffd6) ; 
}

h1{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

div{
    background: #ffffff;
    width: 450px;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
}

table{
    border-collapse: collapse;
    border:solid 2px black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

table td, table th{
    border:dashed 1px black;
    padding: 5px;
}

table td img{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

結果は以下に示します。

感想

前回はとてもシンプルだったのでそれに比べたらわかりやすいお弁当発注画面になったと思う。
CSSのプロパティの種類がとても多いけれど調べればプロパティ表がでてくるし、型はシンプルでわかりやすいので今回でかなり理解できたと思う。
次は送信ボタンなどをつけたら本物の発注画面のようにできる気がした。
めちゃつかれたねむい(^^♪