きのこのぐうたら日記

人生の楽しみの８割は睡眠と食事にあると思う。

FJORD HTML＆CSS学習内容まとめ＆雑感

fjord

〜2020/12/4までの進捗(12日間)

挨拶

　物凄く短い初めのブログを書いてから早くも2週間経ってしまったきのこです。改めてアカウント見ると苦肉の策で2aとか適当なものをつけましたが今思えばMarkⅡとかにしてはっちゃけておけばよかったです。MarkⅡといえばガンダムですよね、あんまり詳しくないですけど。とにかく脊髄反射で物を書いておりますのでお目溢しをお願いします。
　きのこという名前をつけておりますがきのこ自体は程々に好きな程度、なんなら山ではなく里の者ですどうぞよろしくお願いします。でも美味しけりゃなんでもいいよね。

学習内容

私が私のためにこんなの使ったな~~と思ったのを適当にまとめていく感じです。雑な上に誤りも有ると思うので見てくださる方はあまり真剣に見ないでください。

HTML

骨格のようなもの。基本形（適当）は以下になる

#main_nav CSS

<!DOCTYPE html>
<html lang="ja">
    
  <head>
    <meta charset="utf-8"/>
    <title>＊＊＊＊＊</title>
  </head>
    
  <body>
    <article>
      <h1>＊＊＊＊＊</h1>
      <p>＊＊＊＊＊
        <br>＊＊＊＊＊＊＊
      </p>
        
      <section>
        <h2>＊＊＊＊</h2>
        <p>＊＊＊＊＊</p>
      </section>
        
      <section>
        <h2>＊＊＊＊＊</h2>
        <ul>
          <li>＊＊＊＊</li>
          <li>＊＊＊＊＊</li>
          <li>＊＊＊＊＊</li>
        </ul>
      </section>

      <section>
        <h2>＊＊＊</h2>
        <ol>
          <li>＊＊＊＊</li>
          <li>＊＊＊＊＊</li>
          <li>＊＊＊＊＊</li>
        </ol>
      </section>          
    </article>
      
    <section>
     <h2>＊＊＊＊＊</h2>
      <p>＊＊＊＊＊
        <br>＊＊＊＊＊＊＊
      </p>
    </section>
  </body>
</html>

  • !DOCTYPE html 文書の一番初めに書くもの。ブラウザに文書がどういった仕様で書かれているのか宣言するものでとりあえず入れておけばいい。
  • html lang="ja"　htmlはそのまんまでその文書がHTML文書であることを指定するタグ、DOCTYPE宣言以外はここに入れる。lang="ja"は日本語を使っているということ。
  • head　文書自身に関する情報はこちらに入る。例えばCSSをHTMLに打ち込む場合はここにstyleタグを入れて書き込んでいく。titleなどもそうで検索サイトの結果表示などに使われる。
  • meta charset="utf-8"/　metaはページに関するさまざまな情報を記述するもの。charsetは文書の文字エンコーディングを指定。とりあえずこれも大体書いておけばいい。
  • body　文書の本文。メイン。
  • article 範囲を明確にするための要素(章・節・項など)であるセクショニング要素の一つ。こちらはその範囲がセクションの中で独立しており、それだけで完結していることを示す要素。いまいちわりにくいけどブログのエントリ的な。 -section　セクショニング要素の一つ。その範囲が一般的な章・節・項などであることを示す要素。入れ子構造を作れる。
  • h○　○の中には数字が入る。数字は入れ子構造に合わせて振る。
  • p 段落を示す。この段落というのは意味のまとまりのこと。 brを差し込むことで改行される。
  • ul li``ol li　ulは列挙型の箇条書き。olは順序付きの箇条書き。liはリストの項目。

ごく簡単なHTMLの説明 基本的に困ったら一旦これを見ておけばいい。

The W3C Markup Validation Service HTMLを使用する際は必ずこちらでエラーが出ないかチェックする。

Markdown

Markdown（マークダウン）は、文章の書き方です。デジタル文書を活用する方法として考案されました。

