ホームページをコーディングする(準備編)

こんにちは。武誰です。今回は下のデモサイトを使ってお話していきます。

>>デモサイトを見る

>>ダウンロード

デモサイトには、一部「フリー素材」を使用しているため、そちらはダウンロードデータには含まれておりません。(二次配布になってしまうため)必要な画像は、下記サイトよりダウンロードしてご利用ください。(無料)



デモデータをカスタマイズしてもらってもいいのですが、中身を知っていたほうが、後々更新の幅も広がりますので、最後までお付き合いいただければと思います。 まずインターネットで見れるデータを作ります。あの暗号みたいに英語がズラーっと書いてあるアレです。

一から全部書いてもいいのですが、一文字違うだけで表示されなかったり不具合探しで時間をとられるのもバカバカしいので、以下の文字をメモ帳にコピーして、ファイル名をtemplate.htmlにして保存してください。


そのとき、文章ファイルではなく「すべてのファイル」に必ずしてください。保存先はとりあえず、デスクトップに「web」というフォルダをつくってその中に入れてください。ファイルのアイコンがお使いのブラウザのマークになっていたら、これでhtmlファイルの出来上がりです。

HTMLファイルの作り方

簡単ですねー。次にまいりましょう。

さて、次はコーディングに必要な画像を用意するため、前回作ったイメージを分解します。とりあえず、これから作る「雛形」に必要な分だけ、画像を切り出します。 photoshopでしたら「スライス」の機能を使うと便利です。

Photoshopで画像を切り出し

「ファイル」→「webおよびデバイス用に保存」で切り出した部分だけ画像データが作成されます。なかったら、面倒ですが一個一個トリミングするか、画像サイズを測ってコピペしてください。ホームページで使用する画像データには、下記制限があります。

・ファイルの拡張子は「.jpg」「.png」「.gif」。
・カラーモードは必ずRGB。
・ファイル名は必ず半角英数で、「_」「-」以外の記号文字は使わない。

同人誌を入稿する時のCMYKは印刷用のデータのため、WEB上では表示されません。結構、同人誌の表紙データをそのままWebにアップして「表示されない」と頭をかかえている人を見ます。切り出した画像は、先ほど作った「web」フォルダの中に「images」フォルダを作り、そこに入れます。

HTMLファイルの保存方法

これでコーディングする準備ができました。これを基に、次回からtemplate.htmlにガシガシ書き込んでいきます。

次のお話