荒川区ホームページ・ブログ制作･作成･アクセスアップSEOのマウンテンブック

IEで印刷用スタイルシート(CSS)

Sat, 22 Nov 2008 15:28:37 +0900

幅広なサイトの印刷にも対応するスタイルシートの記述方法を発見しました。 print.cssに以下を記述すればOK body{ zoom:0.75 } bodyを75%くらいに縮めるだけ。

マウスオーバー時に背景色を滑らかにアニメーションするJavascriptメニュー

Sun, 12 Oct 2008 21:37:31 +0900

マウスオーバー時に背景色を滑らかにアニメーションするJavascript。グラデーション画像等をbackgroundに設定すると左→右や、上→下のように方向を指定できます。デモページ Using jQuery for Background Image Animations - Snook.ca

Javascript CSS プルダウンメニュー「MenuMatic」

Sun, 12 Oct 2008 21:19:29 +0900

一見Flashに見えますが、Javascriptです。どこかで使ってみたいものです。「MenuMatic」

プルダウンメニュー

Fri, 12 Sep 2008 18:17:07 +0900

動作はWindowsのFirefox、IE、Operaしか確認してません。他の環境の動作報告求む。ちなみに、MacIE、IE5以下、NN4.xはサポート対象外です。 http://chibinowa.net/notebook/javascript/86.html

CSSとJavascriptでプルダウンメニュー

Tue, 17 Jul 2007 15:16:45 +0900

CSSとJavascriptでシンプルなプルダウンメニューを紹介しているサイトがあったのでメモ。テキストの中央揃えとボタンの幅を変更すればすぐに使えそうです。プルダウンメニューの方法

CSS JavaScript Ajax 特集

Thu, 07 Jun 2007 13:43:19 +0900

またまたネタ帳さんのサイトですばらしいjavascript集を発見！だからメモっとこう！！送信ボタンなどをちょっとセクシーにするCSS ページナビゲーションの無料ダウンロード JavaScriptでイメージギャラリーサンプル Ajax感たっぷりのイメージギャラリー膨大な画像だって管理するイメージギャラリーサンプル CSSレイアウトテンプレート無料開放いやーコレだけ有ると楽しみが増える！ネタ帳さんのサイトはコチラ

はじめに設定しておくと便利なcss

Mon, 26 Mar 2007 17:04:28 +0900

html, body, {margin: 0;padding: 0;} html {overflow-y:scroll;} body {font-family:Verdana, "ＭＳＰゴシック", sans-serif;font-size:80%;} h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {margin: 1em 0;padding: 0;} li {list-style-type:none;} img {border:0;} address {font-style:normal;} a{ outline : 0 ;} htmlもついでに スタイルシート宣言 javescriptの宣言

最初に指定しておくと便利なCSS

Mon, 12 Mar 2007 09:39:41 +0900

CSSのテンプレートを作成する際に、必ず入れていて便利だと思うものを紹介します。body要素に指定する事に関してはいろいろなところで語られているので、ここでは他のテーマなどのCSSを見ていて便利と思って取り入れているものなど。それ以外で私が始めに設定しておくHTMLタグとその設定です。

