[Progate学習memo] HTML & CSS 初級～上級編

Progateは月額980円(税込み)でプログラミングを学べるサービス (無料会員でも一部サービスを利用できる。)
[Progate レッスン一覧](https://prog-8.com/languages)
# HTML
- タグ：<>で囲まれたもの

### 見出し
```html

<!-- h1 ~ h6 -->
<h1>これは見出しです</h1>
```
### 段落
```html

<p>これは段落です</p>
```
### リンク
```html

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

<!-- <ol>:数字, <ul>:黒点 -->
<ol>  
    <li>HTML&CSS
    <li>Python
    <li>JavaScript
<ol>
```
### 画像
```html

<!-- src属性に画像のURLを張る -->
<img src="https:...">
```
### 部分指定
```html

<span>ここ</span>が要点です
```
### クラス付け
```html

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

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

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

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

<!-- ボタン* -->
<input type="submit" value="保存">
```
### Font Awesome
```html
<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の全体構造
```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
- セレクタ：指定対象
- プロパティ：変更項目

### セレクタの種類
```css

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

}
```
### セレクタの状態
```css

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

}

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

}
```
```css

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

div:hover{
    background-color: red;
}
```
### 文字
``` css

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

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

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

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

    /*スタイル*/
    font-weight: normal; /*bold*/
```
### 大きさ
```css

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

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

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

    /*画面幅の制限*/
    max-width: 1170px;
    width: 100%;
```
### 背景
```css

    /*色*/
    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;
```
### ボーダー
```css

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

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

    /*ボーダーの角を丸くする, 半径を指定*/
    border-radius: 10px;
```
### 余白
- padding：ボーダーの内側の余白
- margin：ボーダーの外側の余白

```css

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

    /*外側*/
    margin: 20px(top) 40px(right) 10px(bottom) 30px(left);
```
### 配置
```css


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

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

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

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

    text-align: center;    /*インライン, インラインブロック要素*/
```
|   | ブロック要素(`<div>タグ`) | インラインブロック要素 | インライン要素(`<a>タグ`) |
|:-:|:-:|:-:|:-:|
| width, height | <font color="green">指定可</font> | <font color="green">指定可</font> | <font color="orange">指定不可</font> |
| margin, padding | <font color="green">指定可</font> | <font color="green">指定可</font> | <font color="red">左右のみ指定可</font> |
| 配置 | 縦並び | 横並び | 横並び |
```css

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

    /*非表示*/
    display: none;
```
### 親子関係
```css

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

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

.parent{
    position: relative;
}
```
#### 影
```css

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

    /*影を消す*/
    box-shadow: none;
```
#### カーソル
```css

    cursor: text; /*pointer, default*/
```
#### 固定
```css

.fixed-img{
    position: fixed;
    top: 10px;
    left: 40px;
}
```
#### 重なりの順序
```css

    /*値が大きいほど上に表示*/
    z-index: 10;
```
### メディアクエリ
```css

@media(max-width: 1000px){
    h1{
        color: red;
    }
}
```
#### レイアウト管理
```css

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

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