タクマ松下のブログ

情報科学科の学生が書く記録。フロントエンドとサーバサイド練習中!です!

CSS書いたことなかった僕が最近やったこと

背景

  • 俺のデザインがださすぎる
  • 作ったものを共有する方法を増やしたい

まずはスクラッチから

いきなりCSSフレームワークに頼ってしまうと後から後悔すると思います。
フレームワークは万能ではないので、見た目をカスタマイズしたい人はCSSを書けないとまずそうです。
デザインなんかどうでも良い人はフレームワークを使ってください。
後で後悔すると思います。
とりあえずこの本を読んで勉強しました。
この本ではフレームワークは一切出てきません。
CSSの基本とまではいきませんが、プログラミング言語を学んだことがある人なら、
いい感じに頭を使いながら処理できるはずです。

いやでも同じものは書きたくない

本を読んで自信が出たのでフレームワークを使います。
色々見たんですが、所謂大手は性に合いませんでした。
クソデカファイル君が僕は許せません。

ということでいくつか候補を出しました。

  • Skeleton
  • Bulma
  • Semantic UI

Skeleton君はすごいシンプルです。
シンプルすぎてたまに困ります。

Bulmaのファーストインプレッションは悪かったです。

Semantic UI君は大手です。
でもまぁまぁ気に入りました。
理由は後述です。

ぼくはfixed navが使いたいんだ!

ナビゲーションメニュー、いいですよね。
スクロールして付いてくるとすごい便利です。
ページのトップにスクロールとかは嫌いです。
普通にバーがついてくればいいだろぼけ

Skeletonにはナビゲーションメニューがありません。
でも公式にはあります。しかも付いてきます。
でもフレームワークとしては使えません。
作った人はたぶんこれくらいサラっと作れるだろ、感覚だったんでしょう。
いい迷惑なので早く追加してほしいです。
でもシンプルで書き方としては一番好きかもしれません。

Bulmaにはナビゲーションメニューがありました!
でも付いてきません。
置き去りです。
fixedでgithubのリポを検索してみたらプルリクがありましたが、
色々困ってそうです…
しばらく待ちましょう。

Semantic UIには付いてくるナビゲーションメニューがあります。
しかも結構いじれます。

結局何を選ぼう

一つに絞る必要はありませんよね。
とりあえずトップぽいページを作るときにはBulmaかSemanticが気に入りました。
でも画像を混ぜた紹介ページをサクっと作るならSkeletonがいいです。
総合的にはBulmaがよさそうです。でも色が付いてるのがむかつきます。
背景画像をつっこみにくいのも微妙です。

条件別に分けてみましょう。

  • Fixedなナビゲーションが使いたい

   Semanticかちょっと待ってBulma

  • 画像つっこみたい

   SemanticかSkeleton、Skeletonのほうが個人的に好き

  • シンプルでいいんです

   Skeleton

いやBootstrapでいいだろ

よくねぇよ!どのサイトも同じデザインに見えるんだよ!