@charset “utf-8″; body { margin: 0; padding: 0; background-color: #ababab; color:#333; font-family: Arial, Helvetica, Verdana, “ヒラギノ角ゴPro W3″, “Hiragino Kaku Gothic Pro”, Osaka, “メイリオ”, Meiryo, “ＭＳＰゴシック”, sans-serif; line-height: 1.5; }

次に、CSSを見ていると”Universal Reset”というグループ名で出てくる一般的なHTMLタグのデフォルトを変更する関係。設定内容はそのデザインでそれぞれなので、設定する先だけ見ていただければ良いかと思います。設定し忘れていて意図しない表示にならないようにするためのものです。

h1,h2,h3,h4,h5,h6 { line-height:1.6; } p,li,dt,dl { line-height:1.6; } p { margin:0 0 1em 0; } ul li { list-style-type:none; } a img { border:0; } a:link { color:#078D00; text-decoration:none; } a:visited { color:#189B12; text-decoration:none; } a:hover { text-decoration:underline; } a:active { color:#666; } blockquote{ margin-left:1em; padding-left:1em; border-left:2px solid #CCC; color:#CCC; } pre{ width:100%; padding:1em 0; overflow:auto; border-top:1px dotted #333; border-bottom:1px dotted #333; } table{ width:100%; border-spacing:2px; margin:1.5em 0; } table th, table td{ padding:0.3em 0.75em }

blockquoteとpreは、ブログに特有かと思います。それ以外は、一般的な内容を設定しておきます。最後に、classで指定しておくと便利なもの。これらはHTMLの特定要素をCSSで指定するのではなく、逆にHTML上でclassを指定することにより見た目を操作しようとするものです。

.hidden { display: none; visibility: hidden; } .alignright { float: right; } .alignleft { float: left; } .clear { clear: both; }

HTMLを見ていてclass=”hideen”とかなっているだけで、レイアウトが分かるという意味では使い勝手が良いので、私は必ず入れてます。あとは、clearfixハックも必ず入れてます。自分用のテンプレートとしてこのような設定を一回作っておけば、便利かと。

「ぶら下げ」レイアウトをやってみた

Tue, 06 Mar 2007 10:13:31 +0900

まずは最近知って便利だと思ったCSSの小技をひとつ。文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。

xhtml　css HTMLとXHTMLの違い

Fri, 02 Mar 2007 11:29:37 +0900

＜?xml version="1.0" encoding="UTF-8"?> ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ＜html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> ＜head> ＜title>私のホームページ＜/head> ＜body> ＜p>工事中

＜/body> ＜/html> 1行目のXML宣言は，文字コード（正確にはエンコーディング）としてUTF-8またはUTF-16を使う場合に限り，省略できます。ただし，IE6はこれが理解できず，互換モードになってしまうというバグがあるので，当面は省略したほうがいいでしょう。＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> は，XHTML 1.0 Strictというバージョンを使うことを表す決まり文句です。XHTML 1.0には他にTransitional，Framesetというバージョンがありますが，XHTML 1.1ではStrictに相当するものに一本化されますので，ここではStrictだけ扱うことにします。＜html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> は，XML名前空間（namespace）の宣言と，言語が日本語（ja）であることを表しています。今は過渡期なのでHTMLとしての言語とXMLとしての言語を両方指定しますが，XHTML 1.1では xml:lang だけでよくなります。 XHTMLでは＜p> に対する

のような終了タグが省略できません。HTMLで

のような終了タグのないものは，XHTMLでは＜hr /> のように書きます。なお，ブラウザによっては＜?xml version="1.0" encoding="..."?> の指定をしてもエンコーディングの判定を間違うことがあるようです。そこで，HTMLのときと同様に，＜head> のすぐ後に＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> のように書いておくのが当面は安全です。ここで＜meta ...> も終了タグがないのでXHTMLでは＜meta ... /> のように書きます。 XHTMLでは，デザイン的なものはすべてスタイルシートで表します。スタイルシート style.css を読み込む部分も含めて，XHTMLの雛形を示しておきます：＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ＜html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> ＜head> ＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ＜title>私のホームページ＜link rel="stylesheet" type="text/css" href="style.css" /> ＜/head> ＜body> ＜p>工事中

＜/body> ＜/html> ＜strong>番号付き箇条書き ... ＜/ol> です。各箇条は＜li> ... ＜/li> で挟みます。＜p>私の好きな雑誌：＜/p> ＜ol> ＜li>りぼん＜/li> ＜li>なかよし＜/li> ＜/ol> 上のように書けば，私の好きな雑誌： 1. りぼん 2. なかよしのように表示されます。 ol は ordered list（番号付き箇条書き）の意味です。用語と説明次のように書きます。＜dl> ＜dt>XHTML ＜dd>Webページをマーク付けするための言語＜dt>CSS ＜dd>Webページの見栄えを整えるための言語＜/dl> 次のように表示されます。 XHTML Webページをマーク付けするための言語 CSS Webページの見栄えを整えるための言語 dl は definition list（定義リスト），dt は definition term（定義する用語），dd は definition description（定義の記述）の意味です。 media CSSを使えば，メディア（媒体，出力装置）ごとに違う表現を指定できます。例えば，＜link rel="stylesheet" type="text/css" href="common.css" /> ＜link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> ＜link rel="stylesheet" type="text/css" href="print.css" media="print" /> ＜link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" /> のようにしておけば，common.cssを適用した後で，パソコン用ブラウザならscreen.css，プリンタならprint.css，携帯端末ならhandheld.cssが適用されます。携帯用フルブラウザはscreenなんでしょうか，handheldなんでしょうか。私の「京ポン」（AH-K3001V）のOperaでは，スモールスクリーンモードならhandheldになるようです。ちなみに，＜link rel="stylesheet" type="text/css" href="" media="handheld" /> と書いておけばフルスクリーンモードでも横幅が画面と一致し，通常は横スクロールバーが出ないという仕様のようです。

フッターとかの区切り『｜』のサンプル4種

Fri, 23 Feb 2007 09:18:12 +0900

フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが）


Home
About
Gallery

Blog

実際の表示です。 * Home * About * Gallery * Blog htmlはこんな感じに。（｜取って最初のメニューにclassを追加）


Home
About
Gallery

Blog

cssはこんな感じです。

#main #sampleFooter_02 {
	text-align:center;
}
#main #sampleFooter_02 li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
	border-left:1px solid #999;
}
#main #sampleFooter_02 li.sampleFooterHome {
	border-left:0;
	padding-left:0;
}

