2019.02.26 12:00

AmebaOwndのCSSカスタマイズ・飲食店のホームページをつくる

メニュー表を作りたい

皆さんご存知の通り、AmebaOwndは無料プランであっても商用利用が許されています。飲食店や個人事業の広報宣伝用にAmebaOwndを使っている方も多いと思います。

さて、飲食店のウェブサイトの場合、メニュー表を作りたいですよね。とはいえ全メニューの写真を載せた凝った作りのメニュー表をつくるのは大変なので、とりあえず単なる料理名と価格だけを並べた文字だけのメニュー表をまず作りたいものです。

しかしながら、AmebaOwndではテーブル(表組)は使えません。HTML言語で記述すれば一応書けるのですがそのためだけにHTMLを覚えるのも効率的でありませんし、価格改定の際にテーブル(表組)を書き直すのも大変です。

そこでAmebaOwndのCSSカスタマイズ機能を使って箇条書きリストをテーブル(表組)のように見せかけるためのCSSコードを作成しました。

AmebaOwndのCSSカスタマイズ機能については以下の記事を合わせてご参照ください。

CSSカスタマイズでWebページの見栄えと読みやすさを向上する

ユーザーに好ましいUXを与える様々な要素のうち、「見た目の美しさ」は即効性のある要素です。しばらく使い続ければ利便性と使いやすさに優れているとわかるアプリであっても、見た目の美しさが足りなければ、ユー

UX Yokohama｜UXを学ぶ横浜人のためのIT勉強会コミュニティ

箇条書きリストをテーブル(表組)のように見せかける

以下のCSSコードをAmebaOwndのCSSカスタマイズ欄に追記することにより、箇条書きリストをテーブル(表組)のように見せかけることができます。

CSSサンプル

h4+ul{list-style-type:none; padding-left: 0; border-bottom:1px solid #888;}
h4+ul li:nth-child(3n+1),
h4+ul li:nth-child(3n+2),
h4+ul li:nth-child(3n){display:inline-block;}
h4+ul li:nth-child(3n+1){width:100%; border-top:1px solid #888;}
h4+ul li:nth-child(3n+2){width:75%;}
h4+ul li:nth-child(3n){width:25%;text-align:right;}

CSSサンプルの解説

CSSの1行目：
「見出しh4の直後にある箇条書きリスト」の行頭記号を消しています。さらに、箇条書きリスト全体を囲む見えない枠線のうち下の線だけを灰色で表示させました。
CSSの2行目：
「見出しh4の直後にある箇条書きリスト」の各行をインラインブロック（ブロックではあるが、文字列における１文字１文字のように一行に並び、行がページ幅いっぱいを越えると自動的に改行されて2行目以降に並ぶ特徴を持つHTML属性）として設定しています。
CSSの3行目：
「見出しh4の直後にある箇条書きリスト」の3n+1行目（1行目、4行目、7行目…）のインラインブロックの幅を100％に設定しています。幅を100％に設定したのでインラインブロックでありながらも1行として表示され続けます。さらに、箇条書きリストの各行を囲む見えない枠線のうち上の線だけを灰色で表示させました。
CSSの4行目：
「見出しh4の直後にある箇条書きリスト」の3n+2行目（2行目、5行目、8行目…）のインラインブロックの幅を75％に設定しています。
CSSの5行目：
「見出しh4の直後にある箇条書きリスト」の3n行目（3行目、6行目、9行目…）のインラインブロックの幅を25％に設定しています。幅75％と幅25％は合わせて100％になるので、3n+2行目と3n行目はまとめて1行に並べ替えられます。また3n行目には金額を書く予定であるので、文字揃えを右揃えに設定しました。

CSSカスタマイズでつくった飲食店のウェブサイト(作例)

さて、上記のCSSを適用するとブラウザではどう見えるのか確認してみましょう。以下に紹介する２つのウェブサイトはCSSカスタマイズを解説するために作成したサンプルサイトです。なお、飲食店風の雰囲気を出すためには配色やフォントの変更も必要ですので、紹介するサンプルサイトでは配色やフォントもまとめてCSSカスタマイズしてあります。