Progateは月額980円(税込み)でプログラミングを学べるサービス (無料会員でも一部サービスを利用できる。)
Progate レッスン一覧

HTML

タグ：<>で囲まれたもの

見出し


<!-- h1 ~ h6 -->
<h1>これは見出しです</h1>

段落


<p>これは段落です</p>

リンク


<!-- href属性にURLを張る -->
<a herf="https://...">ここにアクセスして下さい</a>

画像


<!-- src属性に画像のURLを張る -->
<img src="https:...">

部分指定


<span>ここ</span>が要点です

クラス付け


<div class="selected"></div>

<!-- クラスを複数つけることも可能(半角スペース) -->
<div class="selected1 selected2"></div>

入力


<!-- 一行入力 -->
<input>

<!-- 複数行入力 -->
<textarea></textarea>

<!-- ボタン* -->
<input type="submit" value="保存">

Font Awesome

<head>
    <!-- Font AwesomenoのCSSファイルを読み込む -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
    <!-- <span>タグでクラスに"fa"と"fa-"を指定する -->
    <span class="fa fa-facebook"></span>
    <span class="fa fa-twitter"></span>
</body>

HTMLの全体構造


<!DOCTYPE html>
<html>
    <!-- webページの設定 -->
    <head>
        <meta charaset="utf-8">
        <!-- スマホ・タブレットでメディアクエリを適応する場合headerに以下を書き込む -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>トロッコ問題</title>

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

    <!-- 表示内容 -->
    <body>
        <header>
            <h1>トロッコ問題</h1>
            <p>問題：...</p>
        </header>
        <div class="main">
            <p>あなたはレバーを引きますか？</p>
            <li>
                <ul>引く
                <ul>引かない
            <li>
        </div>
        <footer>
            <p>...</p>
        </footer>
    </body>
</html>

CSS

セレクタ：指定対象
プロパティ：変更項目

セレクタの種類


*                        /*全体*/
body                     /*bodyセレクタ*/
h1, p, a, li             /*その他セレクタ*/
.selected1, .selected2{  /*class付きセレクタ*/ 

}

セレクタの状態


/*要素の上にカーソルをのせた時*/
div:hover{

}

/*要素がクリックされている時*/
div:active{

}


/*transitionプロパティでアニメーションをつける*/
div{
    transition: all(変化させるプロパティ) 1s(変化の時間);
}

div:hover{
    background-color: red;
}

文字


    /*色*/
    color: red;
    color: #ff0000;

    /*透過(0.0 ~ 1.0)*/
    opacity: 0.5;

    /*フォント*/
    font-family: serif(明朝体)  sans-serief(ゴシック体);

    /*文字同士の間隔*/
    letter-spacing: 2px;

    /*スタイル*/
    font-weight: normal; /*bold*/

大きさ


    /*横幅, 高さ*/
    width: 500px;
    height: 80px;          /*行間指定なし*/

    /*縦方向の中央に配置*/
    line-height: 65px;     /*行間指定あり*/

    /*拡大, 縮小(%表記)*/
    width: 50%;

    /*画面幅の制限*/
    max-width: 1170px;
    width: 100%;

背景


    /*色*/
    background-color: #dddddd;
    background-color: rgb(84, 190, 238);

    /*透過*/
    background-color: rgba(84, 190, 238, 0.5);

    /*画像*/
    background-image: url(lenna.png)

    /*画像を表示範囲いっぱい埋めつくす*/
    background-size: cover;

ボーダー


    /*枠線*/
    border: 5px solid red;

    /*下線*/
    border-bottom: 1px solid #333;

    /*ボーダーの角を丸くする, 半径を指定*/
    border-radius: 10px;

余白

padding：ボーダーの内側の余白
margin：ボーダーの外側の余白


    /*内側*/
    padding: 10px(all);
    padding: 20px(top, bottom) 40px(right, left);

    /*外側*/
    margin: 20px(top) 40px(right) 10px(bottom) 30px(left);

配置



li{
    /*リストのマークをなくす*/
    list-style: none;

    /*ブロック要素を左(右)から順に横並びにする*/
    float: left; /*right*/
}

/*floatプロパティを解除*/
.clear{
    clear: left; /*right*/
}


    /*中央寄せ*/
    margin: auto 0;        /*ブロック要素*/

    text-align: center;    /*インライン, インラインブロック要素*/

	ブロック要素(`<div>タグ`)	インラインブロック要素	インライン要素(`<a>タグ`)
width, height	指定可	指定可	指定不可
margin, padding	指定可	指定可	左右のみ指定可
配置	縦並び	横並び	横並び


    /*displayプロパティで変更*/
    display: block; /*inline-block, inline*/

    /*非表示*/
    display: none;

親子関係


.child{
    position: absolute;   /*サイトの左上を基準*/
    top: 20px;
    left: 15px;
}


.child{
    position: absolute;   /*parentセレクタの左上を基準*/
    top: 20px;
    left: 15px;
}

.parent{
    position: relative;
}

影


    box-shadow: 10px(水平方向) 10px(垂直方向) #000000;

    /*影を消す*/
    box-shadow: none;

カーソル


    cursor: text; /*pointer, default*/

固定


.fixed-img{
    position: fixed;
    top: 10px;
    left: 40px;
}

重なりの順序


    /*値が大きいほど上に表示*/
    z-index: 10;

メディアクエリ


@media(max-width: 1000px){
    h1{
        color: red;
    }
}

レイアウト管理


/*border-boxにすることで、要素の幅を width + border + padding に*/
*{
    box-sizing: border-box;
}

記事の制作者：
https://twitter.com/amber_seia