検索

キーワード


【HTML/CSS】CSSフレームワークについて

  • 公開日:2020-10-08 17:44:09
  • 最終更新日:2020-11-13 21:39:52
【HTML/CSS】CSSフレームワークについて

こんにちは。駆け出しプログラマーの松下です!

webページ作成でコーディングを効率化するフレームワークについて説明します。

HTMLを学び始めたばかりという方の参考になれば幸いです!


CSSフレームワークとは

webページはデザイン性の良さや利便性、可視性の高さなど、CSS次第でクオリティに差がつきます。

しかし、短期間でWebサイトを実装したい場合や、デザイナー不在のチームでWebサービスを作る場合があると思います。

そんなときにCSSフレームワークが役立ちます。

CSSフレームワークとは、 Webページを作るのに必要な素材をあらかじめ何パターンか用意したもので、 見出しやボタンなどよく使われるレイアウトが簡単に使えるので、デザイン実装の手間を減らすことができます。

ただし、CSSフレームワークは使い方を覚えるまでに時間が必要なものもあったり、目的の異なるCSSフレームワークもあるので、しっかりと考えてからCSSフレームワークを導入する事が必要です。


メリット

作業時間を短縮できる

パターンを用意してくれるので後は組み合わせるだけなので、一からレイアウトやデザインを考える必要がありません。

コーディング量が大幅に削減されるので作業時間の短縮につながります。


提供元の方に問い合わせることができるので、トラブルが起きたときの原因をすぐに見つけやすいという利点もあります。


見栄えの良いサイトがデザイナーを介さなくても素早く作れる

各パーツにおいても行間や余白などが考えられているため、適当に作ったとしても「要素の余白が無さすぎる」「行間が詰まり過ぎてて文章が読みづらい」などのデザイン上の問題が少なく済みます。


ドロップダウンメニューやスライダー、ライトボックスなどCSSだけで実装するには手間がかかるコンポーネントも、簡単に追加することができます。


統一感のあるWebサイトに仕上がる

それぞれに色やサイズがあらかじめ指定されているので、その範囲内で作れば一貫性が生まれ、統一感のあるデザインのWebサイトが作れます。


複数人で実装を行ってもルールを決めてしまえば同じように実装することができます。


レスポンシブデザインに対応しやすい

レスポンシブデザインとは、 PCやモバイルなどWebサイトを見る端末によって、画面幅に合わせた適切なレイアウトを実現し見やすくするものです。


レスポンシブデザインは、画面解像度毎に細かく定義していく必要があります。最近はタブレットなどを含めるとデバイスの種類が多すぎて、それら全部に対応していくのはかなり大変です。

フレームワークはレスポンシブ用に各解像度毎にちゃんと定義されており、それに従っていけばどのようなデバイスでもある程度の表示ができる安心感があります。


デメリット

デザインが似たようなものになりやすい

様々なサイトで利用できるようにするため「ユニバーサルデザイン」になっているので、似たり寄ったりなデザインになりやすいです。

そのため他サイトと差別化をはかるには不向きです。


学習コストがかかる

CSSフレームワークのルールを理解してHTMLを組まなければならないので最初に時間がかかります。

 また、そのルールがバージョンアップによって変わる場合があります。


ファイルサイズが大きい

高機能なフレームワークほどファイルサイズが大きくなるのが一般的です。

用意されているすべてのコードを読み込むため、使わない機能がたくさんあるのにWebサイトが重くなってしまう場合があります。


代表的なフレームワーク

BootStrap

Twitter社が開発した最も有名で利用者数が多いCSSフレームワークです。


Foundation

カスタマイズ性が高いフレームワークです。


Bulma

CSSだけで成立しているのでとても軽量なことが特徴です。

好きなようにjQueryや他のJavaScriptファイルを組み合わせることができます。


Semantic UI

デザイン性が高く、非常にシンプルで使いやすいことが特徴です。


目的やファイルのサイズで合ったものを選びましょう。



【著者】

松下

今年文系未経験からプログラマとなりました。 同じ初心者の方に分かりやすいよう簡潔な記事を心がけていきます。 趣味はサッカー観戦と洋服です。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