カテゴリー : CSS

reset.css と normalize.css を比較して normalize.css を推すことにした

reset.css と normalize.css を比較して normalize.css を採用することにしたお話をご紹介します。

Normalize.css

続きを読む

Q)「CSS プリプロセッサを導入するなら?」A)「PostCSS かな」 ~ PostCSS, Stylus, Sass, Less ザックリ比較した話

同僚のフロントエンドエンジニア氏に「今から CSS Preprocessor (プリプロセッサ) を導入するなら何がいいですかね?」と聞いたところ「PostCSS ですかね」という回答があったので、PostCSS, Stylus, Sass, Less をざっくり比較した話をご紹介します。

PostCSS

ちなみに、2017年6月某日のお話です。

続きを読む

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

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

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

続きを読む

「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

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

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

front-end-frameworks

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

TwitterやFacebookなどのソーシャルボタンを横や縦に並べて設置する方法

Twitter や Facebook などのソーシャルボタンを横に並べて設置するためのスニペットをメモ。

■ HTML

<ul class="socialButtons">
<li>Twitter Button</li>
<li>Facebook Like Button</li>
<li>Google+1 Button</li>
</ul>

■ CSS

●横並び

.socialButtons {
  overflow: hidden;
}
.socialButtons li {
  float: left;
  margin-right: 10px;
}
.socialButtons iframe {
  margin: 0 !important;
}

●縦並び

.socialButtons {
	list-style-type: none;
	padding-left: 0;
}
.socialButtons li {
	margin-bottom: 4px;
}
.socialButtons iframe {
	margin: 0 !important;
}

・[参考] TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS – hostingjedi はてなブックマーク - TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS - hostingjedi

[CSS] Internet Explorer (IE)で a img リンク画像の枠線を消す方法

Internet Explorer で a img リンク画像の枠線を消す方法を調べたのでメモ。

全画像の枠線を消す

画像に枠線を表示させたい場合はほとんど無いと思うので、img タグで直接指定して大丈夫だと思います。

img {
    border-style:none;
}

子孫セレクタで a 要素の子孫要素である img 要素のみ枠線を消す

a img {
    border-style:none;
}

以上です。

参考情報