ProgateでHTML & CSSを学習

07.20

この記事は15分で読めます

自分用メモ

随時追記していく

※参考：Progateとは？魅力や欠点、学習の順序や心得など

参考にしたい記事まとめ


※参考：HTMLとは？head要素やbody要素、属性について解説
※参考：HTMLのhead要素とbody要素の記述について
※参考：HTMLで文字に線を引くタグについて

※参考：CSSの基礎知識。セレクタ、プロパティ、値とは？
※参考：CSSのレイアウトについて
※参考：ブロックレベル要素、インライン要素、インラインブロック要素のまとめ

HTML & CSS 初級編

 Progate 
Progate(プロゲート) | Learn to code, learn to be creative.
https://prog-8.com/languages/html
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

①HTMLに触れてみよう

・見出しと段落
・リンク
・画像
・リスト


プログラミングの世界へようこそ


Progate



は「リンク」という意味がある

HTMLでは、テキストに「タグ」と呼ばれる印を付ける
テキストをタグで囲むことによって、
テキストが「見出し」や「リンク」という意味を持つ事になる


★段落を作成する

Progateとは

オンラインプログラミング学習サービスです



段落を表すのは

要素

のpは「paragraph（段落）」の略

要素や

要素で囲んだテキストは改行されて表示される


Progate


リンクを作成するには要素を用いる
テキストをタグで囲むことで、リンクを作る事ができる


Progate


要素にリンクの飛び先を指定するには、href属性を追加する必要がある
のように書き、url部分にリンク先のURLを指定することで、
そのページへのリンクを作る事ができる




Progate




HTMLでは、hrefのような属性が数多くある
これらは「開始タグ」の中に記述する
値を指定する際は、ダブルクォーテーション（”）を忘れないように注意する





画像の表示には要素を用いる
のように、src属性のurlの部分に
画像のリンクを指定することで、画像が表示される
要素はテキストで囲むことがないので、終了タグは不要



★リストを作成する


  • HTML
  • PHP
  • Ruby



