CSS関連の記事一覧



20160716-BootstrapのCSSのclearfixを最新版もチェック-01

みなさん、Bootstrapを使ってWeb制作していますか?

私の勤めている会社もMovable Typeで管理しているサイトはほとんどBootstrapのフレームワークに移行して、制作とメンテナンスがかなり楽になりました。Bootstrapはドキュメントが豊富なので、参考になる情報が多く便利ですね。


さて、そんなBootstrapですが、Bootstrap 3.xのCSSとBootstrap 4(4.0.0-alpha.2)のCSSを見ていたら、float要素を解除するclearfixのCSSが「ああ、ここまで短くなったのか〜」と感じたので、紹介します。



記事の続きを読む




20160217-日本語WebフォントをCSSでfont-family指定-00

割と間違っている人は多いのかも?


モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。



●目次



●ダメなCSSの書き方

さて、既にタイトル落ちしている気もしますが、TypeSquareでは、

font-family: "リュウミン R-KL","Ryumin Regular KL";
font-family: "A1明朝","A1 Mincho";
font-family: "中ゴシックBBB","Gothic Medium BBB";

と、font-familyに同じフォントの「日本語のフォント名」と「英字のフォント名」を並べて書いてはいけません。

記事の続きを読む



20160212-Webフォントを滑らかにするCSS-00

目次



●ブラウザーによってWebフォントの見え方が違う

今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント - Wikipedia(Webフォント - Wikipedia)


意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


Windowsのブラウザーでは、ざっくり言うと、

  • Internet Explorer 11:キレイ
  • Edge 13:そんなにキレイではない
  • Chrome 48:そんなにキレイではない
  • Firefox 44:そんなにキレイではない

と、こんな感じです。

※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

記事の続きを読む



asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。

トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー(bgcolor="#c0c0c0")で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。

Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch(Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch)

20150822-BlinkタグをCSS3で再現-02

画像出典:Asahi NewsPaper Index(Asahi.com)


懐かしいですね。灰色の背景とか、バナーの感じとか、微妙に英語とか。



●昔よく使われていた文字を点滅させるタグ「blink」

このNetscape 1.0ネタではないですが、テキストを点滅させるblinkタグが昔のウェブブラウザーにあって、ホームページでよく使われていました。

こういうものですね。(アニメーションGIFです)

20150822-BlinkタグをCSS3で再現-01

何か懐かしさを感じる表現ですね。

最近のブラウザーではこのblinkタグに対応していないものがほとんどですが、これを新しい技術(CSS3)を使って再現してみます。

記事の続きを読む



Bootstrapでナビバー(navbar)に、均等分割(均等割)にするクラスがあります。

それが「.nav-justified」です。navをjustifyするということで、そのまんまですね。



●.nav-justifiedは均等分割していない

便利なクラスが用意されているものだと、会社のサイトであまり気にせず適用していました。

以下の画像の線で囲った部分です。

でも、よく見ると、本当に均等分割しているのか?って思いませんか。

一番左と一番右はpaddingで15px付けているから少し大きく見えるにしても、一番左の項目がかなり長く見えます。

20150430-BootStrap-3-nav-justified-均等割に修正する-05

画像出典:これからのカタログ印刷のカタチ - 分割型カタログ印刷 Stock!&Fresh!(吉田印刷所)



実際にサイズを見てみると以下の通りでした。全然、均等分割されていない!

20150430-BootStrap-3-nav-justified-均等割に修正する-06

どういうことなのでしょうか?

記事の続きを読む



CSSをいじっていたら、フォント表示を改善できて、キレイな表示になったので報告しておきます。

なお、かなり無理矢理ですので、場面に応じてお使い下さい。

対応ブラウザーはInternet Explorer・Firefoxです。(Internet Explorerは9以降かな?)


ざっくり行きたいなら、以下の様に書きます。

body { transform:scaleX(0.9999); }


Yahoo!のトップページのニュースの見出し部分で検証してみます。

ブラウザー内蔵の開発者ツールを使用してCSSを適用して、スクリーンショットを撮り、2倍に拡大して掲載しています。

●Internet Explorer 11

適用前

20141205-ウェブでのフォント表示をキレイに-IE-03


適用後

20141205-ウェブでのフォント表示をキレイに-IE-04


※IE9だと「-ms-transform:scaleX(0.9999);」

記事の続きを読む



20130218-MovableTypeでCSSをlessっぽく書く-00

LESSというCSSの書き方をご存じですか?

簡単にいうと、変数が使えたり、計算ができたりするCSSの書き方です。

LESSで以下の様に書いて…
@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}
LESS ≪ The Dynamic Stylesheet language
CSSへ変換すると、
#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}
LESS ≪ The Dynamic Stylesheet language
となります。

おお、これは便利ですね!

このLESSという書き方はTwitter Bootstrapのカスタマイズのページで知ったのですが、フォントのサイズなどはTwitter Bootstrapでは各エレメント毎にピクセル固定なので、CSSを直に修正していくのは結構面倒なので、こうした変数が使える言語は大変便利です。


ですが、コンパイルしないと使えないし、新しい言語も覚えてもなぁ…と思ったら、Movable Typeでも同じようなことができることに気が付いたので、メモ的に書いておきます。

記事の続きを読む



20120610-htmlタグの書き方-00

HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ!」というものが更にわかってきたので、その部分を紹介。


前回はjQueryのロードの方法がナイス!という話でしたが、今回はhtmlタグの書き方がナイス!という話。


いや、本当にさすがとしか言いようがない。

記事の続きを読む



Glass City by jaxxon


CSS3のbox-shadowのプロパティを見ていて、実用性はあまりなさそうだけど、こういうこともできるんだなぁという発見をしました。

あまりにも小ネタ過ぎて忘れそうなので記事にしておきます(笑)。


Photoshopでベベルのオブジェクトを作ることがありますよね。
ボタンを作る際に以前は多用されていた気がします。(最近はかなり減りましたかね…)
20120329-ベベル-02


Photoshopのこのオブジェクトは幅と高さがともに200px、角の丸みは20pxのベクトルシェイプ(ベクトルマスク)で作成されています。
記事の続きを読む



Something wonderful arrived in the mail today. by simplebitsdan


最近、ウェブデザインで角丸が使える機会が増えてきたのでちょこちょこ指定して使っています(Internet ExplorerがあるのでjQueryも利用しています)。


そんな中、うかさんのツイートで以下のページのリンクが流れてきたので見てみたら、なんかテーブルの角丸で色々ご苦労されている感じでした。



これを読んでいたら角丸のテーブルを使うのが面倒になったのですが、Adobe InDesign使いならそんなことはありませんよね!

ってタイトルだけでオチがわかった人はこの後は読まなくても良いです(笑)。


さてInDesign使いがCSS3で角丸のテーブルを作るにはどうするのでしょうか。
記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索