ga-03-00

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

ホームページ作成講座
受講の為の準備

目   次

1.エディターの用意

2.編集用テキストの用意

3.ブラウザでの表示テスト

4.HTMLファイル

5.CSSファイル

6.講座用フォルダー、練習用ファイルの準備

7.拡張子の表示

8.練習用ファイルの使い方のお勧め

9.練習用ファイルを使ってみよう

10.バックアップ習慣化のお勧め



  1.エディターの用意

ホームページ作成には、HTMLおよびCSS等を記述するためのエディターが必要です。Windowsのテキストエディターでも利用できますが、入力補助機能等がないので、HTMLおよびCSS等の編集専用のエディターを持っていなければ、「Sublime Text」をダウンロードして使うことをお勧めします。有料ソフトですが、無期限の試用期間があるので無料で使い続けることができます。有料版を買いますかとのメッセージが度々出ますが「No」を選択して問題ありません。

「Sublime Text」のダウンロードサイトは、

ここをクリックしてください

お使いのパソコンのOSのビット数が32ビットか64ビットか分からないときは次のサイトで調べて下さい。

ここをクリックしてください

 

  
  2.編集用テキストの用意

編集用のテキストを用意しました。このテキストを見栄えの良いインターネット画面に仕上げます。


ホームページ作成の為の編集用テキストです

【コンテンツ1】 ここにはコンテンツ1の内容が入ります。ここにはコンテンツ1の内容が入ります。ここにはコンテンツ1の内容が入ります。ここにはコンテンツ1の内容が入ります。ここにはコンテンツ1の内容が入ります。ここにはコンテンツ1の内容が入ります。ここにはコンテンツ1の内容が入ります。

【コンテンツ2】 ここにはコンテンツ2の内容が入ります。ここにはコンテンツ2の内容が入ります。ここにはコンテンツ2の内容が入ります。ここにはコンテンツ2の内容が入ります。ここにはコンテンツ2の内容が入ります。ここにはコンテンツ2の内容が入ります。ここにはコンテンツ2の内容が入ります。

【コンテンツ3】 ここにはコンテンツ3の内容が入ります。ここにはコンテンツ3の内容が入ります。ここにはコンテンツ3の内容が入ります。ここにはコンテンツ3の内容が入ります。ここにはコンテンツ3の内容が入ります。ここにはコンテンツ3の内容が入ります。ここにはコンテンツ3の内容が入ります。

【コンテンツ4】 ここにはコンテンツ4の内容が入ります。ここにはコンテンツ4の内容が入ります。ここにはコンテンツ4の内容が入ります。ここにはコンテンツ4の内容が入ります。ここにはコンテンツ4の内容が入ります。ここにはコンテンツ4の内容が入ります。ここにはコンテンツ4の内容が入ります。

【コンテンツ5】 ここにはコンテンツ5の内容が入ります。ここにはコンテンツ5の内容が入ります。ここにはコンテンツ5の内容が入ります。ここにはコンテンツ5の内容が入ります。ここにはコンテンツ5の内容が入ります。ここにはコンテンツ5の内容が入ります。ここにはコンテンツ5の内容が入ります。
  
  3.ブラウザでの表示テスト

上記「編集用テキスト」をエディター(Sublime Text等)にコピーして、ファイル名”test.html“にして保存して下さい。保存場所はパソコン内であれば何処でもよいのですが、デスクトップに保存したとして話を進めます。

その後、Google Chrome等のブラウザを立ち上げて、デスクトップの”test.html“をドラッグ&ドロップでブラウザの上に重ねてください。ブランクも改行も入らないテキストが表示されます。このテキストをHTMLおよびCSSを使って見栄えの良いインターネット文章に変えていきます。

画像

画像

  
  4.HTMLファイル

HTMLファイルは、HEAD部とBODY部に分かれます。HEAD部は基本情報を管理するところで、タイトルを除いてブラウザに表示されません。BODY部が本文で、ブラウザに表示されます。

画像

下段には、当講座受講の為に必要な「HTMLファイル」を表示しました。HTMLの書き方は、次の講座である「基本の基本」で説明します。「!DOCTYPE html」から「/html」までをコピーしてテキストエディター(Sublime Text等)に貼り付けてください。ファイル名は、「rensyu-1.html」として一時保存をしてください。

【HTMLファイル】
HTMLコード(rensyu-1.html)
<!DOCTYPE html>
<!--========================================
   練習のタイトルを記述する
