コンテンツエリア
タイトル、日付、本文を記載できる日記のようなコンテンツエリアです。
本文
本文
<div class="area area-diary">
<div>
<div class="title">タイトル</div>
<hr>
<div class="date">日付</div>
<div class="body">
<p>本文</p>
</div>
</div>
<div>
~
</div>
</div>
area area-diary
クラスを設定した要素直下の<div>
を1つの記事としてレイアウトします<div>
を増やすと記事を増やすことができます<div>
の中には以下のクラスを設定した要素を配置することができますclass="title"
記事タイトルclass="date"
日付class="body"
本文- 記事内の下線は
<hr>
で挿入できます
装飾
本文
本文
<div class="area area-diary deco-border">
~
</div>
area area-diary
クラスを設定した要素に以下の装飾設定クラスを設定すると、記事が装飾されます。class="deco-border"
枠線class="deco-bg"
背景色
続きを読む機能
複数開ける
本文
続きを読む機能
続きを読む機能
続きを読む機能
続きを読む機能
続きを読む機能
続きを読む機能
本文
続きを読む機能
続きを読む機能
続きを読む機能
続きを読む機能
続きを読む機能
続きを読む機能
<div class="area area-diary">
<div>
<div class="body">
<p>本文</p>
<div class="more">
<input id="more_20211008_1" type="checkbox">
<label for="more_20211008_1">ここにテキストも入れられます</label>
<div>
<p>
続きを読む機能
</p>
</div>
</div>
<div class="more">
~
</div>
</div>
</div>
</div>
body
クラスを設定した要素にmore
クラスを設定した<div>
を入れる<div class="more">
~</div>
の中に以下の要素を順番通り入れる<input>
id
を設定id
はページ内で値を重複しないようしてくださいid
は<label>
のfor
と値を一致させてくださいtype
以下のどちらかを設定checkbox
続きを同時に複数開くことができるradio
別の続きを開いたら、前に開いていた続きは閉じる<label>
for
を設定for
はページ内で値を重複しないようしてくださいfor
は<input>
のid
と値を一致させてください<div>
~</div>
<div class="more">
~</div>
を増やすと複数の続きを読むを設置できます