Webベース-CSS

22884 ワード
テキストリンク

学習内容


cssはhtmlで設計にのみ使用される言語です
htmlは情報を担当し、cssは設計を担当する

基本構文

<html>
    <head>
        <style>
            li{
                color:red;
                text-decoration: underline;
            }
            .em{
                color: green;
            }
            #vip{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 class="em">CSS Cyntax</h1>
        <ol>
            <li class="em" id="vip">item</li>
            <li>item</li>
            <li>item</li>
           <!-- <font color="red">
                <li>item</li>
            </font>
            <li>item</li>
            <li>item</li> -->
        </ol>

    </body>
</html>
li{
	color:red;
	text-decoration: underline;
}
リストに「赤」、「下線」の効果が表示されます.

box model

<html>
<head>
    <style>
        h1{
            border: 10px solid red;
            padding: 30px;
            margin: 50px;
            width:100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <h1>WEB</h1>
    <h1>WEB</h1>
</body>
</html>
<style>
	h1{
		border: 10px solid red;
		padding: 30px;
		margin: 50px;
		width:100px;
		height: 100px;
	}
</style>
padding:内部余白
マージンえっじ:外側マージンがいぶマージン

grid

<html>
    <head>
        <style>
            div{
                border: 10px solid skyblue;
                margin: 5px;
            }
        #container{
            display: grid;
            grid-template-columns: 100px 1fr 1fr;
        }
        </style>
    </head>

    <body>
        <div>HEADER</div>

        <div id="container">
            <div>LEFT</div>
            <div>CENTER</div>
            <div>RIGHT</div>
        </div>
        <div>BOTTON</div>
    </body>
</html>

div:意味のないCSSのみのタグ
  • cssセレクタ
    classグループ別に同じスタイルを適用
    idは1つのみ適用
    tag

    はんのうせっけい

    <!doctype html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf-8">
    <style>
        @media all and (min-width: 600px){ 
            #container{
                display: grid;
                grid-template-columns: 180px 1fr;
            }
            body{
                background-color:yellow;
            }
        }
        @media all and (max-width: 600px) {
            body{
                background-color:red;
            }
        }
    </style>
</head>
<body>
    <h1><a href="index.html">html</a></h1>
    <div id="container">
        <ol>
            <li><a href="1.html">one</a></li>
            <li><a href="2.html">two</a></li>
            <li><a href="3.html">three</a></li>
        </ol>
        <div>
            <h2>Welcome</h2>
            Hello, WEB
        </div>
<   /div>
</body>
</html>

  • スクリーンサイズ


  • スクリーンサイズが小さい

    • 学習後期


    反応型デザインに入るときの使い方はちょっと難しいです.
    授業が終わってから復習しながら、いろいろなテストをしながら書いて、やっと動作の感じがしました.
    授業中だけでなく、自分で作成してミスを経験することも重要な過程のようだ.
    [1日]JavaScript 1
    四則演算テストとパッケージ5.1