bouquet

11.22 テンプレート公開

rank rank rank
12345

sample text

サンプルテキストです
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす

span:sample
mark:sample
strong:sample
small:sample

class="center"で中央寄せ

class="right"で右寄せ

section > sectionの入れ子で横幅90%

details / 詳細

ここに詳細を書くことができます
いろはにほへとちりぬるをわかよたれそつねならむ

details > details

このタグは入れ子にすることも可能です
いろはにほへとちりぬるをわかよたれそつねならむ

sample contents

long / seriese

作品のタイトル

sample text
xx.xx.xx

作品のタイトル

sample text
xx.xx.xx

作品のタイトル

sample text
xx.xx.xx

作品のタイトル

sample text
xx.xx.xx

* class="icon"のfilter:grayscale(100%);で挙動が重くなるおそれがあります、不必要であれば削除してください

short log

作品のタイトル作品のタイトル作品のタイトル作品のタイトル作品のタイトル作品のタイトル作品のタイトル作品のタイトル作品のタイトル作品のタイトル

sample two column

sectionにclass="half"を追加することにより700px以上で2カラムになります
カラム落ちしないようにHTMLの記述にはご注意ください

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす

sample form

material and view source

material


background image by Sinitta Leunen from Unsplash

h1のブーケやタブメニュー下の蔦の画像はアラスカさまよりお借りしました、ありがとうございます
配布元サイトさまの規約を守り、そちらのほうから保存してご使用ください

* 11.25 cssの一部を修正しました、ご指摘ありがとうございました

source code

magnolia」の、タブメニューを画面下に配置したものになります、同様にラジオボタンはチェックの有無によってタブの切り替えを行なっております
そのためメニュー項目やコンテンツなどのタブを増やす場合、ただコピペするだけでなくinputやlabelのid名、forなどの変更が必要になりますのでお気をつけください
またメニューの位置は変更可能ですので適宜アレンジやカスタマイズをしてみてください

head

body