とのことです。軽量マークアップ言語とも呼ばれているそうでその名の通りHTMLよりもとっても楽。
日報でも使っていますがメチャクチャ簡単で使いやすい。何ならこのブログも一応マークダウンで書いてます。なのになんとなく説明が難しい。あとめんどい。
とりあえずこちらを参考にしておけばだいたい良いと思う。

CSS　HTML&CSS入門：イチからWebデザインを習得する講座

　今回のブログはこれがメインです。感想を言いますと、とても長かったです。HTMLはそんなに難しくないけどCSSは一生物という話を聞いたことがあったのですが、やることが多くなかなか次の段階に進めないのが地味に辛かった。多分勉強をしていけばもっと色々ある、根性なしはクールに去るぜ。
　タイトルにリンクを貼ったサルカワさんの33STEPを勉強しました、なぜわざわざ貼ったって大半がここでの勉強だったからです。この内容をまとめるの嫌だなぁと尻込みしてましたが実際2日かかりました。でもしょうがない貯めたツケだから。

　 CSSとは、ウェブページのデザインやレイアウトなどを変えていくコンピュータ言語です。HTMLが骨ならこっち肉です。贅肉にはならんようにしたい。

とりあえず学習内容の総括でこちらのサイトを利用させていただきます。

HTML コード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="page">
        <header>
            <div id="header_inner">
                <div id="header_logo">
                    <img src="https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/6432837/picture_pc_9a06a019fe451a6c54a064d465d927c5.jpg">
                </div>
                <div id="header_contact">
                    <a href="#" id="header_contact_inner">
                        <p>お問い合わせ</p>
                    </a>
                </div>
                <div id="header_text">
                    <p>TEL　00-0000-0000<br>
                    (受付時間　平日　9:00～17:00)</p>
                </div>
            </div>
        </header>
        <div id="main_image">
            <div id="main_image_inner">
                <h1>キャッチコピー</h1>
            </div>
        </div>
        <main>
            <section id="section01">
                <div class="scroll">
                    <h2>テキストテキストテキスト</h2>
                </div>
                <nav>
                    <ul id="main_nav">
                        <li><a href="#div01">1.テキストテキ<br>ストテキスト</a></li>
                        <li><a href="#div03">3.テキストテキ<br>ストテキスト</a></li>
                        <li><a href="#div02">2.テキストテキ<br>ストテキスト</a></li>
                    </ul>
                </nav>
                <div class="contents" id="div01">
                    <div class="left" id="photo01">
                    </div>
                    <div class="right text">
                        <h4>1.テキストテキストテキストテキスト</h4>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="contents" id="div02">
                    <div class="left text">
                        <h4>2.テキストテキストテキストテキスト</h4>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                    <div class="right" id="photo02">
                    </div>
                </div>
                <div class="contents" id="div03">
                    <div class="left" id="photo03">
                    </div>
                    <div class="right text">
                        <h4>3.テキストテキストテキストテキスト</h4>
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="main_contact">
                    <div class="contact_left main_contact_inner">
                        <div class="contact_left_inner">
                            <p>TEL 00-0000-0000<br>
                            <span>(受付時間 平日 9:00～17:00)</span></p>
                        </div>
                    </div>
                    <div class="contact_right main_contact_inner">
                        <a href="#" class="contact_right_inner">
                            <p>問い合わせボタン</p>
                        </a>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <p>&copy; samplesamplesamplesamplesample</p>
        </footer>
    </div>
</body>
</html>

CSS コード

html,body,div,span,iframe,h1,h2,h3,h4,h5,p,a,img,ul,li,table,tr,th,td,tbody,footer,header,main,nav,section {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    list-style: none;
    text-decoration: none;
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body {
    width: 100%;
}
#header_inner,.main_contact,#section02_inner,#company {
    width: 960px;
    margin: 0 auto;
}
#header_inner {
    height: 85px;
    position: relative;
}
#header_logo,#header_contact,#header_text {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
#header_logo {
    width: 194px;
    height: 40px;
    left: 19px;
}
#header_contact {
    width: 155px;
    height: 51px;
    right: 0;}
#header_contact_inner {
    display: block;
    width: 102px;
    height: 24px;
    text-align: center;
    padding: 14px 26px 13px 27px;
    background-color: #ff0600;
    transition: 0.4s;
}
#header_contact_inner:hover {
    transform: scale(1.1,1.1);
}
#header_contact_inner p {
    color: #fff;
}
#header_text {
    width: 243px;
    height: 29px;
    right: 155px;
}
#header_text p {
    font-size: 0.9rem;
}
#main_image {
    display: table;
    width: 100%;
    height: 482px;
    background-size: cover;
}
#main_image_inner {
    width: 100%;
    height: 482px;
    position: relative;
    background: url(https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/6432841/picture_pc_e9cd48501e8ad5f03a13bfefcf9e1f19.jpg) no-repeat;
    background-size:cover;
}
h1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 500px;
    height: 85px;
    margin: auto;
    color: #ccc;
    font-size: 4.3rem;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.scroll {
    height: 87px;
    width: 100%;
    background-color: #aaa;
    position: relative;
    display: table;
}
.scroll:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    bottom: -14px;
    border-top: 43px solid #aaa;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}
h2 {
    color: #fff;
    font-size: 1.9rem;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
nav {
    height: 396px;
    width: 100%;
    margin: 0 auto;
}
#main_nav {
    width: 67.5%;
    min-width: 687px;
    height: 396px;
    overflow: hidden;
    margin: 0 auto;
    padding: 88px 0;
}
#main_nav li {
    float: left;
    height: 225px;
    width: 225px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}
#main_nav li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 22px;
    right: 0;
    left: 0;
    width: 21px;
    height: 21px;
    margin: auto;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    transform: rotate(45deg);
}
#main_nav li:last-of-type {
    float: none;
    margin: 0 auto;
}
#main_nav li:nth-of-type(2) {
    float: right;
}
#main_nav a {
    color: #000;
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 50%;
    text-align: center;
    padding: 83px 0 100px;
}
#div03 {
    margin-bottom: 100px;
}
.contents {
    height: 400px;
    overflow: hidden;
}
.left {
    float: left;
    height: 400px;
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
#photo01 {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/6432843/picture_pc_0c274de1b76f4063c7ce088be3b57004.jpg);
}
#photo02 {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/6432845/picture_pc_3d21e88b8ee49951e3c0931173a8f8ed.jpg);
}
#photo03 {
    background-image: url(https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/6432848/picture_pc_c61a50ca0b2335d65a46645b73a2a480.jpg);
}
.right {
    float: right;
    width: 50%;
    height: 400px;
}
.text {
    background-color: #aaa;
}
.contents p,h4 {
    margin: 30px 120px 0 21px;
    color: #fff;
}
h4 {
    font-size: 1.25rem;
}
.main_contact {
    height: 163px;
    background-color: #aaa;
    margin-bottom: 100px;
    overflow: hidden;
}
.main_contact_inner {
    width: 50%;
    height: 163px;
    position: relative;
}
.contact_left {
    float: left;
}
.contact_left_inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 307px;
    height: 53px;
    margin: auto;
    overflow: hidden;
}
.contact_left_inner img {
    float: left;
}
.contact_left_inner p {
    float: right;
    font-size: 1.4rem;
    line-height: 20px;
    margin: 9px 0 5px;
}
.contact_left_inner span {
    font-size: 0.9rem;
}
.contact_right {
    float: right;
}
.contact_right_inner {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 243px;
    height: 33px;
    margin: auto;
    padding: 25px 85px 25px 41px;
    background-color: #ff0600;
    transition: 0.4s;
}
.contact_right_inner:hover {
    transform: scale(1.1,1.1);
}
.contact_right p {
    float: right;
    color: #fff;
    font-size: 1.3rem;
}
footer {
    height: 93px;
    background-color: #aaa;
}
footer p {
    margin-left: 119px;
    font-size: 0.75rem;
    line-height: 93px;
}

