Help us understand the problem. What is going on with this article?

CSSフレームワーク BULMA チュートリアル③

はじめに

 前回の記事では、BULMAを使ってWebページを1枚作りはじめ、ヘッダー部分までを完成させました。第3回目のこの記事では、メインコンテンツ部分を作成していきます。

追加位置

ここからの手順で追加するHTMLの追加位置が、分かりやすいように番号を振っておきます。

tutorial.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を追加してください。

tutorial.html(抜粋)
 <aside class="box">
    カサレアルは、XXXXXXXXを実現する会社です。私たちは△△△△△△△△を通じて社会に貢献していきます。
  </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を追加してください。

tutorial.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)要素を内包するために用意されています。このクラスを使用することで画像のロードが遅い場合でも、(画像サイズが不明の場合に起こる)レイアウトの崩れを防止することができます。

おまけとして背景色を調整しておきます。 記述場所③に下記のように追加してください。

tutorial.html(抜粋)
<style>
  main {
    background-color: #eeeeee;
  }
</style>

BULMAは、利用者が独自で用意するCSSを邪魔しないようにできていますので、BULMAのスタイルに少し付け足しで変更したい部分があれば躊躇なく変更することができます。

フッター

最後にフッターを配置しておきます。そのためのクラスとして"footer"が用意されています。
記述場所④に下記のHTMLを追加してください。

tutorial.html(抜粋)
<footer class="footer">
   <div class="container">
     <div class="content has-text-centered">
       2020 ©CASAREAL
     </div>
   </div>
</footer>

出来上がり

a566ba94-4878-d6e2-509e-74f978fc6a31.png

Webページが1枚、出来上がりました。お疲れさまでした。

最後に

CSSフレームワークであるBULMAの機能を一通り試しながら1枚のWebページが完成しました。わりと簡単にそこそこ見栄えのいいものができたのではないかと思います。
もしなにかのWebサイトを「ささっと」作る必要ができたら、BULMAを利用すると素早くいい感じにできるんではないかと思います。ぜひ使ってみてください。以上です。

 リンク

CSSフレームワーク BULMA チュートリアル①
CSSフレームワーク BULMA チュートリアル②
CSSフレームワーク BULMA チュートリアル③

casareal
システム開発/評価・検証支援/品質改善支援サービスと現場に即した実践的なIT研修サービスを提供しています。
https://www.casareal.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした