DEMODOWNLOAD
今回作成したテンプレートです。
このテンプレートに関しては、画像や情報だけ差し替えてそのまま使っていただいてもいいですし、好きに中身を変えて使っていただいて構いません。クレジットやリンクも一切不要です。
とりあえずは、画像や文字情報を差し替えるだけでも自分のサイトになりますのでまずはそこからやってみてください！
もっとこの部分はこうしたい、とか違うレイアウトにしたい、という部分も、htmlとcssのしくみがわかれば自在にカスタマイズできるようになります。
そしていずれは、いちから自分でコーディングして自分だけのサイトを作ることができるようになると思います！
理解の手助けになるよう、htmlやcssなどの説明を次ページからしていますので、よろしければそちらに進んでください。
- index.htmlトップページのファイル
- img02.htmlイラストの続きで読み込むページ
- comic.html漫画表示サンプル
- cssスタイルシート
- style.css基本のスタイルシート
- pc.cssPC用のスタイル
- mobile.cssスマホ用のスタイル
- comic.css漫画表示用のスタイル
- jsjsファイル
- index.jsjsファイル
- img画像ファイル
- icon.pngアイコン用画像
- top.png背景用画像
- illustイラストをまとめるフォルダ
- comic漫画をまとめるフォルダ
- offオフライン用の画像フォルダ
中に入っているファイルの一覧です。
PCとスマホの表示に関しては、ブラウザの横幅に応じて読み込むcssを切り替えることで表示を変えてます。PC/スマホ共通のスタイル（背景色や文字色など）はまとめたほうが管理しやすいかと思って１つにまとめてます。
テキストエディタひとつあればいいのですが、アクセサリのメモ帳よりはもうちょっと機能があるものがいいかなと思います。文字コードを指定して保存できるテキストエディタなら何でもOKです。
私自身色々試して比較したわけじゃないのですが、使っているのはCrescent Eveというソフトです。htmlタグやcssプロパティの入力補助機能や文法チェックの機能などがついていて便利です。
プレビューするブラウザはGoogleChromeがおすすめです。
ChromeはF12キーを押すと検証モードになって、コードのチェックをしたり、スマホ画面サイズでの動作確認ができたりします。他ブラウザにもある機能ですが、Chromeが一番使いやすいのではないかなあと思います。
とりあえずはダウンロードしたファイルをテキストエディタで開くとこから始めましょう！