WordPressやWix,Jimdoなどのサービスを利用してホームページを作る場合が多くなっていますが、あえてHTMLとCSS（スタイルシート）を使ってサイトを作るのもありかなと思っています。
とは言っても完全に1から制作する知識は残念ながらありませんし、習得するにはそれ相応の勉強時間が必要になります。
ありがたいことに、無料で使えるテンプレートがたくさん公開されているので、これを使えば少し勉強すればサイト制作ができるようになります。
無料のテンプレートを使ってのサイト作成方法
「無料ホームページテンプレート」で検索すればたくさんヒットします、好みや制作目的にあったものを探しましょう。
商用利用が可能なものや不可のテンプレートがあります、アフィリエイトも商用利用になるので必ず利用規約を読んでから使うようにしてください。
私もいくつかのサイトを作ってみましたが、それなりのものができました。
1ページだけの単純なテンプレートもありますが、ページを増やそうと思えば「index.html」を名前を変えて保存（例えば sub1.htmlやoshirase.html ）などとして、トップページのメニューからリンクを貼れば新しいページを増やすことが出来ます。
全く知識がない場合は流石に苦しいですが、基本的には日本語で書かれている部分を書き換えたり画像を入れ替えたりして作業をすれば出来上がります。書換作業はWindows付属の「メモ帳」でも可能です、私の場合はは「TeraPad」というフリーソフトを使っています。
ホームページビルダーでも作業は出来ますが、バージョンが古いとHTMLの仕様が変わっているので注意が必要です。
簡単に手順を説明すると、適当なところに（例えばドキュメント）わかり易い名前をつけたフォルダーを作り、そこにダウンロードしたファイルを保存します。
圧縮ファイルになっているのでこれを解凍します、「index.html」ファイルがホーム画面になるのでこれを編集します、ページを増やす予定があるならこの時点でサブページを作っておいてもいいでしょう。
また、index.htmlをダブルクリックすればブラウザーが起動してページが表示されます、画面を見比べながら自分にあったように書き換えていきます。
基本的に画面表示と同じようにHTMLは上から順番に書かれています、また、画像ファイルを入れ替える場合はファイル名には日本語はNGなので要注意です。
この部分は今必要ないと思うところはコメントアウトして表示されないようにしておきます、削除してもいいのですが後で使うことがあるかもしれないので残しています。
コメントアウトの方法は、消しておきたい部分の先頭にhtmlタグの「＜！ーー」（ 実際は半角で書きます、全角で書かないとコメントアウトされるのでわざと全角を使っています）を入れておき、最後の部分で「ーー＞」を入れておけば表示されなくなります。
すべて出来上がれば、FTPソフトでサーバーにアップロードしてめでたく公開となります。
よく使われるHTMLのタグは覚えておいたほうがいいでしょう、画面と見比べると何となくわかるものが多くあります。
HTMLファイルの一部を覗いてみる
index.html には何が書かれているのでしょうか・・・
上記の注釈部分はWachaの想像が含まれています、間違った解釈もあると思います。
基本の配置や文字の指定などはスタイルシート（CSS）で指定されているので、HTMLの部分を書き換えても全体の表示が変になったりします。
CSSは書き換えずにそのまま使っています、どうなるのかなとテストしてみたりはしていますが。
HTMLタグがわからないときは検索すればいいのですが、全体像やCSSも少し知識を仕入れておきたいので本を買ってみました。
各社からいろんな参考書が出版されています、種類が多すぎてどの本が自分似合うのかわかりません。
従来の本と電子版があります、手軽にすぐ読める紙の本を選びました、挫折しても古本としてフリマなどで販売できるので少し高くなりますがこちらを選択しました。
あれこれと迷いましたがインプレス社の「いちばんやさしい」シリーズの本を選びました。
以前にこのシリーズの本を買ったことがあるからです、「いちばんやさしい HTML5&CSS3の教本」がタイトルです。
「初めてでも、挫折しません。」の部分に惹かれたのかな？
この本のおすすめポイント
- HTMLやCSSを「全く知らない」人でも理解できるように、専門用語の説明が丁寧で、「なぜそうなるのか？」までしっかり説明しており、理解が深まります。
- フルカラーで画面キャプチャやコードの違いが一目で分かる構成になっており、視覚的に覚えやすく学習のハードルが低く感じます。
- サンプルファイルをダウンロードして実際にHTMLとCSSを書きながら学べます、「学ぶ→試す→確認する」の繰り返しで身につく実践的なスタイルになっています。
- 見出しやリンク、リストといった基本から始まり、最終的にはスマホ対応のレスポンシブデザインまで触れています、初級から中級へのステップアップがスムーズにいきそうです。
- 実際にWebページを完成させるプロジェクト形式の章があり、「学んで終わり」にならない設計になっています、ポートフォリオの基礎にもなるのではないでしょうか。
- 作成したページをサーバーにアップロードの方法や、簡単なSEO対策やFacebook、Xのボタンの作成方法も触れてあります。
にほんブログ村
コメント