普通に縦線を書いた感じ * Home｜ * About｜ * Gallery｜ * Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。


Home｜
About｜

Gallery｜
Blog

cssはこんな感じです。

#main #sampleFooter_01 li {
	float:left;
	list-style-type:none;
}

floatして、リストのマークを消しているだけ。主観ですけど、リストでこのやり方をするならp要素で普通に区切った方が良い気がする。 borderを使って区切っているように見せる 実際の表示です。 * Home * About * Gallery * Blog htmlはこんな感じに。（｜取って最初のメニューにclassを追加）


Home
About
Gallery

Blog

cssはこんな感じです。

#main #sampleFooter_02 {
	text-align:center;
}
#main #sampleFooter_02 li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
	border-left:1px solid #999;
}
#main #sampleFooter_02 li.sampleFooterHome {
	border-left:0;
	padding-left:0;
}

さっきfloatでやりましたけど、display:inlineでやってセンタリングするとこんな風になります。見易さの為にli要素毎に改行してますが、改行すると数pxの隙間が出来るので、paddingとmarginを上手い具合に調整してあわせます。改行しない場合はソースがちと見難いっすけど、paddingとmarginは同じ値でキレイに揃います。 .sampleFooterHome はHomeの左の縦線を消す為に、classを追加してます。色がすぐに変えれるっていう利点は有るけれど、borderでやってるいじょう縦線が文字の高さより大きくなってしまうのがいけてない。。。 画像で区切ってみる 実際の表示です。 * Home * About * Gallery * Blog ソースはborderと同じなので割愛。 CSSは以下のようになる感じです。

#main #sampleFooter_03 li {
	float:left;
	list-style-type:none;
	margin-right:10px;
	padding-left:15px;
	background:url(../img/list_subcategory.gif) no-repeat left center;
}
#main #sampleFooter_03 li.sampleFooterHome {
	background-image:none;
	padding-left:0;
}

基本はborderと同じで指定を画像に変えただけです。画像の1番の利点はやっぱり見栄えですね。区切りっぽく見える画像なら何でもいいんで、デザインにこだわる場合は背景画像で指定するのが良さげです。あと、margin-leftとpadding-rightの組み合わせを使わないのは、IEのmargin2倍のバグ対策です。 ↓知らない人はここ参照で。 上記のサンプルを隣接セレクタでやる ントはコレが書きたかっただけなんす。と、いう事で今までのはこのサンプルを書くための布石みたいなノリです。実際の見た目は今までと殆ど変わらないです。（IE6はダメですが） * Home * About * Gallery * Blog ソースはこんな感じにスマートに。


Home
About
Gallery

Blog

CSSは以下のように。

#main #sampleFooter_04 {
	text-align:center;
}
#main #sampleFooter_04 li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
}
#main #sampleFooter_04 li+li {
	border-left:1px solid #999;
}

隣接セレクタ（+）で指定する事で、余計なclassを追加せずに済みます。で、コレがめでたくIE7で対応した訳ですよ。つまり、もう使っても問題が無いテクニックの一つだと思うのです。

CSS メニュー横並びボタン

Thu, 22 Feb 2007 17:07:21 +0900

HTML


 List1
 List2
 List3
 List4

強調されてるところが味噌な行。それ以外はとりあえずの見栄えの設定になっています。コピーペーストですぐに使用できるように作りましたが、id名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。 CSS

ul#globalNavi {
 margin: 0;
 padding: 0;
 width: 500px;/* 必ずwidthの設定をしてください */
}

