CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
スタイルシート Tips - bnote
スタイルシート + Tips 1.CSS Tips ブラウザの違いによる影響を減らす Mar 29, 2018 Reset CSS (ブラウザの違いによる影響を減らす) Mar 29, 2018 リンクの装飾 Mar 29, 2018 borderのいろいろ Mar 29, 2018 画像でアンダーライン Mar 29, 2018 テーブル - 枠線を指定する Mar 29, 2018 メインコンテンツの内容が少なくてもフッターを最下部に固定する方法 Oct 30, 2020 ホバー時に左からアンダーラインをアニメーションで表示する Feb 12, 2021 ol タグの連番を装飾する Feb 16, 2021 ハンバーガーメニューを作る Feb 22, 2021 画面の外に要素を配置した時に横スクロールを表示させない Apr 05, 2021
CSS:ボックスのおはなし
この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪
栄光ゼミナール；塾選びガイド
栄光ゼミナールとほかの塾との授業料、サービスなどさまざまなポイントについて比較しています。栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業
ウノウラボ Unoh Labs: CSSをデバッグしよう
こんにちは、Sashaです。CSSって、誰でも比較的簡単に始めることが出来るくせに、何年たってもつまらないバグにハマったりするものです。今日は、CSSをデバッグする手順を紹介します。特にCSS初心者の方々に参考にしていただければ光栄です。ただ、ここで紹介しているのは、CSSの問題解決の方法ではありません。CSS上の問題点の原因を、自分で見つけるためにとるべき手段です。見つかった問題点を、どうやって解決するかは、ここでは触れないのでがっかりしないでくださいね。 ※以下の手順は、下記のサイトをパクッ･･･、じゃなくて、翻訳しつつ簡単にまとめたものです。 参考: http://www.subcide.com/tutorials/debuggingcss/ まず、問題あるって認めましょう。 見なかったフリをしたい気持ちはよくわかります、が。 人的ミスをつぶそう スペルをチェックしよう
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
栄光ゼミナール；塾選びガイド
栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業を受けることができるタイプと個人指導で1対1、1対2でもっと自分のペースにあわせることがで
実装ではなく趣旨を理解しよう
*{ margin : 0 }はもう古い！？ | Emotional Web はてなブックマーク - *{ margin : 0 }はもう古い！？ | Emotional Web はてなが酷い。 はじめにbase.cssとかcommon.cssとかを書いて読み込ませるのは、何のためだったか考えてみよう。古い新しいの問題じゃないと気づくだろうか。少なくとも、レンダリング時間なんて完全に後付けだと洞察できるはずだ（あなたたちはjs大好きだよね）。 さて、真っ新なとこからCSS書いてくとき、どんなデザインにしろほぼ毎回指定する要素が出てくる。a img{border:none;}とかhtml,body{margin:0; padding:0;}とかだ。それなら始めにa img{border:none;}とかを羅列したファイルを用意しておけば、余計な手間が省けるじゃないか。たぶん根本の動機はこんな
こんなCSSのサイトは閲覧者に鼻で笑われる
1.文字サイズを「px」「pt」等で指定している 言わずもがな。 2.ボックスの幅を「px」でしていて、且つその幅が800pxを超えている 3カラムのブログなんかにありがち。ちなみにmixiも超えてる。 3.スクロールバーの色を変えている 4.カーソルの形を変えている ただの自己満足。ちなみにmixi（ｒｙ 5.テキストエリアを使っているのに、「textarea」要素の文字サイズは変えていない 「body」要素とは別に文字サイズを指定しておかないと、FireFox等のブラウザでは文字が大きいままになる。
css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list. Go to Listamatic. Well, you asked for them. Nested lists! Choose from one of the growing number of samples or submit a list of your own. Go to Listamatic2. Step by step tutorials on using CSS to create background image lists, rollover lists, nested
CSSだけでメニューにツールチップヒントを付けるテクニック:phpspot開発日誌
CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. CSSだけでメニューにツールチップヒントを付けるテクニック。 次のようにメニューにカーソルを合わせるとヒントが表示できます。JavaScript不使用なので、JavaScriptが苦手な方も実装可能です。 JavaScriptは使わずにやりたい場合は覚えておきたいテクニックですね。 関連エントリ
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック:phpspot開発日誌
Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
CSS Dock Menu
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
[CSS]日本語と英語で異なる最適なフォントサイズの指定方法
日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイズの指定 body{ font-size:16px; /**/ font-size:100%; /**/ } 上記を基準サイズとして、下記を指定。 標準： font-size:82%; 大きめ： font-size:94%; 小さめ： font-size:69%; 英語サイトのフォントサイズの指定 body{ font-size:13px;*font-size:small;*font:x-smal
![[CSS]日本語と英語で異なる最適なフォントサイズの指定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マージンの相殺について：CSS | Tech de Go
フロートとネガティブマージンまとめ:CSS | Tech de Go
lllcolor.com