ProgateでHTML & CSSを学習

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

自分用メモ

随時追記していく

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

参考にしたい記事まとめ


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

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

HTML & CSS 初級編


①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;」のように、16進数のカラーコードで色を指定する
    (主要な色であれば、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



    要素の中には、以下の3つを入れる
    これらは定型文のようなもの
    ①文字コード:
    ②ページタイトル: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