Web プログラミング

【もりけん塾27日目】ProgateのHTML・CSSまとめ【無料部分】

初めてのLP制作依頼の作業をしている、ねこらのん(@nekoranon256)です。

 

HTMLとCSSのおさらいでまとめ。

 

混乱するので一旦初心に戻ります。

 

「これをやったら良い」という情報が多くて自己処理がまだできていないので1つづつ!

ProgateのHTML

Progateでやったことは以下のとおり。

 

  • 全体構造
  • head内に記載するもの
  • body内に記載するもの

 

順番にまとめていきます。

全体構造

全体像は以下のとおり。

 

  1. <html>の中に<head>や<body>がいる
  2. <head>ページの設定に関する情報でページ内には表示されないもの
  3. <body>実際に表示したい内容
  4. <!DOCTYPE html>最新のHTML5のバージョンの宣言

 

head内

head内に記載するもの。

 

  1. <meta charset="utf-8">文字コード
    ※文字化け防止
  2. <title>ページタイトル
  3. <link rel="CSSファイル読み込み宣言" href="読み込むCSSファイル名">>CSSの読み込み

 

body内

body内に記載するもの。

 

  1. タグ
  2. <h1>のhはheadingの略
  3. <p>はparagraph段落の略
  4. <!---->コメント
  5. <a>リンク作成
  6. <a href="url">href属性でリンク先指定
    ※ダブルクオーテーションを忘れずに
  7. <img src="url">src属性で画像表示
    ※終了タグは不要
  8. <ol>数字リスト、<ul>黒丸リスト
    ※インデントをつけることで親子関係をわかりやすくする
  9. <div>はdivisionの略
  10. <span>文中の一部を変更したい場合使用
  11. ブロック要素:<div><p><h1>改行される
  12. インライン要素:<span><a>改行されない
  13. input要素:1行の入力用
    <input type="submit" value="ボタンに表示されるテキスト">
    ※終了タグが不要
  14. textarea要素:複数行入力用

 

 

ProgateのCSS

CSSはHTMLに対し色、大きさ、配置などを指定し、ページをデザインするための言語。

 

  1. CSSについてセレクタ:どこの(h1の)、プロパティ:何を(色を)、値:どうする(赤にする)
  2. インデントいる
  3. コロンとセミコロンが必要
  4. /**/コメント
  5. font-sizeはpxで指定
  6. font-familyでフォントの種類を決める
  7. widthは横、heightは高さ
  8. 一部だけ指定したい場合はclassを使う。
    ※classを使う場合は『.』が必要でタグのみの場合は『.』は不要
  9. <li>にlist-noneでリストのマークを消す
  10. float: left;要素が左に横並びになる
  11. paddingで要素に余白
  12. float:right:要素が右に横並びになる(右端にいく)
  13. borderで太さ、種類、色
  14. marginは外側の余白
  15. 『,』で同じセクレタ指定可能
    ※h1,p{ これで2つ指定可能

 

おわりに

まとめていくだけじゃなくて手を動かした方が良いんだろうけど…頭が追いつかないので一度まとめ。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada