Bootstrap

Bootstrap

【Bootstrap】様々なユーティリティクラスの使い方を紹介

ユーティリティクラスとは、繰り返し使われる頻度の高いスタイルを設定したものです。コンポーネントを配置した後、位置やスペース、色などの調整をするのに使われます。今回は、様々なユーティリティクラスの使い方について紹介していきます(^^) ...
Bootstrap

【Bootstrap】フォーム・ボタンのコンポーネントの使い方を紹介

今回は、フォームやボタンコンポーネントの使い方を紹介していきます(^^) フォーム 基本的な使い方 まずは外枠となるフォームグループを作成するため、form-group クラスを設定した div 要素を配置します。入力フ...
Bootstrap

【Bootstrap】ナビゲーションコンポーネントの使用法について紹介

今回は、ナビゲーションのUIを構築するコンポーネントの使い方について紹介します(^^) ナビゲーション 基本的な使い方 ul 要素または nav 要素に nav クラスを追加してナビゲーションをつくります。どちらの要素を...
Bootstrap

【Bootstrap】基本的なコンポーネントの使い方を紹介

今回は、UIを構成する様々なコンポーネントの使い方を紹介します(^^) ジャンボトロン Webサイトのトップページによくあるメインビジュアルなどの、一般的なコンテンツよりも大きくインパクトのある表示をするのに便利なコンポーネン...
Bootstrap

【Bootstrap】画像とキャプションのあつかいについて紹介

今回は、figure 要素を使った図表のあつかいについて紹介します(^^) 図表の基本となるスタイリング figure 要素やfigcaption 要素に、figure クラス・figure-img クラス・figure-ca...
Bootstrap

【Bootstrap】テーブルのスタイリングを紹介

今回は、Bootstrapにおけるテーブルのスタイリングについて紹介します(^^) テーブルの基本スタイリング Bootstrapでは、table 要素に table クラスを追加してから、様々なクラスをつけ加えてバリエーショ...
Bootstrap

【Bootstrap】画像の整列やレスポンシブ対応

今回は、Bootstrapで画像をあつかう方法について紹介します(^^)ちなみにダミー画像の用意には、Lorem Picsum というサイトがおすすめです。下の画像にあるURLを、img 要素の src 属性にコピペするだけでダミー画像を...
Bootstrap

【Bootstrap】タイポグラフィ(見出し、本文、リストなど)の使用方法

今回は、Bootstrapにおけるタイポグラフィの使用方法を紹介します(^^) 見出し 見出し要素(<h1>~<h6>)には、Bootstrapのスタイルが設定されています。Bootstrapを使ってい...
Bootstrap

【Bootstrap】グリッドシステムを用いたレイアウトの紹介

今回は、Bootstrapのグリッドシステムを用いたレイアウト方法について紹介します。 カラム Bootstrapのレイアウトには、ページを12列に分割したグリッドシステムが使われています。1列をカラムといい、その12列の配分...
Bootstrap

【Bootstrapとは?】概要や導入方法を紹介!

Bootstrapとは一言でいうと、HTML、CSS、JavaScriptで構成されるフロントエンドのWebアプリケーションフレームワークです。フレームワークとは、アプリケーション開発を効率化するために作られた枠組みのことですね。フレーム...
タイトルとURLをコピーしました