2024.05.31

WEBエンジニアまでの道のり【カスタマイズ】

takeshi_admin

タケシだ
今日は、以前書いたHTMLからの派生でCSSについて、書いていこうと思う。
まだ読んでいないヤツはそっちも読んでみてくれ。

コーダーを目指すやつは必見だから、目をかっぽじって呼んでくれよ。

WEBエンジニアまでの道のり【基本より前の一般教養】

Contents

CSSとは
書き方
練習方法
俺の練習方法
まとめ

CSSとは

CSSとは、「Cascading Style Sheets」のことである。
簡単に言うと、Webサイトの見た目を装飾すること専用のプログラミング言語だ。
このCSSを使うことで、例えば特定の箇所だけ文字のフォントを変えたり、サイズを大きくしたり、色をつけたりと言ったことが可能だ。
もしくは、通常画像を出力する際などは、縦並びに隙間なしで出力されてしまうが、CSSを使うことで、画像に余白を持たせたり、横並びに配置したりと言った見た目を大きく変えることもできる。

書き方

CSSの書き方についてだが、考え方はシンプルである。
どこの要素にどう言った装飾を当てるかである。
ただ、これの書き方が大きく3パターンある。

一つ目は、HTMLタグ内に直接書き込む方法だ。
自分がCSSを当てたいと思う要素に直接style=“color:red;”を追記してあげると、文字が赤色に変わる。
例
<p style=”color:red;”>赤</p>
二つ目は、headタグ内に直接要素などを指定して書いてあげる方法だ。
ここで指定するのは、pタグなどの要素だけでなく、classやidなどの属性で指定してあげることもできる。
例１
<style>
p {
color : red;
}
</style>

例２
<style>
.red{
color : red;
}
</style>

例1の場合、そのwebページ内のpタグで囲われている文字全てが赤色になる。
例2の場合は、class=“red”の属性が付与されている要素が赤くなる。
三つ目は外部に用意したCSSファイルを読み込む方法だ。
ファイル内に記載する内容は、二つ目のものと同じではあるが、外部ファイルに記載することのメリットとして、共通化されると言うものがある。
例えばWebサイト全体でデザインが統一される場合
共通化されるファイルに記載することで、一つの記述で複数のファイルにデザインを適用させることができる。
そのため、一つ一つのファイルに記載した場合と比べ、修正する際に変更が一箇所で済むため、メンテナンス性に優れる。

今のWEB業界での基本的なパターンとしては、3つ目にあげた方法で実装されていることが大半だ。

練習方法

とにかく、書くことでしか、技術が上達しないものではあると思う。
また、人によって書き方が異なるようなものであるので、人の書いたコードはあくまで参考程度に見るくらいがちょうどいいだろう。
では、どんなことをしたらいいのかと言った具体的なことだが、まだ何も触れたことがないようなやつは、練習用の本を見ながらするのがいいだろう。
なぜなら、本には基本的なことが網羅されているからだ。
大体一冊読めば、基礎的な知識、経験は身につくものと考えてもらってもいい。
そこからは、ネットに転がっているコーディングサイトから拾ってきたものを使って練習するのが最も効率のいい