イノマタの趣味部屋コンテンツへスキップこのwebサイトの先進的な機能は、ブラウザーのJavaScriptを有効にする必要があります。簡単なCSSフレームワーク「Bluma」を使ってみたBlumaという使いやすいCSSワークフレームがあると聞いて使ってみました。コメントを残すWebアプリを作るには画面表示も必要。使いやすいCSSワークフレームがあると聞いて使ってみました。目的Railsでwebアプリを作ろうと思っているんですが、その後のビューを作成することが目的です。グラフを表示するのが機能のメインなんですが、使いやすいCSSワークフレームがあると聞いたので周りのデザインを先に作ってしまおうと思います。構成は以下のようになっています。詳細ページ1詳細ページ2詳細ページ3BlumaBluamaは、FlexboxをベースにしたフリーのCSSフレームワークです。下の公式ページからダウンロード出来ますが、CDNから利用すればダウンロードする必要がありません。CDNとは、デジタルコンテンツをネットで大量に配信するためのネットワークの事です。これを利用するとURLを貼ることでダウンロードしなくてもBlumaを利用できます。BLUMAビューをHTMLとCSSで書いていきます(おまけも参照)。Blumaを使用する準備は、該当のURLを貼るだけです。sizeclassを割り当てることで、ボタンなどを表示できます。色や大きさはis-large,is-primaryなどで指定できます。columncolumsで囲ったcolumnは均等に並べられます。x/12columnに大きさの指定をしてみます。この場合、左から12に対していくつの割合なのかを指定できます。うまく並ばなかったので端までは並ばないかもしれません。下のように分数で与えるとより細かく指定できます。x/y作った物(例)bluma以外のCSSの色はこちらを見ました。詳細画面グラフはcanvas.jsで書きました。今回はメインと離れるので割愛します。</header>navコンポーネントでナビゲーションとして仕様したい要素を囲う事でnavとして使用可能になります。実際に表示されるものをしていするときに使用すると、上下方向をちょうど良くしてくれます。levelは水平に並べるコンポーネントで、tabに内包されたlistがタブとして表示されます。例の右上の部分になります。is-activeは現在表示しているものの色を変えるなどするためのものです。JavaScriptは使っていないため、動くわけではありません。has-addonsは調節機能であり、今回は隣のボタンと連なって見えるように調節してくれます。場所はleft、rightなどで調節できます。fa-〜"はアイコンを表示してくれます。これもheadでURLを指定すればすぐに使えます。href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">mainHEROエリアには最も目立たせたいものを配置します。"hero-foot"はヒーローエリアの底部に表示されるエリアです。"hero-body"の主コンテンツは垂直方向にセンタリングされます。"is-bold"モディファイアーはヒーローエリアの背景色をグラデーションにします。"container"モディファイアーは内包するコンテンツを水平方向にセンタリングします。heroを変な場所に置くと、clumonに組み込まれつつ大きく表示したりするのでレイアウトがおかしくなります。サーバーが24時間常に監視し続けます。</main>boxは四角で囲うためのものです。is-8"がそれぞれ指定した大きさで並んでいます。is-8"内部でmediaが縦に並んでいます。</p></figure>mediaはtwitterのようなメディアをイメージしたものです。アイコンに画像を入れるとそれっぽくなりますが、使いませんでした。</main>menuは縦に並べる要素で、menu-listのlistが並びます。labelはキーワードなど、分類を書く部分です。</footer>footerは画面下部にかかれる要素です。書くことがありませんが、一応copyrightを書いておきます。「著作権はこちら、使うときはここに言って」という事です。EmmetHTMLをまずは書くわけですが、便利な機能を見つけたので使います。VScodeで拡張機能のEmmetをインストールし、左下の歯車をクリックして設定を開きます。<title>Document</title></head><body>これが一気に表示されます。