こういった疑問に答えます。
こんにちは、リバティエンジニアのFUNA（フナ）です。
現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
- CSSをHTMLに紐付ける方法が知りたい
- CSSの書き方が知りたい
今回は、CSSの基本の書き方やHTMLへの紐付け方をご紹介します。
【PR】: フリーランス向け求人・案件を探すならこの3サイトがおすすめ！
※上記は当サイトからの登録が多い順になっています
※上記以外のエージェントを知りたい方は「IT業界エージェント・転職サイトのおすすめ」をご覧ください。
そもそもCSS(シーエスエス)とは？
CSSとは、Webページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。
CSSは「スタイルシート」とも呼ばれます。
以前解説したHTMLに色を付けたり見栄えをよくするためのものです。
>> 【はじめてのHTML】 ブラウザに表示させて確認する方法
CSSでできること
詳しいことは後程説明しますが、文字の色を変えてみたり、太字にしたり、文字の大きさを変えることができます。
例えば下のようなHTMLを書いたとします。
<p> これは例文です。 </p>
<p>タグは段落を示しています。
このHTMLのpタグに対して、デザインをあてて見た目を変えていきましょう。
p {
font-size: 20 px;
color: orange;
}
このように設定したいタグを指定して{ }かっこの中に設定項目を書いていきます。
文字の大きさを変えたい時は「font-size」を使い、文字の色は「color」を使います。
のように決まりがあるので覚えておいてください。
ポイント
"font-size"の値の指定は「px(ピクセル)」で指定しています。
"color"の値には「orange(オレンジ色)」を指定しています。
※それぞれほかの書き方もあるので状況に応じて変えてください。
CSSを書く場所
実はCSSを書く場所には3パターンがあります。
- CSSファイルを作成しHTMLファイル内で読み込み
- HTMLファイルにstyleタグを追加してそこにCSSを直接書く
- HTMLファイル内のタグの中に直接書く
これら、どの方法でCSSを記述してもいいのですが、それぞれ長所と短所があるので、うまく使い分ける必要があります。
HTMLでCSSファイルを読み込んでみる
まずはHTMLとCSSのファイルを用意しましょう。
<!DOCTYPE html>
<head>
<title>Sample</title>
</head>
<body>
<p>HTML/CSSの基本を勉強しよう。</p>
</body>
</html>p {
font-size: 20px;
color: orange;
}
では次に、HTMLにCSSを読み込むためのコードを書いていきます。
先程のHTMLに5行目を追加してください。
<!DOCTYPE html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="Test.css">
</head>
<body>
<p>HTML/CSSの基本を勉強しよう。</p>
</body>
</html>
たったこれだけでOKです。
簡単に説明すると、「link rel="styleseat"」ここでスタイルシートの読み込みをしますという宣言のようなものをしています。
「href="Test.css"」ここで""中に指定したcssファイルの読み込みをしています。
hrefにはURLが入るので、ファイルの場所を間違えないように気をつけてください。
まとめ
今回はHTMLで記入したファイルに"CSS"を使い装飾しデザインしてWebサイトを華やかに見やすくする方法をご説明しました。
今回出てきた"タグ"や"プロパティ"などについては、また別の記事で特集していますので、ぜひご覧ください！
関連記事
-
【コピペOK！】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】
FUNAこんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...
-
【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。
-
【コピペOK】CSSでcounterを利用して自動ナンバリングする方法
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。
-
【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。
-
【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。