はじめに

スマートフォン・タブレット・パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレートです。

このページは、デザインと動作の確認用です。ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。

利用規約はこちらからご確認ください。

無料テンプレートのダウンロードはこちらから行ってください。

編集方法はこちらからご確認ください。

編集方法

index.html の内容を変更してください。

style.css（デザインに関する記述）と script.js のカスタマイズは任意です。

images フォルダには、画像を保存してください。

画像

画像の幅は、スクリーンサイズに応じて 1000px 以内に縮小されます。

つまり、幅 1000px を超える写真は、縮小しておくとファイルサイズを抑えられます。

img 要素に class「img_frame」を設定すると、上の画像のように枠が自動で表示されます。

img 要素に class「img_frame」を設定しない場合は、枠は表示されません。お好みの設定をご利用ください。

文字色

３つの文字色を用意しました。

赤色は、class「color1」です。橙色は、class「color2」です。紫色は、class「color3」です。

文字色の変更や追加は、style.css に記述してください。

※補足は class「supplement」です。

ブロック

現在、5ブロック（はじめに｜編集方法｜画像｜文字色｜ブロック）ありますが、減らすことも増やすこともできます。

index.html に記載したコメント（<!-- コメント内容 -->）を参考に編集してみてください。