#002:幅いっぱい背景画像&中央配置&テキスト中央揃え

ブラウザで確認する

スポンサーリンク

HTMLをコピーする

下記ソースをコピーする

<div id="luck-0000002" class="luck-0000002">
    <div class="luck-0000002-main">
        <h2 class="luck-0000002-title">『つくるよ by Luck』について</h2>
        <div class="text">
            <p>『つくるよ』というサイトは、デザイナーさんやコーダー初心者さんが自分で簡単にサイトを作れるようなモノを無償で提供したいと思って作りました。</p>
            <p>提供するモノはシンプルです。サイトの色々なパーツのHTMLをサイト上からコピーするだけで使えるようにしています。覚えていただくことは、「htmlソースのベース」と「style.css」のダウンロードと「htmlソースのベース」へのHTMLソースのコピペです。
            <br>難しいことはありませんし、手順は丁寧に説明する予定です。</p>
        </div>
    </div>
</div>

ブラウザで確認する

概要

  • 本文の一部として利用しやすい
  • 背景に関連画像を置くと伝わりやすい
  • テキスト部分に白背景を置いているので読みやすい

特徴

  • 背景が幅いっぱい
  • 背景の中央にテキストブロックを配置
  • レスポンシブに対応

画像について

画像は自分で撮った写真、作成した画像を使ったり、「ぱくたそ」さんの画像を利用させていただいています。

画像は必ず差し替えるか、または、ご自身で「ぱくたそ」さんからダウンロードの上ご利用ください。※画像が見つからない場合は僕が撮影したものかもしれません

どうぞよろしくお願いいたします。

CSSをダウンロードする

 CSSをダウンロードする

「style.css」をダウンロードしてから、ご自由にご利用ください。改変していただいても大丈夫ですし、商用で再利用していただいても構いません。

また、「style.css」は随時更新していきますが、本サイトで提供している全てのHTMLに対して共通で使えるようにしています。過去のHTMLのスタイルも記載されていますので「style.css」を上書きしても問題ありません。

ただし、念のため、過去にダウンロードした「style.css」は上書きする前にバックアップしておいてください。

ダウンロードできなかった人はこちらからダウンロードしてみてください。