もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
cssに関するShika-Cripのブックマーク (22)
-
Shika-Crip 2007/12/05
-
-
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 57,433 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下の
-
CSS スタイルシート | WEB制作の覚書
フロート解除する際、単純に .cl{ clear: both;} として、 <br class="cl" /> などと書いていました。 厳密に言うと間違った書き方なのだそうです。 （clear: both;はブロック要素でしか使うべきではないため） かといってブロック要素に指定すると、高さが入ってしまったりして、 レイアウトが狂ってしまいます。 そこで、こんな指定方法が紹介されていました。 .clear{ clear: both; visibility: hidden; height: 0;} <div class="clear">ここでクリアー</div> 参考サイト http://www.materialpot.com/content/archive_33.htm
-
-
IE7で再考するボックスモデルとDOCTYPEスイッチ | dTblog | デザインとプログラムの境界をさまようブログ
IE7のWeb標準準拠の動きのおかげで、DOCTYPEスイッチとボックスモデルハックを使用してきたサイトは、その設計を見直さないといけないという、やたら哀しげな状況が生まれている。まあ、自分の手がけてきたサイトがそうなんですが。 取り急ぎ、簡単な対策をメモ。 対象となるのは、XML宣言付きのXHTMLで、CSSハックによってボックスモデルを互換モードで表示しているサイト。要は、IE6を中心に設計されちゃっているサイトね。 XML宣言付きのXHTMLは、IE6だけ互換モードで、Firefoxとかその他のメジャーブラウザは標準モードで表示を行う。今はIE6ユーザーが全盛なので、標準モードのブラウザの表示をIE6に合わせようとして、以下のようなボックスモデルハックを使うことがある。 * { box-sizing: border-box; -moz-box-sizing: border-box;
-
-
-
リンク・フォーカス時の点線が画面外まで拡張される問題 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSでテキストを画像に置き換えた場合、フォーカス時にリンク領域を囲む点線が左側にぐぐ～っと伸びてしまう問題 ...に対処する方法。 上記の問題は、Firefoxで起きる。原因は画像置換を行う手段として、「text-indent」を使用しているから。text-indentによって表示領域外まで飛ばされたテキスト部分の分だけ、フォーカス時の点線が拡張されているのだと思われます。 この問題に対処するには、<a>に対して「overflow: hidden;」を指定してやれば良い。 おまけ なお以下のように指定すれば、フォーカス時の点線は消すこともできる。 #logo a:f
-
（ＢＬＯＧ）リンク・フォーカス時の点線が画面外まで拡張される問題
text-indent: -xxxxemの弊害 CSSを使ってJavascriptのロールオーバーイメージを実現する方法は既に一般的になって、あちこちのサイトでも見られるようになりました。 ところが、問題点をいくつか見つけたので書いておきます。 自分のサイトの粗が出る「諸刃の刃」のような記事になりそうで本当は書きたくなかったんですが... まずはじめにCSS背景切り替えの概要Firefox1.5でクリックした時に左に長い点線の枠が出現するタブキーで現在位置が分からなくなる解決策というより、気休め的な方法過剰な見栄え制御決定的な回避策(アクセシビリティ向上案) まずはじめにCSS背景切り替えの概要 あちこちのサイトやCSS関連の書籍で紹介されていると思いますので、ここでは軽く書きます。 リンクの画像にマウスが重なるとその画像が切り替わるという仕掛けです。 このサイトのヘッダー部分にあるナビゲ
-
デフォルトスタイルの差異を無くす CSS
2007-01-30更新 Yahoo UI Fonts CSS使用時の各要素のフォントサイズを変更する際の注意点を追加しました。 defalut.cssちょっとだけ修正 2007-01-18 更新 記事の内容も古くなり、Yahoo Libraryなどがでて更に差異を減らすことが簡単になったことから、これを利用し、スタイルも簡潔にシンプルに記述しなおしましました。前よりも使いやすくなったはずです。前回配布していたものとの変更点は次のようになります。 定義グループにアウトライン番号を記述 ベーススタイルのデザインをシンプルに記述し直し 使用していたカラーを一部を除いてモノトーンに変更 Yahoo Library Fonts CSSを組み込み、各ブラウザで文字サイズが同一になるように修正 プロパティ記述順序をhail2u.net「CSS2 Specificationでのプロパティの出現順序」に沿
-
セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明
HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。 スタイルシートは、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナンスがずっと容易になります。 目次： スタイルシート：文書の論理と表現を分離する カスケーディング・スタイルシート（CSS） スタイルの定義場所 クラス、idによる定義の局所化 文脈セレクタと一括設定 カスケーディングと継承 スタイルのタイプ指定 取り上げる要素： style スタイルシート：文書の論理と表現を分離する 本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表
-
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list. Vertical lists Simple list Simple list with square bullets Simple list with circle bullets Using images for bullets Using CSS background images for bullets Eric Meyer's simple separators Eric Meyer's Panelise Rollover
-
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
-
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
-
-
-
回り込んだテキストの問題
回り込んだテキストの行端がずれる問題を修正 これまでのIEでは、フロート要素にブロック要素を回り込ませると、回り込んだテキストの行端が揃わずにずれるという問題が発生していた。IE7 beta2では、この問題は修正され、テキストの行端が揃った形で表示される。 サンプルソース5-1-1では、画像をマークアップした<div id="image">に対してfloatプロパティを指定し、フロート要素としている。<div id="text">でマークアップしたテキストが回り込むことになるため、margin-leftプロパティを指定し、左側に60ピクセルの余白を挿入している。これにより、フロート要素の下側にテキストが回り込まず、2段組でレイアウトしたように見せることが可能だ。 しかし、IE6で表示するとフロート要素の横に来るテキストが右にずれて表示され、行の左端が揃わない形で表示されてしまう。一方、
-
ハイブリッドデザインNAVI
ブラウザはページを表示する際、テーブルタグの中に更に複数のテーブルデザインがあると、全体を表示するまでに、それ相応の時間を要します。 また、テーブルタグだらけのテーブルデザインをカスタマイズしようものなら "苦痛・忍" の連続でしょう。 ハイブリッドデザインは、大枠をテーブルタグ、細部を外部CSSにデザインする手法です。メリットは、テーブルタグの記述を最小限で済ませることができます。 あるいは、テーブルタグを排除し、外部CSSの呼び出しに徹したデザインにすることも可能です。 外部CSSは、レイアウトやデザインなどの変更が生じたとき、そのCSS内容の書き換えで済むというメンテナンス性に優れたWEBページ作成に効果を発揮します。 ハイブリッドなWEBサイトに最もふさわしいHTMLバージョンは、XHTML1.1が管理人のおすすめです。 敢えてXHTML1.1にこだわってみました。 当サイトは、ハ
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました