案件評判
MilligramとはWebサイトのベースデザインを構築するためのCSSフレームワークです。数あるCSSフレームワークの中でも最もミニマリストに設計されており高速でクリーンなWebサイトを構築します。この記事ではMilligramを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説をしていきます。
MilligramとはWebサイトのベースデザインを構築するためのCSSフレームワークです。0ベースでWebサイトを開発する際に素早く、最低限のスタイルを提供することを目的に丹生しました。よって限りなく軽量なマイクロフレームワークでありそのサイズは縮小してgzip圧縮をすると、ライブラリ全体が2kb未満となります。いずれもWebサイトのパフォーマンスを最大限に引き上げるために設計されたものです。その他の特徴として「デザインセンスが高い」「グリッドシステム対応」などが挙げられます。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets（カスケーディング・スタイル・シート）』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。
フロントエンドとはWebサービス利用者の目に触れる部分を表します。よってフロントエンドとはWebサービスの利用者が目に触れる部分のシステムを開発することです。フロントエンドの開発を行うエンジニアを『フロントエンドエンジニア』と呼びます。システム業界では”見える部分を作る人”と呼ばれております。主な業務内容としてWebブラウザ上で見ることが出来るページや機能の作成など挙げられます。その際に利用される技術要素としてHTML、CSS、JavaScriptなどがあります。フロントエンド側がサーバーにプログラム実行のリクエストをすることで。サーバから必要な情報を受け取りWeb上にリクエストした内容が表示されます。
フロントエンジニアが習得するべき最低限の技術について解説している記事はこちら＞＞
Milligramの読み方は『ミリグラム』です。Milligramの名前の由来は調べたところ出てきませんでしたが「Milligram」を直訳すると「質量の単位で、0.001グラム」と非常に小さい単位であることを表します。ミニマリストなフレームワークとして開発されたことにちなんで命名されたと考えて良いでしょう。
Milligramは2015年12月に初めての安定したバージョンとして『Milligram v1.0.0』を誕生させました。Milligramの開発者はブラジルを拠点とするエンジニアで「CJ Patoilo」という方です。CJ Patoilo氏は他にも『Airform』というHTMLフォーム向けサービスを開発しております。2021年現在最新バージョンは『Milligram v1.4.1』です。バージョンアップについて簡単に以下の年表にまとめておりますのでご覧ください。
| 年代 | 内容 |
| 2015年12月 | 『Milligram v1.0.0』 ※最初の公式リリース |
| 2016年11月 | 『Milligram v1.2.0』 |
| 2017年6月 | 『Milligram v1.4.0』 |
| 2020年6月 | 『Milligram v1.4.1』 |
Milligramの特徴を見ていきましょう。
Milligramはマイクロフレームワークという特徴があります。CSSフレームワークの中でも限りなく軽量でそのサイズは縮小してgzip圧縮をすると、ライブラリ全体が2kb未満となります。軽量で有名なCSSフレームワークの『Tachyons』と比較としてもなんと1/7です。Milligramは高速でよりクリーンな開発を行うために最小限のスタイル設定を提供しています。
Milligramはデザインセンスが高いという特徴があります。特にシンプルで無駄のない感じが多くのユーザーに指示を集めている理由だそうです。またタイポグラフィが美しいという点でも評価を集めております。
Milligramはグリッドシステム対応という特徴があります。グリッドシステムは最大幅112.0rem （1120px）の流動的なシステムになっております。小さいサイズのブラウザ/デバイスでは縮小します。最大幅はCSSの1行で変更することができ、それに応じてすべての列のサイズが変更されます。
Milligram以外のCSSフレームワークを見ていきましょう。
BootstrapとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。Twitter社が2011年に開発し、フロントエンドフレームワークの中でも最も人気を集めております。BootstrapではWebページの基本機能として使用される「メニュー」「ボタン」「フォーム」などのパーツをテンプレートで用意しております。見た目を調整するCSSファイルや動きをつけるJavascriptファイルが既に作成されており、それらの定義を呼び出すだけでデザインやUIの知識がなくとも、動きのあるリッチなWebサイトを素早く簡単に制作することができます。
Semantic UIとは美しいWebサイトを素早くデザインするためのCSSフレームワークです。プログラマーに優しいHTMLを使用して、美しくレスポンシブなレイアウトを作成するのに役立つ開発フレームワークとして人気を集めております。数あるCSSフレームワークの中でも「デザイン性が高い」「学習コストが低い」という特徴があります。また3,000以上のテーマ変数が装備されているため、高次元の自由度の高さを実現しております。他にも主な機能として「50以上のUI要素」「3レベルの変数継承」「Flexboxフレンドリー」などが挙げられます。
Tachyonsとは可能な限り少ないCSSでWebサイトを構築するためのユーティリティファーストのCSSフレームワークです。モバイル優先で設計されていることから高速な読み込みで完全なレスポンシブとなっており、ユーザーがコンテンツを簡単に読めるように考慮されています。特徴として「マイクロフレームワーク」「カスタマイズと拡張が簡単」「豊富なコンポーネント」などが挙げられます。Webサイトがデバイス問わず高いパフォーマンスを維持するために一躍をになっております。
Milligramを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説させていただきました。Milligramを一言で表すと『最もミニマリストなWebサイトのベースデザインを構築するためのCSSフレームワーク』です。特徴として「マイクロフレームワーク（限りなく軽量）」「デザインセンスが高い」「グリッドシステム対応」などが挙げられます。Milligramsについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。
Visual Studioを理解する！初心者でも分…
Web系システム開発を理解する！特徴や種類、Web…
Angularを理解する！初心者でも分かる歴史、特…
Javaを理解する！初心者でも分かる…
Windows10/11アカウント作…
SaaSを理解する！意味や種類、メリ…
IaaSを理解する！意味、メリット・…
PaaSを理解する！意味や種類、メリ…
PMPを理解する！意味、受験資格、試…
フリーランスのHTMLコーダー（HT…
フリーランスのUnityエンジニア（…