はじめに

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

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

1カラムレイアウト

画像の最大表示サイズは、1カラムは幅約 941px です。2カラムと3カラムは、1カラムに切り替わったときに最大幅になるので、約 561px です。

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

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

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

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

スクリーンサイズが幅 600px 未満の場合は、1カラムになります。スクリーンサイズが幅 600px 以上の場合は、2カラムになります。

1段でも構いませんし、2段目以降を作成しても構いません。画像はなしで、テキストのみでも構いません。

2段目の左側です。画像はなしです。

3段目以降も作成できます。

スクリーンサイズが幅 600px 未満の場合は、1カラムになります。スクリーンサイズが幅 600px 以上の場合は、3カラムになります。

画像はなしで、テキストのみでも構いません。

1段目以降も作成できます。

2段目以降も作成できます。

2段目以降も作成できます。

2段目以降も作成できます。

3段目以降も作成できます。

3段目以降も作成できます。

3段目以降も作成できます。

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

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

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

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

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

※補足は class「supplement」です。