ホーム > ホームページの作り方 > ホームページをコーディングする(準備編)

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

すみません。デモサイトを作っていて更新が遅くなりました。


>>デモサイトを見る


>>ダウンロード


デモサイトには、一部「フリー素材」を使用しているため、そちらはダウンロードデータには含まれておりません。(二次配布になってしまうため)


必要な画像は、下記サイトよりダウンロードしてご利用ください。(無料)


ICOOON MONO(日本語)

ICON HOIHOI(日本語)



デモデータをカスタマイズしてもらってもいいのですが、中身を知っていたほうが、後々更新の幅も広がりますので、最後までお付き合いいただければと思います。


まずインターネットで見れるデータを作ります。


あの暗号みたいに英語がズラーっと書いてあるアレです。


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



そのままコピーするすると「123・・」と余分な数字が入ってしまうので、必ず「ハイライトをOFF」にしてください。


161217_img_01


そのとき、文章ファイルではなく「すべてのファイル」に必ずしてください。


保存先はとりあえず、デスクトップに「web」というフォルダをつくってその中に入れてください。


ファイルのアイコンがお使いのブラウザのマークになっていたら、これでhtmlファイルの出来上がりです。


HTMLファイルの作り方


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


さて、次はコーディングに必要な画像を用意するため、前回作ったイメージを分解します。


とりあえず、これから作る「雛形」に必要な分だけ、画像を切り出します。


photoshopでしたら「スライス」の機能を使うと便利です。


Photoshopで画像を切り出し


「ファイル」→「webおよびデバイス用に保存」で切り出した部分だけ画像データが作成されます。


なかったら、面倒ですが一個一個トリミングするか、画像サイズを測ってコピペしてください。


ホームページで使用する画像データには、下記制限があります。




ファイルの拡張子は「.jpg」「.png」「.gif」。

カラーモードは必ずRGB。

ファイル名は必ず半角英数で、「_」「-」以外の記号文字は使わない。





同人誌を入稿する時のCMYKは印刷用のデータのため、WEB上では表示されません。


結構、同人誌の表紙データをそのままWebにアップして「表示されない」と頭をかかえている人を見ます。


切り出した画像は、先ほど作った「web」フォルダの中に「images」フォルダを作り、そこに入れます。


HTMLファイルの保存方法


これでコーディングする準備ができました。


これを基に、次回からtemplate.htmlにガシガシ書き込んでいきます。


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.