見出し画像

ホームページ作成 色ワクをつけるhtmlは?

ホームページを、wordpressで作っている中小企業の方がたくさんいます。
でも、「色ワクなどのきれいなものができない」という方もおられるので、その簡単な方法をお伝えします。

1,単純な色ワク

画像1

通常の色ワクは下記のHTMLを使います。

<div style="background: #ffffea; padding: 15px; border: 4px solid #B43104; border-radius: 15px; word-break: break-all;">
内容をここに入れる
</div>

色を選ぶ時のポイント。私は自分のカラーを #B43104 という落ち着いた赤色にしています。
上記のコードの #B43104 を自分の色に変えて設定してみてください。色は下記のサイトで選びボタンを押したら ♯〇〇〇〇〇〇 と表示されます。
https://html-color-codes.info/japanese/

画像2

2,見出し付きの色ワク

画像3

見出し付きの色ワクは下記のHTMLを使います。

<div style="background: #B43104; padding: 5px 10px; color: #ffffff;"><strong>
見出しはここ
</strong></div>
<div style="background: #ffffff; padding: 10px; border: 3px solid #B43104;">
下部の内容はここ
</div>

上記と同じように、色ワクのカラーは
上記のコードの #B43104 を自分の色に変えて設定してみてください。色は下記のサイトで選びボタンを押したら ♯〇〇〇〇〇〇 と表示されます。
https://html-color-codes.info/japanese/

御社のDXを支援できる内容

中小企業庁デジタル化応援隊の「IT専門家」なので、3,500円/時間の謝金が事務局から支払われます。そのため、遠慮なく、お問い合わせください。
・SNSの機能を拡張するWEBアプリを開発し連結
・SNS上の販売システムの構築
・競合他社とのWEBサイトのアクセス数と属性比較
・LINEスタンプの作成
・ネット広告の配信代行

ロゴバナー


ありがとうございます。 よろしくお願いします。