HTML・CSSのコーディングをする時に忘れやすい箇所をメモ

ProgeteのHTMLやCSSの学習が終わったので、今は「Codestep  」さんというサイトで模写コーディングをしながら勉強しています。

プロの方は何も見ずにスラスラとコードが書けるのが羨ましいと思いつつ、私の場合は、「どうして思ったようにうまく反映されないんだろう？」と戸惑いながら、いろんな壁にぶつかりながらコードを書いています。

ということで、今回はカンペを作ろうと、よく忘れてしまうコードをメモしておくことにしました。

私的なメモ代わりに残していこうと思います。

metaタグ

vscodeを利用するとHTMLのひな型は「! + Tab」で表示されますが、このひな形だけだとfaviconのリンクやCSSの読み込みなどが足りないので追記します。

  <meta name=”description” content=”ここにメタディスクリプションのテキストを記述”>
  <link rel="icon" href="img/favicon.ico">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">

reset.cssはstyle.cssの前に読み込むようにしておきます。

CSSのcharset

たまに書くのを忘れてしまう CSSのcharset

@charset "utf-8";

CSSのmedia screen

レスポンシブデザインでお馴染みのmedia screen。長いので覚えにくい。

@media screen and (min-width: 786px) {
}

jQueryを使うとき

jQueryを使うときは本家もありますが、googleが提供しているCDNの方が若干早いという噂なのでgoogleのライブラリを使うようにしています。

metaタグに以下を挿入。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

bodyタグの終了タグの直前にjsを呼び出す記述を書きます。

<script src="script.js"></script>

jsファイル

$(function(){
  
});

画面サイズによって画像を差し替える場合のHTMLの書き方

<picture>
  <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
  <img src="img/mainvisual-pc.jpg" alt="mainvisual">
</picture>

media属性には、画面サイズの条件を指定します。 上の例の場合だと、画面サイズが600px以下の場合はsp用の画像を、600以上の場合はpc用の画像を表示することができます。

ナビゲーションなどを横並びにする時のmarginの書き方

フローバルナビを横並びにする時にflexboxを使って横並びにすることが多いですが、marginを書く時には「li + li」とすると隣接した li のところだけにmarginが取れます。

.gloval_nav li + li {
  margin-left: 20px;
}

HTMLの文章を縦書きにしたいときのCSSの書き方

文章を縦書きにしたい場合は、「writing-mode」プロパティを使います。

右から左へ改行する場合：vertical-rl 左から右へ改行する場合：vertical-lr

「writing-mode」プロパティを使う場合は、ベンダープレフィックスが必要になります。IEはサポートが終了しているので必要ないかもしれませんが一応。

  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;  /* Chrome、Safari用 */
  -moz-writing-mode: vertical-rl;     /* Firefox用 */
  -ms-writing-mode: tb-rl;            /* IE用 */

font-sizeをremで書く時

htmlのフォントサイズを62.5％とすると、16pxが1.6rem、12pxが1.2remで書けるのでいちいち電卓を取り出さなくてよくなる。

html  {
  font-size: 62.5%;
}

p {
  font-size: 1.4rem;
}

formの書き方

formがちょっと苦手。formタグを忘れてしまったり、formタグのmethodを忘れたり、emailのtypeをemailにするのを忘れたり、ボタンのtypeをsubmitにするのを忘れたり。。。

<form action="#" method="post">

<label for="name">NAME</label>
<input type="text" id="name" name="your-name">

<label for="email">E-mail</label>
<input type="email" id="email" name="your-email">

<textarea id="message" name="your-message"></textarea>

<input type="submit" value="送信">