5分でBulmaCSSを学ぶ-初心者向けのチュートリアル

Bulmaは、多くの開発者がBootstrapよりも好むシンプルでエレガントな最新のCSSフレームワークです。個人的には、ブルマの方がデフォルトでデザインが良く、軽量感もあると思います。

このチュートリアルでは、ライブラリの概要を簡単に説明します。

また、無料のBulmaコースも作成しました。ここをクリックしてチェックしてください!

画像をクリックするとコースにアクセスできます

セットアップ

Bulmaのセットアップは非常に簡単で、NPMを使用する、ドキュメントから直接ダウンロードする、CDNを使用するなど、さまざまな方法でセットアップできます。次のように、HTMLファイルからCDNにリンクします。

これにより、Bulmaクラスにアクセスできるようになります。そして、それが実際にすべてのブルマです-クラスのコレクション。

修飾子

ブルマについて最初に学ぶべきことは、修飾子クラスです。これらを使用すると、ほとんどすべてのブルマ要素に代替スタイルを設定できます。それらはすべてis-*またはhas-*で始まり、次に、を必要*なスタイルに置き換えます。

この概念を正しく理解するために、ボタンを見てみましょう。

ボタン

通常のボタンをBulmaボタンに変えるには、単純にクラスを指定しbuttonます。

Click here 

その結果、次のスタイルになります。

ご覧のとおり、デフォルトではフラットなデザインになっています。スタイリングを変更するには、Bulmaモディファイアを使用します。ボタンを大きく、緑色にし、角を丸くすることから始めましょう。

Click here 

この結果は、見栄えの良いボタンです。

修飾子を使用してボタンの状態を制御することもできます。たとえば、クラスis-focusedを追加して、その周りに境界線を追加しましょう。

最後に、has-*修飾子の1つも使用しましょう。これらは通常、要素の内部を制御します。私たちの場合、テキスト。追加しましょうhas-text-weight-bold

結果は次のとおりです。

このシステムの柔軟性を理解するために、さまざまなクラスの組み合わせを試してみることをお勧めします。組み合わせはほぼ無限大です。詳細については、ドキュメントのボタンセクションを確認してください。

CSSフレームワークの中核となるのは、列を解決する方法です。これは、これから構築するほぼすべてのWebサイトに関連しているためです。BulmaはFlexboxに基づいているため、列の作成は非常に簡単です。4列の行を作成しましょう。

 First column Second column Third column Fourth column 

まず、クラスが。のコンテナを作成し、columns次に各子にクラスを与えますcolumn。その結果、次のようになります。

また、列をわかりやすくするために、列の周囲に境界線を追加しました。

また、列をわかりやすくするために、列の周囲に境界線を追加しました。

必要な数の列を追加できることに注意してください。Flexboxは、スペースをそれらの間で均等に分割します。

列に色を付けるために、列内のテキストを

タグを付け、notificationクラスとis-*修飾子を付けます。たとえば、次のようになります。

最初の列

、、、および修飾子を使用してこれを実行するis-infois-success、次のようになります。is-warningis-danger

このnotificationクラスは、is-*モディファイアを使用して背景を色で塗りつぶすことができるため、実際にはユーザーに何かについて警告することを目的としています。ここでは、列を分離するのに適しています。

列の幅も簡単に制御できます。is-half緑の列に修飾子を追加しましょう。

その結果、2番目の列が幅の半分を占め、他の3つの列が残りの半分の3分の1を占めます。

列の幅を制御するために使用できるオプションは次のとおりです。

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

勇者

最後に、ブルマでヒーローを作成する方法も学びましょう。私たちは、セマンティックを使用します、それにのクラスを与えるherois-info、それにいくつかの色を与えます。また、クラスに子を追加する必要がありhero-bodyます。

このヒーローに何か意味のあることをさせるために、ボディ内にコンテナ要素を追加し、タイトルとサブタイトルを追加します。

Primary title

Primary subtitle

今では見栄えがし始めています!大きくしたい場合はis-mediumタグ自体を追加するだけです。

 ... 

以上です!

これで、ブルマがどのように機能するかについての基本的な味がわかりました。そして最良の部分は、ライブラリの残りの部分が、これまでに見た概念と同じくらい直感的で簡単なことです。したがって、これを理解すれば、残りの部分も問題なく理解できます。

詳細を知りたい場合は、Scrimbaの無料のBulmaコースをチェックしてください!

読んでくれてありがとう!私の名前はPerBorgenです。私は、Scrimbaの共同創設者です。コーディングを学ぶ最も簡単な方法です。プロフェッショナルレベルで最新のウェブサイトを構築する方法を学びたい場合は、レスポンシブウェブデザインブートキャンプをチェックしてください。