LIFELOG

40代のダイエッターでプチミニマリストの雑記ブログです。ご訪問いただきありがとうございます。

CSSの基本をまとめてみた

CSS

今、ブログのカスタマイズの為にHTMLとCSSの本を買って勉強しています。

その日に勉強したことを忘れないように、ノート代わりにこのブログに残しておこうと思います。

素人が書いているメモ書きのようなものなので、通り過ぎていただいて大丈夫です。

では、今日はCSSの基本の設定をまとめてみます。

HTMLやCSSを編集するために使用するソフト

HTMLや CSSを編集するソフトはいくつかあるようで、購入した本には「Brackets」というadobeが開発したソフトで使い方が載っていました。

ですが、調べてみるとadobeのBracketsは2021年9月1日にサポートを終了していて、窓の杜のニュース記事にも 『 Electron』のセキュリティアップデートも適用されていないようなので、利用は控えるべき と書かれていました。

ネットの世界は流れが早いので、数年前の本でも情報が古くなっていて使えないことがあるんですね。

技術的な書籍はどんなに人気があっても、できるだけ新しいモノを買った方がいいのだと勉強になりました。

Microsoftから「Visual Studio Code」というソフトが出ていて、拡張機能を入れるとBracketsのショートカットが使えるみたいなので、Bracketsから移行される方は拡張機能を入れると移行がスムーズかもしれません。

まぁ、私は素人でガシガシコードが書ける訳ではありませんから、TeraPadのようなテキストエディタだけでも十分かもしれません。

でも、Microsoftから「Visual Studio Code」はオープンソースソフトで誰でも無料で使えるみたいなので入れてみることにしました。

CSSファイルを作成する

1 「style.css」を作成します。

ちょっと練習の為に普通のホームページを作っています。

普通のホームページのフォルダはどうなっているかというと

ホームページの構造

だいたいこんな感じだと思います。

ホームページ(任意の名前)のフォルダの中に、トップページとか、記事とか、プロフィールとか、問い合わせのページ(HTMLファイル)があって、スタイルシートを集めたフォルダと、画像を集めたフォルダで構成されます。

2 HTMLファイルのmetaタグにリンクの記述を書きます。

style.cssがcssフォルダの中に入っているので、index.htmlから呼び出す時は次の記述になります。

<link href="ccs/style.css" rel="style sheet">

だから、hrefstyle.cssではなくて、ccs/style.cssになるんですね。

今はファイル数が少ないのでまだ困らないですが、階層が多くなってくると訳がわからなくなってきそうです。

3 CSSファイルの先頭行には必ずUTF-8を設定します。

CSSファイルの先頭行には必ず文字セットを記述するのがルールです。

@charset "utf-8";

一番最初に文字セットを指定しないとブラウザによっては文字化けしてしまうことがあります。

ちなみに、UTF-8には「BOMあり」と「BOMなし」があって、私はよく知らないのですが、ホームページなどを作成するときは「BOMなし」がいいみたいです。「BOMあり」だとUnicodeの情報などが入っているみたいで、phpとかだとエラーが出るみたい。

Terapadの場合だと「UTF-8」で保存すると「BOMあり」「UTF-8N」で保存すると「BOMなし」

ちなみに、はてなブログの場合を見てみましょう。 デザイン →  カスタマイズ →  デザインcss を見てみると、@import url("https://usercss.blog.st-hatena.com/-/theme〜と外部スタイルシートを読み込んでいます。

だから、文字セットからは始まっていないんですね。

リセットCSS

文字セットを書いたら、次はリセットCSSです。

リセットCSSというのは、ブラウザごとに違っている初期値をリセットするCSSです。

例えば

body {
  margin: 0;
  padding: 0;
}

このような記述を書いていく訳ですが、実際に職業としてやられている方は、リセットCSSのCDNを利用されている方が多いようです。

いくつかのサイトがあって、デフォルトの設定がないタイプとあるタイプに分かれるようです。

代表的なものは、ほぼ全てのデフォルトスタイルをリセットするdestyle.cssとか、ブラウザのスタイルを残すsanitize.css。

destyle.cssの場合、ダウンロードファイルもありますが、CDNというのが使えて、その場合はHTMLファイルのメタタグに1行追加するだけでリセットCSSが完結します。

<link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css">

まとめ

今日覚えたことをまとめます。

  • 編集ソフトはMicrosoft「Visual Studio Code」
  • スタイルシートを読み込むためにはHTMLのメタタグに<link href="ccs/style.css" rel="style sheet">
  • CSSの1行目は文字セットを指定@charset "utf-8";
  • リセットCSSはdestyle.cssのCDNを使えば1行で済む

まだ、CSSには1行しか書いていないのに、もう挫けそうです。