はじめに
前回の記事では、BULMAを使ってWebページを１枚作りはじめ、ヘッダー部分までを完成させました。第３回目のこの記事では、メインコンテンツ部分を作成していきます。
追加位置
ここからの手順で追加するHTMLの追加位置が、分かりやすいように番号を振っておきます。
<!DOCTYPE html>
<html>
<head>
<!-- 省略 -->
<!-- 記述場所③ -->
</head>
<body>
<header>
<!-- 省略：前回の記事で完成済み -->
</header>
<main class="columns">
<div class="submenu column is-3">
<!-- 記述場所① -->
</div>
<div class="column">
<!-- 記述場所② -->
</div>
</main>
<!-- 記述場所④ -->
</body>
</html>
メインコンテンツ
メインコンテンツのレイアウトは第2回目の最初に行っておいたので、今度は、そこにコンテンツを表示するための要素を配置していきます。
サイドバー部分
まず左側の段です。 記述場所①に下記のHTMLを追加してください。
<aside class="box">
カサレアルは、ＸＸＸＸＸＸＸＸを実現する会社です。私たちは△△△△△△△△を通じて社会に貢献していきます。
</aside>
<aside class="box menu">
<p class="menu-label">
おすすめの一言
</p>
<ul class="menu-list">
<li><a href="#">株式会社カサ<small>@casainc</small></a></li>
<li><a href="#">レア製作所<small>@rea-product</small></a></li>
<li><a href="#">オフィス・アル<small>@office-al</small></a></li>
</ul>
<p class="menu-label">
キーワード
</p>
<ul class="menu-list">
<li><a href="#">システム開発</a></li>
<li><a class="is-active" href="#">技術教育</a>
<ul>
<li><a href="#">一社研修</a></li>
<li><a href="#">定期開催コース</a></li>
</ul>
</li>
<li><a href="#">ソフトウェアテスティング</a></li>
</ul>
</aside>
"box"クラスは、内包する要素を、背景色白+角丸+影付き+境界線付きの箱型エリアで包むためのコンポーネントです。
"menu"クラスは、垂直型のナビゲーションを構築するためのコンポーネントです。
- menu
- "Menu"コンポーネントの大元の要素（親要素）用のクラス
- menu-label
- "Menu"コンポーネント内の各メニューをまとめるためのラベル要素を表すクラス
- menu-list
- "Menu"コンポーネント内のメニュー要素を表すクラス
メインコンテンツ本体部分
次に右側の段です。 記述場所②に下記のHTMLを追加してください。
<article class="box media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</p>
</figure>
<div class="media-content">
<div class="content">
<p><strong>CASAREAL</strong><br>
内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容<br>
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
</p>
</div>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src="http://placehold.it/96x96">
</p>
</figure>
<div class="media-content">
<div class="content">
<p><strong>Sean Brown</strong><br>
コメントコメントコメントコメントコメントコメントコメントコメントコメントコメント<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
<article class="media">
リプライリプライリプライリプライリプライリプライリプライリプライリプライリプライ。
</article>
<article class="media">
リプライリプライリプライリプライリプライリプライリプライリプライリプライリプライ。
</article>
</div>
</article>
</div>
</article>
<article class="box media">
<figure class="media-left">
<p class="image is-48x48">
<img src="http://placehold.it/96x96">
</p>
</figure>
<div class="media-content">
<div class="content">
<p><strong>CASAREAL</strong><br>
内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容、内容<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
</div>
</article>
"media"クラスは、Twitterなど、ユーザー同士の交流を主軸としたWebサイト等で多く見られるデザインを再現したコンポーネントです。"Media Object"コンポーネントと命名されています。
- media
- "Media Object"コンポーネントの大元の要素（親要素）用のクラス
- media-left
- "Media Object"コンポーネント内の主にユーザーのアイコンなどを表すクラス
- media-content
- "Media Object"コンポーネント内の本文を表すクラス
"Media Object"コンポーネント内に"Media Object"コンポーネントをネストすることで、階層的な表示をすることもできます。また"Media Object"コンポーネント内にはリンクや入力ボックス、ボタン等の他のBULMAコンポーネントを配置することができます。
"image"クラスは、画像(img)要素を内包するために用意されています。このクラスを使用することで画像のロードが遅い場合でも、（画像サイズが不明の場合に起こる）レイアウトの崩れを防止することができます。
おまけとして背景色を調整しておきます。 記述場所③に下記のように追加してください。
<style>
main {
background-color: #eeeeee;
}
</style>
BULMAは、利用者が独自で用意するCSSを邪魔しないようにできていますので、BULMAのスタイルに少し付け足しで変更したい部分があれば躊躇なく変更することができます。
フッター
最後にフッターを配置しておきます。そのためのクラスとして"footer"が用意されています。
記述場所④に下記のHTMLを追加してください。
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
2020 ©CASAREAL
</div>
</div>
</footer>
出来上がり
Webページが１枚、出来上がりました。お疲れさまでした。
最後に
CSSフレームワークであるBULMAの機能を一通り試しながら１枚のWebページが完成しました。わりと簡単にそこそこ見栄えのいいものができたのではないかと思います。
もしなにかのWebサイトを「ささっと」作る必要ができたら、BULMAを利用すると素早くいい感じにできるんではないかと思います。ぜひ使ってみてください。以上です。
# リンク
CSSフレームワーク BULMA チュートリアル①
CSSフレームワーク BULMA チュートリアル②
CSSフレームワーク BULMA チュートリアル③