女性起業家さんがホームページで使えるおしゃれな料金表・メニュー表を１２色つくりました。
ボックス型なのでしっかりとした印象ですが、大人可愛い色で使いやすさを工夫しています*
商用利用可能です。HTMLにコピペするだけでホームページに使えるので便利です。
女性起業家向けホームページのボックス型料金表・メニュー表12色
くすみピンク
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（背景ピンク） -->
<div style="background-color: #e6d0cd; color: #595454; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #595454; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #e6d0cd; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #e6d0cd; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #e6d0cd; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #e6d0cd; border-radius: 3px; font-size: 13px; color: #e6d0cd; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
くすみブルー
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（くすみブルー） -->
<div style="background-color: #b8c7d1; color: #43484c; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #43484c; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #b8c7d1; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #b8c7d1; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #b8c7d1; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #b8c7d1; border-radius: 3px; font-size: 13px; color: #b8c7d1; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
くすみラベンダー
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（くすみラベンダー） -->
<div style="background-color: #c4b5c7; color: #4a3e4e; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #4a3e4e; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #c4b5c7; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #c4b5c7; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #c4b5c7; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #c4b5c7; border-radius: 3px; font-size: 13px; color: #c4b5c7; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
くすみイエロー
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（くすみイエロー） -->
<div style="background-color: #d9c47d; color: #403820; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #403820; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d9c47d; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d9c47d; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d9c47d; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #d9c47d; border-radius: 3px; font-size: 13px; color: #d9c47d; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
チェリーレッド
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（くすみチェリーレッド） -->
<div style="background-color: #aa5b66; color: #ffffff; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #ffffff; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d68a95; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d68a95; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d68a95; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #d68a95; border-radius: 3px; font-size: 13px; color: #d68a95; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
くすみミント
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（くすみミント） -->
<div style="background-color: #a8c3b8; color: #3c4a43; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #3c4a43; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #a8c3b8; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #a8c3b8; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #a8c3b8; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #a8c3b8; border-radius: 3px; font-size: 13px; color: #a8c3b8; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
パステルピンク
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（パステルピンク） -->
<div style="background-color: #f7c5d3; color: #4a343b; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #4a343b; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f7c5d3; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f7c5d3; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f7c5d3; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #f7c5d3; border-radius: 3px; font-size: 13px; color: #f7c5d3; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
ミルクティー
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（ミルクティー） -->
<div style="background-color: #d8c3b0; color: #40352c; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #40352c; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d8c3b0; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d8c3b0; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d8c3b0; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #d8c3b0; border-radius: 3px; font-size: 13px; color: #d8c3b0; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
パステルブルー
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（パステルブルー） -->
<div style="background-color: #b5d8eb; color: #2d4350; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #2d4350; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #b5d8eb; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #b5d8eb; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #b5d8eb; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #b5d8eb; border-radius: 3px; font-size: 13px; color: #b5d8eb; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
バニラホワイト
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（ホワイトバニラ） -->
<div style="background-color: #f3ede2; color: #423b32; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #423b32; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f3ede2; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f3ede2; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f3ede2; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #f3ede2; border-radius: 3px; font-size: 13px; color: #f3ede2; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
テラコッタ
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（テラコッタ） -->
<div style="background-color: #d37356; color: #ffffff; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #ffffff; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d37356; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d37356; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #d37356; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #d37356; border-radius: 3px; font-size: 13px; color: #d37356; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
アプリコット
HTML CODE
<div style="max-width: 100%; margin: 20px auto; padding: 0; background-color: #595454; color: #ffffff; font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif; box-sizing: border-box; overflow: hidden; border-radius: 5px;">
<!-- ヘッダー（アプリコット） -->
<div style="background-color: #f8a07a; color: #4a2818; text-align: center; padding: 20px 10px;">
<div style="font-size: 24px; font-weight: bold; letter-spacing: 0.05em;">PRICE LIST</div>
<div style="width: 30px; height: 1px; background-color: #4a2818; margin: 8px auto;"> </div>
<div style="font-size: 13px; letter-spacing: 0.1em;">ネイルメニュー</div>
</div>
<!-- コンテンツエリア -->
<div style="padding: 20px 15px;">
<!-- アイテム1 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー1</div>
<div style="font-size: 12px; color: #cccccc; margin-top: 2px;">メニュー1の内容を入力します</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f8a07a; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金1</div>
</div>
<!-- アイテム2 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー2</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f8a07a; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金2</div>
</div>
<!-- アイテム3 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #6e6969;">
<div style="flex: 1;">
<div style="font-size: 15px; font-weight: bold; letter-spacing: 0.05em;">メニュー3</div>
</div>
<div style="font-size: 18px; font-weight: bold; color: #f8a07a; font-family: Arial, sans-serif; margin-left: 10px; white-space: nowrap;">料金3</div>
</div>
<!-- 注意事項 -->
<div style="margin-top: 25px; padding: 15px; border: 1px solid #f8a07a; border-radius: 3px; font-size: 13px; color: #f8a07a; line-height: 1.6;">
・注意事項1を入力します。<br>
・注意事項2を入力します。<br>
・注意事項3を入力します。
</div>
</div>
</div>
✧まとめ
女性起業家さんがホームページで使いたくなる、料金表・メニュー表をつくりました♡
ボックス型の配布しているメニュー表はアレンジ自由です^^
囲み枠はコピペで簡単に取り入れられて、ブログの世界観をぐっと素敵にしてくれるアイテムです。
でも実は、ブログよりも「ホームページ」を持つ方が、あなたの世界観をもっと自由に、もっと深く表現できるんです。
今回の料金表のように、細部まで”らしさ”にこだわったデザインを、ホームページ全体で叶えられたら…♡
ルルプチは、訪れた人が思わず「素敵」と感じる、大人可愛いホームページ作りが得意です。
あなたの世界観を丸ごと表現できるホームページ、気になった方はこちらをご覧ください◎
↓ 画像タップで移動します
