ホームページを制作するには、いくつかの方法があります。

  1. WixやJimdoなどのフリー・有料で使えるホームページ制作サイトを使って、ブラウザで作成する方法。
  2. HTMLタグを最初から入力してマークアップしていく方法。
  3. ホームページビルダーやAdobeCCのDreamweaverほかHTMLエディタを使う方法。
  4. WordPressやMovableTypeなどCMSを使ってサーバーにインストールして作る方法。

1は誰でも感覚的に作れるし、ドメインなどを紐付けしなければ無料で作れます。

ただし無料のものはレンタルしたスペースの容量が小さく機能が限定されていて、使えるページ数も少なかったりします。

HTMLページは最初から作るには覚えることがたくさんありすぎて時間がかかります。

そこで。

最近はUIデザインとかフレームワークといわれる、ある程度まで仕上がったシステマチックなHTMLテンプレートが多数開発されています。

今回はその中でも、Bootstrapというフレームワークを使ってサイトを作成する練習をしてみましょう。
通常であれば、ここからここまでは何ピクセルね、ってCSSに書かなきゃいけなかったり計算が必要です。

でも、bootstrapなら、12で分割されたメイン領域を数字でclassで指定するだけで領域がぴったりその幅に収まってくれます。

料理で言えば、冷凍食品をアレンジして自分の料理に仕上げるような感じでしょうか。

できあいのものをつかってそれなりにかなりかっこよくサイトが出来上がります。

ほかにもいろいろあるので、「グリッドシステム テンプレート」などで検索してみるとよいでしょう。

 

  1. Instant Editorを使ってみる

http://www.venezia-works.com/bst/

こちらは、登録なしで使える多数のテンプレートが用意されたオンラインHTMLエディタです。

慣れてくればここだけでかっこいいサイトができてしまいます。

1.STARTをクリック

2.Templateをクリック

左上から順番にクリックしていくと右側にプレビュー画面が出ます。

お好きなデザインをクリックすると、左にタグ・右ウインドウにプレビューで現在のタグがビジュアルで表示されます。

もし、ここにお好きなデザインがない場合はいったんこちらにおすすみください。

3. startbootstrap (おすすめテンプレート)

https://startbootstrap.com/template-categories/all/

この中からある程度作りたいものに近いデザインを選んで、
テキストや画像を差し替え、色を変更して利用していきます。

今回はShop Homepageをつかってみましょう。

 

4. Downloadをクリック

5. ZIPフォルダを解凍してトップページをNotepad++で開く

 

※Notepad++を立ち上げて、画面の中に上記ファイルをドラッグすれば開きます。

6. 上記タグの中を一度クリックしてからCtrl+Aですべてを選択し、Ctrl+Cでコピー

7. エディタの左にあるタグをいったん全部消してからCtrl+Vで貼り付け

8. 先ほど解凍したフォルダのCSSファイルも同様にコピー

↓ ↓ ↓

 

9. ブラウザのエディタに戻って、CSSのタブをクリックし、中を空にしてCtrl+Vで貼り付け

これで作成の準備ができました。

【注意】このエディタはブラウザによっては画面上に保存されない場合があるので
作業を終了する際は毎回ダウンロードしておくことをおすすめします。(右上にSaveというメニューがあります)

必要なコンテンツに書き換える

テンプレートをオリジナルの文章に差し替えていきます。

<title>と</title>の間の文言を日本語のページタイトルに書き換えましょう。

↓ ↓ ↓

書き換えたところが右側のプレビューに反映されています。

カテゴリー名やテキストなど他の部分も変更します。

時々右上の「Save」をクリックして保存しながら作業しましょう。

 

いったんパソコンに保存するには

このエディタはログインを必要としませんので、そのままブラウザを閉じれば次回開いた時に初期状態に戻ります。

なので、必ずできたところまでをダウンロードしておいてください。

フォルダは任意の場所であなたのわかるフォルダを指定しましょう。

次回開くときは、Loadメニューから、保存したファイルを呼び出しましょう。

テーブルやカードなどのユニットの使い方については別途ご案内します。

Bootstrap4のレスポンシブデザインで使われているブレイクポイントの仕様

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

 

上記指定がすでに組み込まれているので、PC,スマホ・タブレットそれぞれの画面幅に合わせてデザインを変更できます。

上記@media以降を各要素(tableやdivなど各領域やパーツ)にCSSで追加で指定することにより、レスポンシブなサイトに仕上がります。

各テンプレートはほぼブレイクポイントが設定されています。

 

利用の際の注意事項

  1. 最初に2行目を日本語ページ仕様に変更します。

(↑このソースをコピーペーストすると「”」が全角になり機能しなくなります。できるだけタグに直に入力してください)

 

このあとの使い方については別途ご案内します。