完成形 https://magazine.krowl.jp/wordpress/wp-content/uploads/2018/07/2.jpg
（めちゃくちゃ貼ってますが一部拝借するだけで全部使うわけではないです。）

リセットCSS

CSSの一番初めに書かれる部分。ブラウザごとにデフォルトのCSSは異なるため予め差異を防ぐためCSSで各種設定を整えておく。

HTML

<head>
<meta charset="utf-8">
<title>sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

リセットCSS

html,body,div,span,iframe,h1,h2,h3,h4,h5,p,a,img,ul,li,table,tr,th,td,tbody,footer,header,main,nav,section {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    list-style: none;
    text-decoration: none;
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

  • セレクタ{プロパディ:値}が基本形だが複数のセレクタで同じ処理がしたい場合は上のように,で区切っていけばいい。また、特定のセレクタ内の特定のpタグだけ指定したいといった場合
    セレクタ p{}とすればよい。
  • head内の<link href="css/style.css" rel="stylesheet" type="text/css">は外部CSSファイルをHTMLに適用させるもの。hrefにファイル名を入れる。
  • font-family フォントを決めるもの。複数のフォントが書かれているのはブラウザによって使えるフォントが違うため。 `上から優先度が高く、英語フォントを使いたいならは前に並べる。日本語フォントは英語も＋で使えるので。一番最後は総称フォントと指定する。 Font-familyメーカー：標準フォント一覧からサクッと指定

枠の作り方

CSS

body {
    width: 100%;
}
#header_inner,.main_contact,#section02_inner,#company {
    width: 960px;
    margin: 0 auto;
}
#header_inner {
    height: 85px;
    position: relative;
}
...
#main_image {
    display: table;
    width: 100%;
    height: 482px;
    background-size: cover;
}

...
footer {
    height: 93px;
    background-color: #aaa;
}

親要素と子要素について
　要素とは<>~</>この塊のこと。要素（aとします）の中に更に要素があれば（bとします）aは親要素と言えるしbは子要素となる。bの中に更に要素があればbはその要素に対して親要素と言えるわけです。
　この中で親要素と言えるのはbodyだけで、bodyは最も大きな要素なのですべての要素の親要素と言える。上記のコードにある#header_inner #main_image footerはそれぞれ干渉しあわない独立した要素となっていて、bodyが第一階層とするならこれらはそれぞれ第二階層となり、大きい要素なので子要素がたくさん抱えてたりもする。むしろbodyというパイを切り合っている関係だと勝手に解釈してます。

  • width widthの値は%、px、初期値のautoが存在する。autoはwidthを変更しなければ自動で親要素と同じ大きさになる。pxは要素の大きさを直接決めることができるが注意点があり、pxの値が親要素を上回らないようにしなければならない。%は親要素の幅に対する比率であり均等に配置しやすい。ただしautoと違い後述するpaddingを含まないので注意が必要。
  • height値はwidthと同じ。ただしautoは指定がなければ横いっぱいに広がるwidthと違い、文字や画像などの要素の大きさに合わせて変化する。また、widthと違い親要素に大きさを指定されていなければ％を使うことができない。calc()
  • min-widthとmax-width　 要素がこれ以上小さくならない幅と要素がこれ以上は大きくならない幅を設定できる。小さい画面や大きい画面を想定して使う。なおheightでもできるがあまり使わないらしい。
  • display:要素の表示形式を決めるもの。 また、タグごとに初期値が決められている。
    block: 幅と高さが設定できる。縦に並ぶ。inline要素を中に入れることができる。 ｛p、div、ul、hなど｝
    inline: 幅と高さが設定できない。横に並ぶ。margin,paddingが使いにくい。block要素を中に入れることはできない。 ｛a、span、imgなど｝
    inline-block:幅と高さが設定できる。横に並ぶ。
    flex、float:後述
  • padding　要素の内側の余白 　margin　要素の外側の余白
    両者とも左右の余白に対しては％を使うこともあるが上下に関しては殆どない。paddingは背景色が指定されている場合塗られる。marginはmargin:0 auto;で中央に配置などもできる。またmargin同士は並ぶと相殺され、大きいほうが反映される。
  • position 要素の位置を決めるプロパディ。初期値はstaticだが位置とz-indexが変えられない。
    relative：現在の位置を基準に相対的な位置を決める。
    absolute：親要素を基準に絶対的な位置を決める。親要素にrelativeを指定する。
    fixed：画面のきまった位置に固定する。
    top bottom left rightで具体的な位置を数字で調整

枠の装飾

#main_nav HTML

<nav>
    <ul id="main_nav">
        <li><a href="#div01">1.テキストテキ<br>ストテキスト</a></li>
        <li><a href="#div03">3.テキストテキ<br>ストテキスト</a></li>
        <li><a href="#div02">2.テキストテキ<br>ストテキスト</a></li>
    </ul>
</nav>

#main_nav CSS

#main_nav {
    width: 67.5%;
    min-width: 687px;
    height: 396px;
    overflow: hidden;
    margin: 0 auto;
    padding: 88px 0;
}
#main_nav li {
    float: left;
    height: 225px;
    width: 225px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}
#main_nav li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 22px;
    right: 0;
    left: 0;
    width: 21px;
    height: 21px;
    margin: auto;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    transform: rotate(45deg);
}
#main_nav li:last-of-type {
    float: none;
    margin: 0 auto;
}
#main_nav li:nth-of-type(2) {
    float: right;
}

  • overflow 要素のボックスからはみ出た部分をどう扱うか指定するもの。visibleが初期値ではみ出たままになる。
    hidden：はみ出た部分が隠れ非表示になる。
    scroll：はみ出た部分が隠れてスクロールできる状態になる 。
    (overflow-xとoverflow-y ｘが横、ｙが縦軸のはみ出た部分を扱う。)
    auto : ブラウザにより表示が変わる（ほとんどscrollと同じ状態に）
  • :beforeと:after
    疑似要素と呼ばれるものでそれぞれの要素に一つずつしか作れない。要素の直前と直後にcontentに入れた言葉が挿入される。””を入れることで空白にできる。absoluteを使うことで好きな位置に配置でき、簡単なアイコンを作るのにも便利。
  • border 指定したときpaddingの周りに線が引かれる。border:線の種類　px 色；といった形で書かれる。上だけ、左だけ線を引くといったことも可能。borderは％で指定することはできない。
    *:calc() : ％とpxで計算できる物。加算, 減算,乗算,除算が可能。flexやfloatでレイアウトを決めているときも場合によっては便利。

  • :last-child ul li ol liで特に使われる○番目の要素だけに適用する指定。last-childは最後の要素に使われる。
    :first-child 最初の要素　:nth-child(odd) 奇数の要素 :nth-child(even) 偶数の要素 :nth-child(n*2) n番目の要素

  • border-radius 要素の四隅の角を丸めることができる。borderを指定していなくても大丈夫。正円ならば50％と指定すればいいが、四隅それぞれを指定したいならtop-left top-right bottom-right bottom-leftを指定すればいい。

  • float 要素が横並びになる。left、right、noneが指定できるがどんどん使われなくなっているしflexのほうが楽で良いらしい。
  • flex ウェブページのレイアウト目的としたもの。指定すれば横並びになるが他にもjustify-content:などを指定することでレイアウトを変化させることができる。種類が多いので以下を参考に。
    日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
    (横並びにするだけならinline-blockでもいい。空白をなくしたいなら親要素にfont-size:0;を指定するなど)
  • background 色、画像など、背景に関するすべてのスタイルを一括で設定できる。でも背景色の設定ばかりに使う。色とは少し違うがtransitionという透明にできるものもある。
    【CSS】background-colorとbackgroundの違い | 開発備忘録＆ふと思ったこと
  • linear-gradient : グラデーションを作ることができ、linear-gradient (方向　開始色　終了色)と指定することになる。ただしこの中に色指定を追加させたり%で色の位置を指定することもできる。(ベンダープレフィックスについては省きます)
  • radial-gradient : 円形グラデーション。 linear-gradientとほぼ一緒。 rgba()を使って色指定するなら下が便利
    これは便利！Mac標準カラーピッカーアプリ「DigitalColor Meter」 | きになるnet
  • box-shadow　要素に影をつける。box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色　(inset); 色はsilverやgrayでうまく行かないならrgba(255, 255, 255, 0.6)やrgba(0, 0, 0, 0.6)を使うと良い。255が光、0が影のようになる。また0.6の部分は0.1〜1.0までで調整すると良い。
  • z-index 要素の重なり順を指定する。小数点は不可、position: staticには反映されない。
  • :hover　要素が特定の状態にある場合にスタイルを指定できる擬似クラス。カーソルが合わさった状態で変化する。

文章の装飾

#main_nav CSS

h1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 500px;
    height: 85px;
    margin: auto;
    color: #ccc;
    font-size: 4.3rem;
    text-align: center;
    display: table-cell;
    vertical-align: middle;

  • color 文字の色を指定。
  • font-size　フォントサイズの指定。pxかem(現在のフォントサイズに対する倍率)を使う。
  • font-weight 太さを指定する。boldで太字になる。細字はフォントが対応してない場合が多いので考えなくていい。
  • font-style　italicを使えば斜体になる。
  • text-align　文字を寄せる方向。初期値はleft、他にcenter、rightがある。
  • line-height　行間を変える。縦センタリングをしたい場合、親要素のheightと同じ値にすれば中央に来る。ただし2文以上だと勝手が変わる。
  • text-decoration　underlineで下線を引く。リンクの下線を消したい場合はこれをnoneにする。
  • text-shadow　文章の影の指定。text-shadow: 右の長さ 下の長さ ぼやけ 色　で指定できる。box-shadowと概ね同じ。
  • opacity　透明度、1.0で完全不透明で0で完全透明になる。
  • transition　変化を滑らかにするためのもの、だいたいホバー時に使われる。0.5sなら0.5秒間で変化していくことになる。
  • :hover　要素が特定の状態にある場合にスタイルを指定できる擬似クラス。カーソルが合わさった状態で変化する。

  • white-space HTMLコード内の半角スペース、タブ、改行をブラウザでどのように表示させるかを決めるもの
    　normal　初期値。連続した改行や半角スペースは1つの空白にまとめられ、文末の半角スペースや改行 tabなどは基本的に無視される。要素の右端で行が折り返す。
    　nowrap normalとの違いは、行は折り返されないこと
    　pre-line　連続した半角スペースやtabは1つの空白にまとめられ、HTMLコード内の改行は反映される。
    　pre 改行や半角スペースがブラウザ表示にそのまま反映され、自動で行が折り返されることはない。
    　pre-wrap preとの違いは、要素の端で行が折り返されること

  • 画像 画像を入れること自体は以下のようにHTMLに直接書きます。

<img src="img. jpg" alt="****">

　サイズを変更したい場合％で指定すれば縦横比を保ったまま変更できる。ただしpxでサイズを揃えたりborder-radiusを使う場合注意が必要。縦横比が崩れてしまう。
object-fit　コンテナに対して画像や動画をどのように表示するかを設定し、指定した範囲に画像を合わせたりトリミングすることができる。 　　:cover　コンテナに余白が出ないよう縦横比を維持し、全体に大きさを合わせて縦横中央に配置。はみ出る部分はトリミングされる。
　　 :contain 縦横比を維持し、コンテナからはみ出さないように合わせる。
　　 :none 縦横中央に配置します。
object-position　画像の位置を変更できる。トリミング位置を変えたい場合調整ができる。

( 疑似要素に画像を入れた場合サイズの変更が効かない。変えたい場合は背景画像にすればいい。)

  • リンク
<a href="https://....../" target="_blank">サルワカへジャンプ！</a>

リンクもHTMLに書き込む。 target="_blank"は別タブでページを開くためのもの。

(a):visited　訪問済みのリンクボタンを変更することができる。 　

リンク

以下に関しては直接サルワカさんを見たほうが良いと思うのでリンクつなげました。
パンくずリスト アイコンの作り方 head内に書くべきタグ

雑な話

　これより下はまじで適当なことしか書いてないので本気で見なくていいです。

学習時間

11/22 　6時間 　　　　　　　12/ 1　5時間30分
11/23　6時間30分 　　　　　12/ 2　5時間45分
11/24　7時間30分 　　　　　12/ 3　3時間45分
11/25　6時間30分 　　　　　12/ 4　4時間
11/26　3時間
11/27　　ー
11/28　1時間45分
11/29　　―
11/30　3時間

計　53時間15分

体調不良

私の当初の目標は1日6時間は勉強することでした。受験生は8時間位勉強するのだし余裕なのではと思っていたのです。実際4日間は続けましたがそれ以降完全にダウン、体調が芳しくない状況になったため休んでいました。
11/24の段階で頭の重さ11/25には動悸などが起こっていましたが、普通に続行。寝れば治ると思ってましたが普通に悪化、26日も頑張ろうとするもこれは無理だと断念。28日には随分と良くなった気がして頑張ろうかと起き上がった瞬間に吐き気が。中身は実際には出ませんでしたが起き上がるとえずくえずく。この段階でようやく原因特定に腰を上げ、眼精疲労か自律神経の問題かに落ち着きました。それまでは頑なに睡眠不足と思ってました、だって勉強したの4日だけですよ。
首周りや頭を温めると具合がほどほど良くなり、翌日は普通に調子が良かったのですが所要のため移動する必要があり、車に揺られながら携帯弄っていた結果また具合悪くなりまして大事を取って一日休みました。 11/30からは特に問題なくできています。 とりあえず私に長時間の勉強は無理となり、今は4時間以上6時間未満を目処に勉強しています。ただダウンしてからちょっとキャパに余裕ができた気も、あと1時間30分ごとに休憩入れるの辞めました。休みたい時に休んでいます。今回の事で改めて思ったのですがどこでも3秒で眠れるのび太くんはやはり天才。

フィヨルドの感想

今のところ一番これいいなあと思うシステムが日報で(slackとか他の機能をまだ使ってないだけですが)、一番苦手なのも日報です。
流石に多少は慣れてきましたが、私は割と自分の言葉をアウトプットするのが苦手な質でして。日報を提出するたびに自らの恥部を自ら晒しているような感覚になり穴に埋まりたくなります。SNSでなにか投稿したあとに何故か死ぬほど落ち込むあれにとても良く似ています、誰にも見ないで欲しいですよね。あと勉強終わりに書くと本当に疲れてろくなことかけないので合間合間に書いたほうが良いですね。なかなかうまくできないですけど。
でも一番いいのが日報と言ったとおりめちゃくちゃいいシステムだと思うんです。進捗によってアドバイスをいただけますし、どなたかに見られているのでサボる発想が出てこない。メンター方はお仕事もなさっているのにチェックしてくださるのでありがたいです。ただ私の足らないが故に下手なことを書いたあとに、めちゃくちゃ時間を取らせてしまったであろう回答をいただくと罪悪感が半端ないので本当に気をつけたい。文章力が欲しい。
　あとこれは勉強の感想なのですが、座学の間はなかなか先へ進めないのでヤキモキしますが提出物を書いている間は楽しくて時間はすぐに過ぎます。やっぱり自分でなにかを形にするのは楽しいですね。

ブログを書いてみた感想

　どこの項目になんの説明を入れるかで悩みました。transitionとかは別に文章専用とかではないはず今からでも変えたほうが良いのかとかいまだに思ってますけどだいたい画像とかリンクに使う印象だからもうそのまんまです。そういうのがちらほらあります。
　はてなブログさんに関してはデザインを簡単に変更できてちょっとびっくり。でもCSSやったばかりだったから自分で書かねばならんのかと思っただけでフィヨルド始める前なら確実にふ〜んで済ませてました。あと2日以上かけて書きましたがこれをもう一度は無理です。このブログ自体粗だらけですがもうやりたくない。今後は1週間か10日ごとに書こうと思います。期間は一日以内で。