CSS on Lin's Blog

CSS Inner Border：ボックスの内側に枠線を描く

Wed, 26 Apr 2017 09:54:28 +0000

今回、個人のポータルページをデザインしていたときに、内側の枠線（Inner Border）の効果を作りたくなり、とても賢いやり方を学びました。CSS で内側の枠線を作ると聞くと、まず padding や margin でボックスを大きくすることを思いつくと思います。しかし、それではうまくいきません。ボックスを広げると枠線も一緒に動いてしまうため、この方法では内側の枠線のスタイルを作れないのです。

HTML Anchor の本文がメニューに隠れる問題の解決方法

Mon, 20 Feb 2017 23:28:39 +0000

HTML の Anchor（アンカー）機能はとても便利です。ページが長いとき、Anchor を使えば訪問者は指定した段落へすばやく移動できます。この手法は多くの技術ドキュメントやブログで使われています。https://coder.tw/?p=123#section1 のような URL を見たことがあれば、それが HTML Anchor の特性を利用したものです。この機能は便利ですが、いくつか問題も生じます。最もよくあるのは、ページの最上部に固定のフローティングメニューがある場合です。訪問者が Anchor リンクをクリックすると、ブラウザは指定の章まで自動でスクロールしてくれますが、一部の文字がメニューに隠れてしまうのです。私はずっとこの問題に悩んでいました。今日たまたま Facebook の技術ドキュメントを読んでいたところ、彼らの解決方法を見つけ、なかなか良いと思いました。

SASS の基本的な使い方：変数、関数、継承、ネスト

Tue, 07 Feb 2012 23:14:55 +0000

前回の記事《CSS が変数と関数に出会うと SASS になる～ SASS のインストール手順》では、SASS のインストール方法を紹介しました。今回は SASS の使い方を説明します。この記事では、SASS の4つの特徴、変数（Variables）、関数（Mixin）、継承（extend）、ネスト（Nesting）を取り上げます。

CSS が変数と関数に出会うと SASS になる～ SASS のインストール手順

Tue, 07 Feb 2012 21:31:00 +0000

プログラムと CSS の両方を書く人なら、CSS にも変数や関数のような、プログラミング言語にある機能があればいいのに、と思ったことがあるでしょう。CSS には繰り返しの多い記述が多いので、変数や関数があれば、CSS を書くスピードがずっと速くなるはずです。一般的には、そんな夢は実現できないと思われてきました…… でも今日は、SASS という新しいおもちゃを紹介します。SASS を使えば、CSS がずいぶん違ったものになりますよ～

Zen Coding――Web サイトを素早く開発できる便利ツール。HTML を手で書く人の必須ツールです～

Mon, 22 Aug 2011 21:40:44 +0000

きっと多くの人と同じように、私も Web ページを書くときは、DW（Dreamweaver）でデザイン画面をドラッグして組み立てるより、Notepad を開いて HTML を直接書くほうが好きです～この方法の良いところは、自分の腕を磨けることです（XD）。ただ、欠点は開発のスピードがやや遅いことです（とはいえ、この書き方に慣れると DW より速くなるんですけどね…XD）。今日は Zen Coding を紹介します。これを使うと、Web ページを書く速度が何倍にも上がります！ CSS の記述のような書き方で、そのまま Web ページを書けるんですよ～

【CSS 3】transform: rotate で画像やページを傾ける

Sat, 23 Apr 2011 09:22:08 +0000

以前ニュースで、Google のモバイル版で「傾斜」（中国語で「傾き」の意味）と検索すると、結果のページが右に傾いて表示される、と紹介されていました。この効果はそれほど難しくありません。CSS 3 の標準の一つなので、CSS の 1 行だけで実現できます。現時点では、IE 系のブラウザはこの CSS 3 の傾きの構文に対応していません（IE 9 も含みます）。また、実際には 1 行では済まず、ブラウザごとに構文が異なるため、複数行に分けて書く必要があります。この点は今後改善されるでしょう。

【CSS 3】CSS だけでサイトに角丸効果を付けられる！

Sat, 16 Apr 2011 11:32:53 +0000

CSS 2 の時代は、画像や div 要素に角丸効果を付けるのはかなり面倒でした。簡単な方法は、jQuery で誰かが書いてくれた関数を使うことでした。自分で作りたい場合は、角丸の画像をデザインして重ねて配置する必要があります。要するに、とても複雑だったのです。しかし CSS 3 では、そのような面倒な方法はもう必要ありません。CSS に直接書くだけで設定できます！

ブラウザが IE かどうかを判定して対応するコードを適用するには？（If IE テクニック）

Mon, 28 Feb 2011 13:54:10 +0000

Web デザイナーにとって、ページをデザインするときに一番つらいのは、ブラウザの互換性の問題です。ブラウザごとに CSS や JavaScript の対応状況が違います。CSS が Chrome では正しく表示されるのに、Firefox では違う見た目になることがよくあります。この問題は IE で最も起きやすく、IE は CSS や JavaScript の対応が最も不十分だからです。他のブラウザでは見た目が少し違う程度でも、IE では効果がまったく表示されないこともあります……。そこでこの記事では、IE だけ、あるいは IE 以外のブラウザだけに、特定のコードや CSS を適用する方法を紹介します。

W3Cバリデーション：サイトのCSSが標準に準拠しているかを確認する

Sun, 06 Sep 2009 13:36:56 +0000

W3Cについて：

W3C は、ウェブの標準化に取り組む団体です。W3C は、ウェブに関するさまざまな仕様を策定しています。例えば、標準の CSS4 や XHTML は、W3C が策定したものです。なぜこうした仕様が必要なのでしょうか？理由はシンプルです。ウェブページは異なるブラウザで表示されます。もしブラウザごとに使える構文が違っていたら、ウェブデザイナーはとても大変です。しかし、すべてのブラウザメーカーに一つの標準で合意させるのは困難でした。おそらく主な理由は、メーカー同士が競争しているからでしょう。そこで、公正な第三者である W3C が生まれ、標準を策定し、IE、Opera、Firefox などの各ブラウザメーカーは、その基本的な構文に従わなければならなくなりました。もちろん、各ブラウザが独自の構文を追加することもできなくはありません。とはいえ、すべてのブラウザが W3C の仕様に従っているわけではありません。IE のような大手は従っていないため、多くのウェブデザイナーは IE に対して愛憎入り混じった感情を抱いてきました（愛は多くの人が使っているから、憎しみはルールを守らないから）。ここまで読んで、W3C についてある程度ご理解いただけたと思います。では、ウェブページが標準に準拠しているかを確認する方法を紹介しましょう。

[CSS] 画像の最大幅と最大高さを設定する

Fri, 15 May 2009 21:00:17 +0000

CSS の記述を使うと、画像の最大幅と最大高さを設定できます。

最大幅:
タグ名 img{
max-width:幅の値
}
最大高さ:
タグ名 img{
max-height:高さの値
}

また、高さ（幅）の値はパーセントで指定することもできます。

これらの記述を使うと、ブログの画像がはみ出さないようにできます。

ただし、この記述は IE6 では効果がありません。

IE でも効果を出す方法は、まだ調べているところです。

おそらく JavaScript を使えば実現できるでしょう。