はじめに

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

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

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

1カラムレイアウト

画像の最大表示サイズは、1カラムは幅 990px です。2カラムと3カラムは、1カラムに切り替わったときに最大幅になるので、約 590px です。（<p> タグの中に配置したときの横幅です。<p> タグの中に配置すると、コンテンツの両端が揃います。）

最大表示サイズより大きい画像は自動的に縮小されるので、特に幅 1000px を超える画像は 1000px 以内に加工しておくとファイルサイズを抑えられます。

最大表示サイズより小さくても、画像の右側にスペースが空くだけなので問題はありません。

どのスクリーンサイズでも横幅ピッタリに表示したい場合は、幅 1000px（正確には 990px）の画像を用意してください。

補足：index.html に画像を配置する際は、img 要素に width と height は設定しないでください。（画像の幅と高さは、スクリーンサイズに応じて自動調整されます）

2カラムレイアウト

3カラムレイアウト

ブロックと文字色

現在、5ブロック（はじめに｜1カラム｜2カラム｜3カラム｜ブロック）ありますが、減らすことも増やすこともできます。

index.html に記載したコメント（<!-- -->で囲まれたブラウザには表示されないメモ書き）を参考に編集してみてください。

文字色は3つ用意しました。

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

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

※補足は class「supplement」です。