「Semantic UI」やさしさあふれるUIフレームワーク

「セマンティック◯◯」ってたまに聞くけど、結局セマンティックとは何やろ?という方もいるかもしれません。私も説明しろと言われるとちょと困る。けど、頑張って解説してみると、

HTMLをマークアップしていく時を例にすれば、極論HTMLでのマークアップは全部<div>で組んでも描いたレイアウトは作れる。でも、コンテンツごとの役割を考えて<h1>、や<p><ul><li>などを使うのが通常。

それによって、これは「第一レベルのタイトルですよー。」とか、「段落ですよー。」「リストですよー。」という情報が追加される。

これもセマンティック。「Semantic」は「意味」とか「意味論」という言葉を表す。

HTMLをマークアップする際に、見た目の為にHTMLタグを選ぶのでは無く、コンテンツの内容や役割を考え、それに適したタグを使う。そうすることで要素から意味をスッと理解できるように図ることがセマンティックなHTML。だと思う。

例に上げたような作業は、特に意識せずとも普段からやっている事だと思うけど、その他にも意識すべきことは沢山。 だけど労力もかかるし、「セマンティックな」という点を意識しても、決まったルールがないからピンと来ないし方針に悩む。

そんな私が今回注目したのが、セマンティックを極めたUIフレームワーク「Semantic UI

semantic uiの特徴

Semantic UIの特徴

簡潔で分かりやすいHTML
HTMLはシンプルで、class名も直感的に意味を理解出来るようになっている。
直感的なJavaScriptを使用
コンポーネントの設定も直感的なJavaScriptで変更できる。
簡易化されたデバッグ
パフォーマンスログを使用して、スタックトレースを掘り進まなくてもボトルネックを見つける事ができる。
テーマ、コンポーネントが豊富
「Amazon風」「Google Material風」「Bootstrap風」など豊富なテーマがあり、コンポーネントも豊富であらゆるサイトやアプリに対応できる。

semantic uiのメリット

Semantic UIはみんなにやさしい

さっきから、「セマンティックセマンティック」言ってるけど、それにどういうメリットがあるだよ?と思ってる方もいると思うので、セマンティックを注目する理由となるメリットを書いておきます。

開発者にやさしい

コンテンツの役割を考えてマークアップされた要素や、意味を持たせせたclass名などを利用することで、開発者がその役割や機能をソースから理解することが容易になる。
自分だけではなく他の開発者がソースを編集したりすることもある場合にはとても大きなメリットで、マークアップの効率もメンテナンス性もアップする。

また、どのページのどの場所にでも再利用できるセンセマティックなコードを書くこともマークアップの効率化に繋がる。

ユーザーにやさしい

セマンティックなコードはアクセシビリティの向上にもつながる傾向がある。コンテンツに適したタグを使用することで、スクリーンリーダーなどのソフトウェアで障害を持ったユーザーにも理解しやすい形でコンテンツを届けることが出来る。
(注)セマンティックHTMLがアクセシビリティのガイドラインに準拠した完璧なサイトを作りあげるということではなく、アクセシビリティに対応したサイトの構築が簡単になる程度。

検索エンジンにやさしい

適切なタグを使用し、検索エンジンがコンテンツを解析する際に分かりやすい構造になっていればSEOにもつながるはず。
セマンティックなコードが必ずしもSEOに有利だというエビデンスはないけれど、セマンティックなコーディングが標準化されたHTML5の普及からもそのように考えられている。

こんな感じで、セマンティックは沢山の面で役立つ。

とは言え、明確な正解のないセマンティックを追いすぎるのもどうなのかなと個人的には思う(時間もかかるし)。
こういったフレームワークを触ってると参考になる部分が多く見つかって勉強になるので、良いなと思った点は一から自分でコーディングする際にも取り入れていこうと思う。

公式サイトにはCSS版しか無いのかな。SASS版はGitHubからダウンロードできるみたい。
Semantic UI SASS版

Written By:
Li

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です