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