ul#globalNavi::after {
 height: 0;
 visibility: hidden;
 content: ".";
 display: block;
 clear: both;
}

ul#globalNavi li {
 margin: 0;
 padding: 0;
 float: left;
 width: 120px;
 line-height: 1;
 list-style-type: none;
}

ul#globalNavi li a {
 padding: 0.6em 10px; /* ボタンの厚みはここで調整 */
 display: block;
 position: relative; /* IE6でマウス反応領域がおかしいのをFix */
 font-size: 12px;
 color: #333;
 text-align: center;
 text-decoration: none;
 background-color: #eee;
}

ul#globalNavi li a:hover {
 color: #000;
 background-color: #ddd;
}

れを基本に、背景画像を入れたりpaddingを調整すれば色々作れるはず。 li要素がフロートすることによって、包含ブロックであるul要素は高さの算出する子要素がなくなり、ぺっちゃんこになってしまうので、擬似要素によるクリアをコード中にいれています。もし、MAC IEに対応する必要がある場合は、ul#globalNaviには次のコードを追加してください。 ul#globalNavi { margin: 0; padding: 0; width: 500px; /* for MacIE5.x \*//*/ overflow: hidden; /* end */ } WIN IE6では親要素がposition: absoluteしないと何故かA要素のマウス反応範囲が消えてしまうので、absoluteしない場合はA要素にposition: relative;が必要。

*{ margin : 0 }はもう古い！？

Thu, 22 Feb 2007 09:41:49 +0900

以前のエントリーでユニバーサルセレクタを用いてデフォルトのCSSをリセットするという記事を書きましたが、どうやら海の向こうではもうそれは時代遅れのようです。今月号(2007年3月)のWebDesigningにも大藤幹さんが同様のことを書いていらっしゃいますね。ユニバーサルセレクタを用いた手法というのは今後すたれていくのかな・・・何故*セレクタを使った手法が時代遅れなのか？それが気になるところですが、主な理由として挙げられているのは下記のようなもの。 * レンダリングが遅くなる(重くなる)。大きなページは特に。 * 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど) 確かに一度全てのスタイルをリセットして、再び上書きをするわけですからやり方的にはあまりスマートではないですね。これらを解決する手段としては、使用するタグごとに個別に指定してあげるというやりかたが良いようです。例えば下記のようなもの

html, body,  {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
    margin: 1em 0;
    padding: 0;
}

Yahoo UI LibraryのYUI Reset CSSを参考にするのも良いかもしれません。YUI Reset CSSでは*セレクタを使ってリセットする代わりに、最初に下記のように書いています。

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
   margin:0;
   padding:0;
}

背景画像を中央に配置縦の長さは無限

Fri, 16 Feb 2007 15:35:48 +0900

body { background-color:#ebebeb; margin:0 auto; background-image:url(../img/bg.jpg); background-repeat:repeat-y; background-position:top center;} body #page{background-position:top center; margin:0 auto;}

ccs レイアウト　中央揃え　firefox対応

Fri, 16 Feb 2007 13:29:26 +0900

cssの中央レイアウト　firefox cssの中央レイアウトの時に body{text-align:center;} としますが、 firefoxでは左寄せになり、テキストだけが、中央になります。 ie7では問題ありません。 firefoxでの中央レイアウトはどうしてますか？ボックスを中央に作りその中に入れる body { text-align:center; } #page { width:600px; text-align:left; margin:0px auto; padding:0px; border:1px solid #666666; }

あああああああああああああああああああああ

荒川区ホームページ・ブログ制作･作成･アクセスアップSEOのマウンテンブック

IEで印刷用スタイルシート(CSS)

マウスオーバー時に背景色を滑らかにアニメーションするJavascriptメニュー

Javascript CSS プルダウンメニュー「MenuMatic」

プルダウンメニュー

CSSとJavascriptでプルダウンメニュー

CSS JavaScript Ajax 特集

はじめに設定しておくと便利なcss

最初に指定しておくと便利なCSS

「ぶら下げ」レイアウトをやってみた

xhtml css HTMLとXHTMLの違い

フッターとかの区切り『｜』のサンプル4種

CSS メニュー横並びボタン

*{ margin : 0 }はもう古い！？

背景画像を中央に配置 縦の長さは無限

ccs レイアウト 中央揃え firefox対応

xhtml　css HTMLとXHTMLの違い

背景画像を中央に配置縦の長さは無限

ccs レイアウト　中央揃え　firefox対応