リストを作るには
  • 要素を用いる
    箇条書したいテキストをそれぞれ
  • タグで囲むことで、リストを作る事ができる


    入れ子構造がある場合は、インデント（字下げ）をする
    インデントは必須ではないが、インデントをすることで
    入れ子構造が複雑になっても親子関係がわかりやすくなる


    ②CSSに触れてみよう

    ・文字の色
    ・文字の大きさと種類
    ・高さ、幅、背景の色
    ・タグに名前をつける



    ★文字の色（CSS）
    ・CSSは、HTMLの要素に対して色、大きさ、配置などを指定して
    　ページをデザインするための言語



    Progate



    h1 {
    color: red;
    }



    セレクタ：どこの（h1要素の）
    プロパティ：何を（colorを）
    値：どうする（redにする）



    これはh1です

    これはpです



    H1 {
    color: #ff0000;
    }



    P {
    color: #0000ff;
    }


    「color: #ff0000;」のように、１６進数のカラーコードで色を指定する
    （主要な色であれば、redなどのように指定できる）
    →カラーコードは以下を参照
    https://www.colordic.org/
    https://html-color-codes.info/japanese/



    CSSを書くときは、インデント（字下げ）をする
    プロパティの末尾にはコロン（:）を、
    行末にはセミコロン（;）をつける必要がある（どの行末にもセミコロンは必要）



    ★文字の大きさを変える


    これはh1です

    これはpです



    H1 {
    color: #ff0000;
    font-size: 10px;
    }

    P {
    color: #0000ff;
    font-size: 40px;
    }


    文字の大きさを指定するにはfont-sizeプロパティを用いる
    Font-sizeは、px（ピクセル）という単位を用いて指定する：書き忘れないように注意する


    Hello World

    Hello World


    H1 {
    font-family: selif;
    }

    P {
    font-family: “Avenir Next”;
    }



    「font-familyプロパティ」を用いると、フォントの種類を指定できる
    「font-family: フォント名;」とすることで、要素にそのフォントを適用できる
    フォント名にスペースがある場合は、ダブルクォーテーションで囲む


    Font-family: selif;
    Font-family: YuMincho;

    Font-family: sans-serif;
    Font-family: “Lucida Grande”;



    ★背景色を変える（background-colorプロパティ）


    これはh1です

    これはpです





    H1 {
    background-color: #dddddd;
    }

    p {
    background-color: #ffd800;
    }




    背景色を変えるにはbackground-colorプロパティを用いる
    色の指定の方法はcolorプロパティと同じ

    「#dddddd」のように同じ値が続く場合は「#ddd」と省略できる




    ★横幅、高さを変える


    にんじゃわんこ



    H1 {
    width: 500px;
    height: 80px;
    background-color: #9de8ea;
    }

    Img {
    width: 500px;
    height: 200px;
    }



    要素の横幅、高さを変更したい時には、
    それぞれwidthプロパティ、heightプロパティを用いる

    Width, height共にpxで指定する：pxを書き忘れないように注意！







    • HTML
    • PHP
    • Ruby



    li{
    color: red;
    }




  • 要素が複数ある場合に、CSSを指定すると、全てのリスト要素が赤くなるが、
    1つのリスト要素だけを赤くするにはどうすればいいのか？






    • HTML
    • PHP
    • Ruby



    .selected {
    color: red;
    }




    要素はclasを使って名前をつける事ができる
    Classをつけることにより、それぞれの要素を識別し、別のCSSを適用する事ができる
    Class名でCSSを指定する場合、先頭にドット（.）が必要なので注意



    • HTML
    • PHP
    • Ruby



    .selected {
    color: red;
    }



    複数の要素に同じclassをつけた場合、これら全てに同じCSSが適用される



    • HTML
    • PHP
    • Ruby


    .selected {
    color: red;
    }



    「selected」というclass名がついている全てにHTML要素に
    同じCSSが適用される



    ★classにCSSを指定する際の注意点


    li{
    color: red;
    }



    .selected {
    color: blue;
    }



    ClassにCSSを指定する際に、先頭のドット（.）を忘れてしまうとCSSが適用されない
    Classにはドットが必要で、タグの場合はドットが必要ない：これ重要



    ③レイアウトを作ろう

    ・HTMLの全体構造
    ・全体のレイアウト



    ★HTMLの全体構造







    Progateとは

    オンラインプログラミング学習サービスです






    実際のHTMLファイルには、決められた型を書いていく必要がある
    要素の中に要素と要素が必要

    要素にはページに関する情報、
    要素には実際に表示したい内容を書く

    の部分は「DOCTYPE宣言」と呼ばれるもので、
    HTMLのバージョンを宣言するためのもの

    今回は最新バージョンのHTML5を使うためを使用する


    要素には、Webページの設定に関する情報を書いていく
    この内容はWebページには表示されない



    ★要素の中身





    Progate



    要素の中には、以下の３つを入れる
    これらは定型文のようなもの
    ①文字コード：
    ②ページタイトル：Progate
    ③CSSの読み込み：


    ①文字コードを指定することで、ページの文字化けを防ぐ事ができる
    「UTF-8」は、HTMLで推奨されている文字コード

    ②＜title＞要素で指定されたタイトルは、ブラウザのタブ上に現れる

    ③HTMLからCSSを読み込むにはを用いる
    のように、
    Href属性で読み込むCSSファイルを指定する
    Progate上では「「stylesheet.css」で記述したCSSが
    結果に反映されていたが、本来はHTMLの方で読み込む必要がある





    ★レイアウト
    ①ヘッダー：ページ上部のメニュー
    ②メイン：ページの主なコンテンツ
    ③フッター：ページ下部のメニュー


    「レイアウト」は、Webサイトを作る上で最も重要な部分








    レイアウトは
    要素によって構成される
    要素の「div」は「division」の略、要素をグループ化するために使用される

    「header」「main」「footer」というclass名を持った
    3つの
    要素でレイアウトを分割していく



    ④ヘッダーを作ろう

    ・ヘッダーの構造
    ・ヘッダーのレイアウト
    ・ヘッダーの余白



    ★ヘッダーの枠組み


    Progate
    　　ここが「ロゴ」の
    要素
    　　　ここから『ヘッダーリスト」の
    要素



    ★リストのマークをなくす


    • 黒点なし
    • 黒点なし


    li {
    list-style: none;
    }


  • 要素にlist-styleプロパティを用いてnoneを指定すると、
    リストの先頭のマークを消すことができる
    →基本的に先頭の黒点は必要ないので、消してOK