ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法
背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法
画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法
「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とは
CSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線(ボーダー)」を付ける方法【 outline 】「枠線(ボーダー)」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法
CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加
CSSプロパティ【背景関連】
【 background 】背景を設定する方法
CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅(フェイス)を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字(漢字)と非表意文字(半角英数字)の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法
CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定
CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する





【CSS】CSS外部ファイルをHTMLファイルとリンクさせる方法

【CSS】
CSS外部ファイルをHTMLファイルとリンクさせる方法





「CSS」は、「CSS」だけでは機能することはできないので、
必ず「CSS」ファイルは、「HTML」ファイルとリンクさせます。






「CSS」と「HTML」の関係性


「CSS」は、正式には「Cascading Style Sheets(カスケーディング・スタイル・シート)」という。
昔、Webは「HTML」のみで、制作されていましたが、 現在では、「HTML」「CSS」「Javascript」「PHP」など多様な言語を組み合わせて制作するようになりました。
その中で、「HTML」はWebの骨組みを担当し、 「CSS」は、文字の装飾・配置、画像の位置調整など、Webのレイアウトデザインを担当しています。
Webを制作するのに、「CSS」は必要不可欠な存在です。


Back



「CSS」外部ファイルを用意する


最初に、
「CSS」ファイルを用意します。
リンクさせる「CSS」ファイルは、最初は何も記述しなくても大丈夫。

「CSS」ファイルの拡張子は、「ファイル名.css」と記述。

リンクさせた後に、確認するために、
わかりやすい「CSS」コードを入力しておくとわかりやすいです。


「CSS」ファイルの拡張子

CSSファイル名.css


簡単な「CSS」サンプルコード

body{
background-color:#000000;
}


Webページの背景を真っ黒にするサンプルコードです。
「CSS」外部ファイルをリンクさせて、Webページの背景が「黒」になっていれば、
リンク完了です。



Back



「CSS」外部ファイルとリンクさせる方法


「CSS」外部ファイルを「HTML」ファイルにリンクさせるには、
専用の「HTML」コードを「HTML」ファイルに記述することでリンクさせることができる。


外部CSSファイルへリンクさせる書式

<link href="./CSSファイル名.css" rel="stylesheet" type="text/css" />


「CSS」の外部ファイルは、「link」タグを使って、「HTML」ファイルとリンクさせる。
この時に必ず設定するのが、
「href」属性=「CSS外部ファイルのURL」
「rel」属性=「stylesheet」
「type」属性=「text/css」
上記の属性への設定を忘れると「CSS」外部ファイルとリンクができないので注意。


「HTML」ファイルへ記述する場所

<html>
<head>
<link href="./CSSファイル名.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>


「CSS」外部ファイルをリンクさせる場合、
「HTML」ファイルの「head」タグ内に、
リンクコードを記述する。
他の場所にリンクコードを記述してもリンクされない。



Back



ファイルのURLを指定する方法


「HTML」と「CSS」でのWeb制作であれば、
「相対URL」の指定方法を使うことがほとんど。
「Javascript」「PHP」などを使う場合には、
「絶対URL」で指定することもありますが、
Web制作では、「相対URL」の指定がメインです。


同じディレクトリのファイルを指定する相対URL

./ファイル名.html

一つ下のディレクトリにあるファイルを指定する相対URL

./ディレクトリ名/ファイル名.html

2つ下のディレクトリにあるファイルを指定する相対URL

./ディレクトリ名/ディレクトリ名/ファイル名.html


一つ上のディレクトリにあるファイルを指定する相対URL

../ファイル名.html

一つ上の別のディレクトリにあるファイルを指定する相対URL

../ディレクトリ名/ファイル名.html

一つ上の別のディレクトリ内にあるディレクトリ内ファイルを指定する相対URL

../ディレクトリ名/ディレクトリ名/ファイル名.html


Web内のファイルを指定する絶対URL

http://ドメイン名.com/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ディレクトリ名/ファイル名.html


「ファイルURL」の種類

「ファイルのURL」を指定する方法は、
最初は少し戸惑いますが、
ルールを覚えてしまえば、凄く簡単。

「ファイルのURL」を指定する方法は、
・絶対URL(絶対パス)
・相対URL(相対パス)
というような言い方をします。
2つの違いは、
・インターネット全体の住所を含めたURL
・Webサイト内部だけの住所のURL
という違いがあります。

「絶対URL(絶対パス)」は、インターネット全体の住所のうなURLなので、 世界中から、「絶対URL(絶対パス)」でアクセスできます。

「相対URL(相対パス)」は、Web内の住所なので、
現在のファイルがある場所からのディレクトリやファイルを示すURLです。


絶対URL(絶対パス)

http://ドメイン名.com/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
https://ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
http://www/ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
https://www.ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値


相対URL(相対パス)

./ファイル名.html
./ディレクトリ名/ファイル名.html
./ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
./ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
../ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
../ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値


Back