Zenn
Open4

[勉強メモ] Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます

sousquaredsousquared

https://www.udemy.com/course/html-css-js/?srsltid=AfmBOopEVoZeuZ48nSAkAq40-0OvgsqIYmwtG5ltZ6Jzr3QD5egdDIxf&couponCode=V2JPLETSLEARN
https://github.com/sousquared/udemy-intro-html-css-js-jq-vue

htmlタグ

  • h1： headingのレベル1, 大見出し

  • 要素（タグ）は100種類以上ある

  • <input> 属性で色々変えられるtype=”checkbox”, type=”email”など

  • 決まり文句

    <!DOCTYPE html>  <!-- HTML5の宣言. 別のバージョンなら複雑な書き方がある. -->
<html>
  <head lang="ja">
    <!-- 言語設定 -->
    <meta charset="UTF-8" />
    <!-- 文字コード設定 -->
    <meta name="viewport" content="width=device-width" />
    <!-- ビューポート設定. スマホの幅に合わせて表示するための設定. -->
    <title>入会申し込み</title>
    <!-- タイトル設定. 検索結果などに表示される -->
  <body>
  </body>
</html>

  • <input/>の/>はなくてもいい

    • XHTMLの書き方

  • “でも’でもいい

    • 迷うなら“の方が良い
sousquaredsousquared

CSS

https://developer.mozilla.org/ja/docs/Web/CSS

  • Cascading Style Sheets

  • ブラウザの設定によって最小pxがある

    • chromeは10pxが最小px これいかに小さくはならない

  • 単位について

  • インラインCSSはあまり好ましくない

    • 直書き

      <h1 style="font-size: 24px; margin: 50px">入会申し込み</h1>

  • 内部参照

    • headタグに記述するやり方

          <style>
        /* h1やpの部分はセレクターと呼ばれる */
        h1 {
            font-size: 24px;
            /* 0の場合はpxなどの単位は必要ない */
            margin: 0;
        }
        p {  
            font-size: 14px;
        }
    </style>

  • 外部参照

    • CSSのファイルに記述するやり方

      <link rel="stylesheet" href="style.css" />
<!-- スタイルシートの読み込み. このファイルと同じディレクトリにstyle.cssがあるとする. -->
sousquaredsousquared

ブラウザごとのCSSの差異を無くす

sanitize.css

以下からDL

https://csstools.github.io/sanitize.css/

<link rel="stylesheet" href="css/sanitize.css" />
<!-- スタイルシートの読み込み. 順番は重要. 下にあるものが上にあるものより優先される. -->
<!-- sanitize.cssはブラウザごとのデフォルトスタイルをリセットするためのファイル. -->
<link rel="stylesheet" href="css/style.css" />

サニタイズとリセットの違い

  • リセットCSSはいくつかある
    • destyle.css
      • CDN指定もある
      • href=”https://…”
sousquaredsousquared

CSSの優先順序

h1 {
  font-size: 24px;
  font-size: 50px;
  /* 後に書いたものの方が優先度が高いので50pxになる */
  margin: 0;
}
h1 {
  font-size: 100px;
  /* 後に書いたものの方が優先度が高いので100pxになる */
}
p {
  font-size: 14px;
}