カテゴリー : CSS

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

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

HTML5&CSS3レッスンブック

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

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

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

CSS で画像置換をするためのベストプラクティスっぽいの。

.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

CSSフレームワークの比較一覧サイト

CSSフレームワークの比較一覧サイトをメモ。

front-end-frameworks

CSS Front-end Frameworks with comparison – By usabli.ca