HTMLとCSSの基礎知識 P.2

P.2では実際にHTMLファイルとCSSファイルを作ってみましょう。

まずは、windowsでメモ帳を開いてください。

スタートボタン→検索［　メモ帳　］か、スタート→全てのプログラム→アクセサリー→メモ帳にあるはずです。


スポンサードリンク


 

Macの方はすみません。テキストエディットというものを標準テキストに設定し、取り組んでみてください。

以降はwindows環境での説明になります。

 

メモ帳でHTMLとCSSのファイルを作ってみよう

メモ帳を開いたら、以下の記述をコピペしてください。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

これはテストです。

</body>
</html>

 

 

kiji728-1

 

コピペしたら、「名前をつけて保存」

kiji728-2

 

保存場所はわかりやすいように「デスクトップ」に、ファイル名は「index.html」としておいてください。

※ここで注意！！※

ファイルの種類を「すべてのファイル」に変更するのを忘れずに・・・

kiji728-3

 

すると、「すべてのファイルの種類で・・・拡張子が.htmlだから・・・」とパソコンが勝手にブラウザ表示にしてくれます。

 

なので、下の写真のように既定のブラウザに設定しているブラウザのアイコンになります。

kiji728-4

 

私の場合はGoogleChromeになっていますが、Internet　ExprolerやFirefoxなど見慣れたブラウザのアイコンになるはずです。

 

では、試しにindexを開いてみましょう！

 

kiji728-7

ちゃんとブラウザで表示できるようになったことがわかりますよね！

私は当時、これだけでちょっとテンションがあがりました（笑）

 

CSSの場合も同じ要領で作りますが、CSSのファイル名は「style.css」としておいてください。

kiji728-5

 

CSSのアイコンはメモ帳のままだと思います。

 

あとは「imgフォルダ（サイト内で使う画像をいれるフォルダ）」を作り、もう一つお好きな名前をつけた空のフォルダを作ります。

ここでは「testフォルダ」としましたが、そちらに「index.html」「style.css」「imgフォルダ」を入れましょう！

kiji728-8

 

これが一番シンプルなHTML、CSSファイルを作る方法になります。

 

でもやっぱり、テキストエディターが便利

このままメモ帳で作成できなくはないのですが、色んな利便性を考慮してもテキストエディターの操作を覚えた方が良いです。
おすすめは「Sublime Text」。
インストールして操作を覚えてパッケージをインストールしたり、初めは大変ですが1日あれば大丈夫だと思います。
こちらの記事に詳しい情報を載せていますので、確認してからまた戻ってきてくださいね。

※この記事ではSublime Text2を使用しています。
http://nor-asu.work/design/wordpress-website-2

 

・・・・・。

 

インストールやパッケージはうまくいきましたか？

閉じタグがどこにあるかわかったり、ハイライトで色を自動で変えてくれたり、初心者の方に優しい機能がたくさんなので、ぜひ使いこなしてください！

 

では、さっそくSublime Textで開いてみましょう！

「index.html」と「style.css」に対して右クリックをし、プログラムから開くで「Sublime Text」を選択しましょう。

kiji728-9

 

２つを開くとこんな感じになると思います。

kiji728-10

 

このままでは見にくいので、表示→画面分割→2列としてドラッグ＆ドロップで見やすくします。（個人的意見なのでしなくても良いです）

kiji728-11　　 kiji728-12

 

index.htmlにstyle.cssを関連付けさせる

 

今のままのHTML記述では、「style.css」のCSSファイルが関連付けされていません。

そこで、P.1で書いていた通り、<head></head>内に関連付ける記述をしていきます。

見られてない方は先にP.1をご覧ください。

HTMLとCSSの基礎知識 P.1

 

関連付けに必要な記述はこちらでしたね！

<link rel="stylesheet" href="./style.css" type="text/css" />

/* HTML5ではtypeを省略可能 */
<link rel="stylesheet" href="./style.css" />

 

DOCTYPE宣言はHTML5にしているので、typeを省略して記述します。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>

これはテストです。

</body>
</html>

 

P.1の手順から、「index.html」と「style.css」は同じフォルダに入っているはずです。

ここで必要な知識は「階層」と「絶対パス・相対パス」を理解すること。

 

階層とは、「フォルダ」の中に「フォルダ」が入ることにより、データに深さができることを表します。

階層について

 

先ほど行った作業では、「testフォルダ」の下の階層に「imgフォルダ」「index.htmlファイル」「style.cssファイル」がありますよね。

「index.html」と「style.css」は同じ階層にあるので、記述は

<link rel="stylesheet" href="./style.css" />

でOKです。

./style.css の「./」は関連付けるhtmlの同じ階層にありますよ。という意味。

なので、htmlファイルが1階層上にあるなら「../」、2階層上なら「../../」となります。

このように、関連付けたいファイルをスタート地点として、階層の場所を指定するのが「相対パス」です。

 

逆に、「絶対パス」は最上層からのスタートになるので、深ければ深いほど記述が長くなります。

「http://ドメイン名/フォルダ名/ファイル名」 という記述をし、style.cssの場所を指定します。

 

それでは、P.3で実際にサイトを作っていきましょう。


投稿日: 2016-03-24
カテゴリー: CSS | 投稿者: NOR
«previous
next»
　

関連記事

HTML、CSSなどWEBデザイナーになる為の勉強ツール
めちゃ簡単！！MAMPによるPHP開発環境構築の備忘録（Mac編）
【HTML CSS】親要素内での子要素の上下左右中央揃え
テキストエディタソフト
HTMLとCSSの基礎知識 P.1
Facebookの記事シェア時に画像が表示されなかった時の対処

全コンテンツ新着記事

  • iPhone Xに機種変更して気付いたiTunesの落とし穴

  • 2017年11月3日発売だったiPhoneX（アイフォーン10）。

    予約開始が同年10月27日16:01からだったので、私は15:59から携帯を握りしめ、16:00:45から予約ページの更新を繰り返しながら、ページが表示されるとすぐ予約の申込みを完了しました。

    その成果あってか、発売日の11月3日の午前中には受け取りにいくことができました。

     

    続きを読む

  • mac for excel クラッシュ時の一時保存フォルダの場所

  • macのexcelで作業をしている時、何かのエラーを叩いてしまった際、excelが急にクラッシュして強制終了なんてことがよくあります。

    そんな時、Office製品はしっかり一時保存データを残してくれています。

    macでの一時保存フォルダを備忘録で残しておきます。

    続きを読む

  • 【Photoshop】簡単にドット柄を作る

  • 最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にドット柄の作り方を備忘録で残しておきます。

    私の環境はPhotoshop CS6 for Macです。

    続きを読む