page contents

実践!すぐに使えるHTML & CSS

スポンサーリンク

実践!すぐに使えるHTML & CSS

ブログやホームページを作ろうと思うと、ある程度、HTMLの知識やCSSの知識が必要になって来ます。ただし、見よう見まねでブログやホームページを作成されている方向けに、これや、あれやの事をやって見たいと、より実践的にやり方を紹介していきたいと思います。
なるべく、説明は省いた形で紹介していきたいと思います。
どっちかと言えば、CSSでの作成の仕方にウエイトを置いています。たとえば、『文章に蛍光ペンを引きたい』とか、『文章の行間を空けるには』とか『文章を二重線で囲みたい』とかなど、余計な説明文はつけずに紹介していきたいと思います。やりたい事がすぐにわかる! 見ていってくださいね。

では、詳しい話は抜いて、CSSを使うにはどうすれば良いか?
とりあえず、三つの方法がある事を覚えて下さい。

1.CSSを別ファイルに記述して使う
2.HTML言語の~ 内に、style(スタイル)要素を記述して使う
3.HTML言語に直接style属性を記述して使う

の3パターンがあります。

あっ、今はわからなくも良いですよ! とり合えず 『 CSS 』を使うには3パターンの方法があると覚えましょう。そして、この3パターンの書き方は必ず覚えないと次に進めませんので、ここだけは、実践というよりは書き方のお勉強になりますので、少し私に時間を下さい。

それでは、どれからお話しをしようかな~♪ では、まずは・・やはり順番通りに・・

CSSを別ファイルに記述して使う

これは、一番オーソドックスの書き方ですね! 通常、ホームページを作成するときにはHTML言語で書きますよね。例えば、topページならindex.htmlファイルを最初に作ります。
このindex.htmlファイルとは別に、CSSファイルを作成して使う事になります。
cssファイルを、abcdef.cssファイルとしましょう。
これで、index.html と abcdef.css の2ファイルができましたので、abcdef.cssファイルをindex.htmlファイルで使えるように、htmlファイルの中の~の間に、下記の行、一文を追加します。

記述 ⇒ <link rel=”stylesheet” type=”text/css” href=”abcdef.css”>

この中で、href=”abcdef.css”の所は、abcdef.css ファイルが置かれているリンク先を記述します。
レンタルサーバーを借りて、index.html と abcdef.cssファイルが同じフォルダ内に
保存する場合は上記の記述でいいのですが、

css
href=以降を次のように記述しなければ、abcdef.cssファイルを呼び出すことができませんので、使えなくなります。

href=”mno/abcdef.css” と記述する。パスを記述しなければなりません。

上記のようにきちっと記述されると、abcdef.cssファイルの中に書かれたものが、index.htmlファイルに呼び込まれて使用することができます。

これが、一つ目の一番よく使われているパターンになります。

スポンサーリンク