Access Adobe Creative Cloud apps, services, file management, and more. Sign in to start creating.
関連リンク そろそろCSSハックの良し悪しについて考えてみる(書式編) そろそろCSSハックの良し悪しについて考えてみる(管理編) おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
HTML ソースの冒頭にある(べきである) DOCTYPE 宣言を見て、HTML や CSS 解釈の挙動を変えるブラウザがあるんスよ、というハナシ。 「DOCTYPE スイッチ」 DOCTYPE 宣言とわ 各ブラウザの「DOCTYPE スイッチ」状況 関連リンク 「実例編」へつづきます 「DOCTYPE スイッチ」 Mozilla (Netscape6), MacIE5 は「HTML/CSS をその仕様どおりにかなり正しく解釈することのできる高度なブラウザ」と言われてます。しかし、これまでそういうブラウザが少なかったこともあって、巷には「あんまり正しい解釈をしない古いブラウザ」に合わせて記述された HTML/CSS が数多いです。 そういう世の中を、仕様どおり厳格に解釈しまくるだけじゃぁ「アタマが固い頑固者」呼ばわりされかねないので(笑)、Mozilla (Netscape6), MacI
前回のエントリーに続き、今回は2段組の部分をやっていきます。 取り合えず、2段組部分の仕様をば。 デザインを見ていただければお分かりになるかと思いますが、サイドメニューの下に破線があるんですが、その破線がちゃんとメインコンテンツ部分の内容にあわせて伸びる(繰り返す)ようにします。 ボクの組み方はfloatなんでpositionを使った全体のレイアウトに関しては、ウチでは期待しないで下さい。(ポジションによるレイアウトでサイトを作成した経験がありません...) このサンプルのHTMLはサイドメニューがソース上、コンテンツの上に位置してます。 メインコンテンツ部分が上に来ても同様のレイアウトが実現できますが、それは追々ってことで。 だいたいこんな感じです。 んじゃ、いってみますか、、、 すんごい簡単におさらい 前回、下記の状態まで組みました。 http://css-happylife.com/
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
よく、左そでにコンテンツの一覧を並べます。当サイトも例外ではありません。 当サイトはCSSを用いているのみであり、JavaScript等は用いておりません。しかし、ソースから見えるのは普通の ul と li 、それと a のみです。 このページでは、そのカラクリを簡単に紹介致します。完成型は以下の図のとおりです。 勉強する気のない人は、適当にコピーしてちゃっちゃと出ましょう。 メリット デザインにメリットというのも変な話ですが、幾つかあります。 まず、CSSそのものの利点ですが、プレーンでストリクトなHTML宜しく、ul、liとaのみですので、ソースがとても簡潔で、編集がとても楽だという点が上げられます。 また、お気付きの方もいらっしゃるでしょうが、行全体が選択範囲となっており、幾分アクセスしやすくなっております。 作ってみよう では、実際に一から作ってみましょう。 普通にHTMLを書きま
旧バージョンであるIEバージョン5は、モダンブラウザとpaddingの解釈が違います。 <モダンブラウザの場合> widthの中にpaddingの値を含まない。 ex) div#main{ margin: 10px; padding: 10px; width: 200px; } この場合、ボックスの全体の横幅は240pxになります。 <IEバージョン5> ex) div#main{ margin: 10px; padding: 10px; width: 200px; } この場合、ボックスの全体の横幅は220pxになります。 paddingの値は、widthの値の中に組み込まれてモダンブラウザよりも幅が狭い状態で表示されます。 このバグは、「ボックスモデルハック」という有名なバグです。 回避方法はいろいろありますが、私は¥マークを使って回避します。 というか、日本語OSなのでバックスラッシ
まぐlog = 鶴橋まぐろ食堂ファンサイト? =このブログは移転します。最新のコンテンツは http://vishunu.holy.jp/maguro/ をご覧ください。 今週はカワハギか? トップページ 鉄火丼といえば。 このブログに関しての未処理事案を片付けようと、今日は貴重な休日(世間と一日ずれてるけどな)を潰して、ちまちまと作業。ブログデザインの原案そのものはもう3週間も前にできていたけど、Internet Explorer 7のリリースのせいで作業が停滞。自分の遊びのためのサイトより、仕事で管理しているサイトのメンテナンスのほうがそりゃ重要ですからw ん? なんで停滞かと言えば、そりゃあなた、例によってインターネットエクスプローラーのバグに新種がデビューしているからです。まずはこちらの画像をご覧あれ。 IE7で画面表示を200%拡大。 Firef
50 Beautiful CSS-Based Web-Designs in 2006 | Smashing Magazine Let’s take a close look at some of the most beautiful designs we’ve seen in 2006.2006年を彩った50の超美麗CSSデザインサイト集。 どれも凄まじく凝ったサイト集で、1個1個が1つのクリエイターが精魂込めて作ったのが伺えます。 (Webデザイナーのためのリンク集) こういった美しいサイトを参考にサイトを作ったりすると自分のセンスも磨かれそうですね。 単に見るだけでも楽しめます。 2007年も素晴らしいサイトが出てくるんでしょうね。こういったデザインは数年前では見られなかったようなもののように感じます。 WEBデザインの面での進化についても今後が楽しみでしょうがないですね。 作成に使っ
さて、先ほどのインラインのタブ・メニュー、何か妙なものが混じっていました。前に下線の付いたプロパティがあったり、同じようなセレクタに対して同じプロパティを指定していたり。 「ブラウザごとの差の吸収をします。」 先ほどはこの一言で終わりましたが、まさしくその部分です。 CSSにおける「ハック(Hack)」とは、各ブラウザのバグを利用して、そのブラウザにおける微調整を行おうというものです。よって、公式仕様では間違っている記述をします。 しかし、現状では、CSSについてバグの無いブラウザは存在せず、また実装の差による細かな単位計算の違いなどの問題もあり、各ブラウザでの微調整を欠かすことは出来ません。 まず、全体を鳥瞰しましょう。 Windows版InternetExplorerのバグを利用するハック Windows版InternetExplorerでは、プロパティの前に様々な特殊記号を置いても、
2008.06.24 1年半ほど前の記事なので、現在は通用しない部分もあるかと思いますので最新の技術・流行り等を求めている方はご注意ください。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCSSを書き始めるときである。 どうしようかなーなんて迷いながらもなんだかんだで結局はいつも同じ形で出来上がるから今後どうしようかなーなんて迷わずにスパっと仕事に入れるようにするためのまとめてみよう。 はてなブックマークなんかでもよくCSS関連の記事が人気エントリーにあがってきたりして、それらを踏まえつついつか自分なりにまとめて書きたいとおもっていたから丁度良い。 色々あるからまずは基本となるところから。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く