=========================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title>練習のタイトルを記述する</title>
    <link rel="stylesheet"
          href="style-1.css">
</head>
<body>  

  ここにHTML本文を入力する

</body>
</html>
        
  
  5.CSSファイル

下段には、当講座受講の為に必要な「CSSファイル」を表示しました。CSSの書き方は、次の講座である「基本の基本」で説明します。 「@charset "utf-8";」から最後までをコピーしてテキストエディター(Sublime Text等)に貼り付けてください。ファイル名は、「style-1.css」として一時保存をしてください。

CSSファイル(style-1.css)
@charset "utf-8";
/*--========================================
     練習のタイトルを記述する
=========================================-*/



         ここにCSSテキストを入力する




          
  
  6.講座用フォルダー、練習用ファイルの準備

当講座を受講する前にフォルダーおよび練習ファイルの準備をしてください。

画像

1. お勧めは、エクスプローラー直下の「ドキュメント」配下に「HP作成講座」というフォルダーを作成します。

2. 「HP作成講座」の配下に「練習―0」から「練習―10」までのフォルダーを作ります。

3. 先ほど、一時保存をした「rensyu-1.html」と「style-1.css」を「練習―0」フォルダーに移動します。

4. 「rensyu-1.html」を4個コピーして。「rensyu-2.html」~「rensyu-5.html」を作成します。

5. 作成し終わったら、「rensyu-2.html」~「rensyu-5.html」の本文の「href="style-1.css"」を各々「href="style-2.css"」~「href="style-5.css"」に変更してください。

6. 「style-1.css」を4個コピーして。「style-2.css」~「style-5.css」を作成します。

7. 「練習―0」フォルダーを10個コピーして「練習―1」から「練習―10」を作成します。「練習ー0」はコピー用のオリジナルなので使用しないでください。

8. 練習フォルダーを使い切ったらオリジナルフォルダーをコピーして追加していってください。

  
  7.拡張子の表示

エクスプローラーを開いて、[ドキュメント]―[HP作成講座]―[練習―0]を選択し、上段の[表示タグ]ー[詳細]を選択してください。[練習―0]の作成が終えていれば次の画面となります。

画像

[ファイル名拡張子]のチェックボックスに“チェック”を入れるとファイルの名前に拡張子が表示されます。HTMLファイルの場合は「html」、CSSファイルの場合は「css」が表示されます。

画像

  
  8.練習用ファイルの使い方のお勧め
  
  9.練習用ファイルを使ってみよう
HTMLファイル
<!DOCTYPE html>
<!--====================================
    デモンストレーション 
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" 
          href="style-1.css">
</head>
<body>
    <div class="demo">
        <p>デモンストレーション</p>
    </div>     
</body>
</html>
        
ワンポイント

!DOCTYPE htmlから/htmlまでを範囲指定をして[ Ctrl+c]でコピー。

CSSファイル(ファイル名 : style-1.css)
@charset "utf-8";
/*--====================================
    デモンストレーション
--====================================*/
.demo {
  color: red;
  background: ivory;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  width: 400px; 
  height: auto;
  margin: 60px auto;    
  border: double 10px orange;
}
      
ワンポイント

@charsetから最後の }までを範囲指定をして[ Ctrl+c]でコピー。 

画像

画像

  
  10.バックアップ習慣化のお勧め

HTMLおよびCSSを利用してホームページを作成していると、苦労を重ねて作成したホームページのファイルが一瞬の間に消えたり、レイアウトがめちゃくちゃになったりすることがあります。理由は色々ありますが結果は悲惨です。こうしたことがあることを前提にバックアップを取ることを習慣付けましょう。少なくとも1日前に戻れると被害は最小限にとどめることができます。

【サンプル画像】

画像

エクスプローラー直下の「ドキュメント」配下に「HP作成講座バックアップ」というフォルダを作成します。「HP作成講座バックアップ」の配下に例えば当日日付である「2020.06.20」という日付をフォルダー名にしたフォルダを作成し、そのフォルダに最新のHP作成講座フォルダをコピーします。これを必ず作業前に実施します。重大なる変更を加えようとする時は、一日の中間段階でもバックアップを取ることをお勧めします。「2020.06.21-2]フォルダは、6月21日に2回目のバックアップを取った例です。

pagetop

準  備

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken