隼哉サイト制作を進めていく中で、CSSによるスタイリングは欠かせない作業です。上記のような悩みを抱える方にはCSSフレームワークの1つである「Bootstrap」を使うのがおすすめです!Bootstrapを使えば、html上で指定のclass名を使用することで簡単にスタイリングができます。この記事では、Bootstrapの便利な使い方や、簡単な導入方法を紹介します。Bootstrap」を指します。versionは最新版の5.x.xを基準として解説します。※この記事の中のコードは「”」の記号などの問題でエディタにコピペしてもうまく反映されない可能性があります。その場合は、自分で打ち直すかBootstrap公式サイトより正しい表記をコピーする等して対応してください。system/ColumnsBreakpointsColorBootstrapの導入方法Bootstrapを利用して効率よくサイトコーディングを進めましょうCSSフレームワーク「Bootstrap」とは?BootstrapはTwitter社が2011年8月19日にリリースしたCSSフレームワークです。現在第5版までリリースされており、世界的にもよく使われているCSSフレームワークだと言われています。marginやpadding、font-sizeやcolorなどの基本的なスタイリングが特定のclass名に紐づいており、開発者側で設定しなくても使うことができます。初期設定であればheadタグ内に1行追加するだけで利用できるため、初心者でも簡単に使うことが可能です。通常cssでスタイリングを行う場合は、html側でタグやclass,idを設定してcss側で指定しますが、Bootstrapを利用すればclass名を設定するだけでスタイリングすることが可能です。#XXX;」といった記述をしなくても要素の上にborderを付けることができます。cssファイルの記述やclass名を考えることなくスタイリングをすることができるので、開発にかける時間を短縮することができます。Bootstrapでよく使う機能を5つ紹介!ここでは私がBootstrapを使って開発する中でよく使う便利な機能を5つ紹介します。system/ColumnsBreakpointsColorこれらの機能はよく使う上に簡単に使うことができるのでとても便利です。順に説明していきます。SpacingBootstrapではmarginとpaddingの方向や大きさを簡単に設定することができます。以下のような値がBootstrapの初期設定内にあり、class名に設定することで使用することができます。大きさ(px指定)0:0px1:1rem×0.25(通常4px)2:1rem×0.5(通常8px)3:1rem(通常16px)4:1rem×2(通常24px)5:1rem×3(px通常48px)auto:auto(m:marginのみに設定可能)例えば「class=”mt-3′′」とつけると要素の上に16pxのmarginを設定することができます。「mx-4」や「py-5」などx、yの値を使えば、それぞれ左右、上下方向に同じだけのスペースをつくることができ、「m-2」など特に方向を指定しなければ上下左右に同じ大きさの空間を指定できます。見やすいサイトを作るには要素間の空間は重要になりますが、BootstrapのSpacingを使えばそれらを簡単に指定することが可能です。sizeテキストサイズの指定もclass名のみで簡単に設定することができます。sizefs-1:2.5rem(通常40px)fs-2:2rem(通常32px)fs-3:1.75rem(通常28px)fs-4:1.5rem(通常24px)fs-5:1.25rem(通常20px)fs-6:1rem(通常16px)例えば「class=”fs-3′′」と指定することで、その要素内の文字サイズを28pxに指定することができます。sizeを使用することでcssへの記述なしに文字サイズを調整することが可能です。systemとColumnsを使えば、要素の横並びが簡単に実現できます。system画面幅に12分割し、要素を横並びにするスタイリングです。「class=”container(もしくはcontainer-fluid)”」で画面幅を指定し、その中に「class=”row”」と書くことで指定した幅を12分割し、row内の要素を横並びにすることができます。※わかりやすく色を付けて表示しています。systemで12分割したうち、要素が占める割合を決定することができます。Grid内に「class=”col-4′′」を3つ置いた場合は以下のように配置されます。12の範囲内であれば他にも様々な配置が可能であり、横並びのデザインを簡単に実装することができます。systemとColumnsの機能は横並びのデザインを作成するときにとても便利な機能です。containerとcontainer-fluidcontainerは画面幅に一定の大きさ(width)を設定するのに対し、「class=”container-fluid”」は常に画面幅いっぱい(width:100%;)を指定するクラスです。大きな画面で訴求したい時や、デザインのメリハリをつけたいときなどに使用するとよいでしょう。※container-fluidの場合のGrid幅(横幅1920pxの場合)Breakpoints昨今のウェブサイトは「モバイルファーストの時代」と言われており、サイトが閲覧されるデバイスがスマートフォン端末であることが多くなっています。それに伴って、サイト制作をする際はスマートフォンやタブレットで見やすいレスポンシブデザインでの開発が重要になっています。cssでレスポンシブ対応をする場合はメディアクエリを使って「pc.css」「sp.css」に分けてコーディングするなどしていましたが、BootstrapのBreakpointsを使えばより簡単にレスポンシブ対応をすることが可能です。Bootstrapには画面幅ごとに以下のようなBreakpointsが設定されており、他の機能と組み合わせることでレスポンシブデザインのコーディングがclass名のみで対応できます。my-2′′」などと指定すれば、画面幅が1200px以上の時は上下に48pxの余白が、それ未満の画面幅の時には8pxの上下余白を設定することができます。PC用、SP用に新しい記述を書かずとも、1つのタグの中にclassを複数指定することでレスポンシブ対応ができる、というのが便利なポイントです。systems/Columnsは全てBreakpointsに対応しているので、これらを組み合わせることで効率よくレスポンシブ対応がされたデザインを構築することができるのです。colorsが設定されており、class名の指定だけで色を変更することが可能です。背景色:「bg-danger」(bg:background)など青や赤、黄色など基本的な色が使えるので、サイトのテーマカラーなどもここから簡単に選択し、デザインに起こすことができるでしょう。Bootstrapの導入方法class名の指定で簡単にスタイリングをすることができるBootstrapですが、導入方法も非常に簡単です。<head>タグの中に以下のコードを入力するだけで、上記で紹介した機能を使用することができるようになります。crossorigin=”anonymous”>~~~~~~~~~~~~~~~~~~~~~~~~~~</head>ぜひすぐに導入して、便利な機能を使ってみてください。※この記事の中のコードは「”」の記号などの問題でエディタにコピペしてもうまく反映されない可能性があります。その場合は、自分で打ち直すかBootstrap公式サイトより正しい表記をコピーする等して対応してください。Bootstrapを利用して効率よくサイトコーディングを進めましょうここまでBootstrapの便利な機能を紹介してきました。Bootstrapは簡単に導入でき、cssファイルを使わなくても文字サイズや余白などを指定できる便利なフレームワークです。レスポンシブデザインの対応も可能であり、これからのモバイルファースト時代のコーディングにおいても十分に力を発揮するでしょう。あなたもBootstrapを使って、効率よくサイトコーディングを進めてみてください。4年時より弊社事業に参画し、卒業後入社。Webサイト制作全般を担当する他、WEBマーケティングメディアやハイクラス転職メディアのSEOディレクションも担当。>記事タイプから探すコラムお客様からご質問を受けるWebマーケティングのノウハウを解説しています。ナレッジ弊社メンバーが業務で実践しているノウハウやTipsを解説しています。Googleツールから探すGoogleアナリティクスGoogleサーチコンソールahrefsWordPressCONTACTまずは無料相談からお気軽にお問い合わせください。