カテゴリー : CSS

フロントエンド得意じゃないエンジニアはどの CSS フレームワークを採用すべきか? → やっぱり Bootstrap がオススメ

最近、知り合いのスタートアップのエンジニアさんに「CSS フレームワークとか何を使えばいいですかね?」と相談されました。

僕は CSS フレームワークはいくつか使ったことあって、色々あるけどこれがオススメって強く言えなかったので社内のフロントエンドエンジニアにヒアリングした内容をご紹介します。

サーバーサイドエンジニアの意見

Bootstrap 4 派

Bootstrap

Bootstrap v4 alpha がとても良いのですが、いつ正式版が出るのか…という状況です。

CSS フレームワーク使わない派

自サイトは基本全部生 CSS 書いてます。

けど、個人的に一番ラクなのは Bootstrap でしたね。融通を効かすのであれば生。

フロントエンドエンジニア、兼、デザイナーの意見

Bootstrap

Bootstrap

Bootstrap が一番レゴブロックのように使えるので使いやすいと思います。

Semantic UI

Semantic UI

Semantic UI は粒が小さい。

Foundation

Foundation

Foundation はその名の通り基礎しかないので物足りない。

Materialize

Materialize

Materialize だとマテリアルデザインしかできない。

まとめ

今から導入するなら Bootstrap v4 alpha を採用して、α版とれる過程でコードを追随していくのがよさそうと思ってます。

「HTML5&CSS3レッスンブック」が入門書に最適

エンジニアの新人教育に携わる機会を得たので、土日に「HTML5&CSS3レッスンブック」を読みました。

HTML5&CSS3レッスンブック

僕がエンジニアの新人研修のときに出会っておきたかったなと思えるような良い入門書です。Amazon のレビューも高評価が多いので、良書なんでしょうね。

エンジニアやデザイナーの入門書にうってつけの本が見つかってよかったです。

[CSS] 画像置換は text-indent: 100%; white-space: nowrap; overflow: hidden; でテキストを隠す

CSS で画像置換をするための Tips をご紹介します。

.hide-text { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

昔は text-indent:-9999px; を使うのが主流だったみたいなのですが、今は上記の書き方が主流らしいです。

1点だけ注意したいのが、隠しテキストで Google からペナルティを受けることについて。

画像の内容とテキストが異なってなければ、隠しテキストの Google のペナルティは受けないみたいです。なので、関係ないテキストを画像置換するなどダメな使い方をしていなければ問題ないようです。

参考情報

CSS3のグラデーション生成サイト「Ultimate CSS Gradient Generator」

CSS3 のグラデーションを生成できるサイト Ultimate CSS Gradient Generator一緒にお仕事させてもらっているデザイナーさんに教えてもらいました。

グラデーションのかかったボタンの作成をお願いしたついでに「後学のため、なにで作ってるんですか?」って聞いたらこのサービスが出てきたわけです。

Ultimate-CSS-Gradient-Generator

ベースの色は決めないといけないですが、これだったら僕でも使えそうです。


参考情報

[CSS] Chrome や Safari で背景色(background-color)や背景画像(background-image)も印刷する方法

Chrome や Safari のデフォルトの印刷設定では、CSS の background-color や background-image が反映されません。

Chrome だと印刷オプションの「背景の色と画像」に、Safariだと「背景をプリント」にチェックを入れれば印刷可能ですが、ユーザにそれを強いるのもイケてないですよね。

下記のCSSで、背景色や背景画像も印刷できます。

@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
}

WebKit を用いたウェブブラウザだとこれで対応できるんですかね。


参考情報

Chrome で背景色や背景画像を印刷する – Blog, The