So-net無料ブログ作成
検索選択

xml-sitemap作成サイト

xml-sitemap
http://www.xml-sitemaps.com/

無料で簡単にsitemapを作れるサイト。そんなにページ数が無いサイトであれば数分でxmlをダウンロードできる。

 
 

 

CSS参考サイトメモ

CSS参考サイトのメモ。

HeartRails Glanceを入れていますので、URLにマウスカーソルを合わせるとリンク先のスクリーンショットが表示されます(一部のサイトで非表示になるようですが)。

使えるCSSテクニック Vol.01 | バシャログ。
http://c-brains.jp/blog/wsg/category/series/css/

覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
http://c-brains.jp/blog/wsg/09/06/18-223233.php

CSS HappyLife
http://css-happylife.com/

Webデザインテンプレート集 Templates[飾り枠]
http://wdt.pekori.jp/template/box/

とっても使えるoverflowプロパティ。その使い方色々。|CSS HappyLife
http://css-happylife.com/archives/2009/1102_0115.php

class指定もいらない超お手軽スムーズスクロール [Javascript,jQuery] - BlurBlue-Note
http://www.blurblue.com/2007/10/class.html

CSSによる2カラム(2段組)レイアウト
http://www.geocities.jp/multi_column/practice/2column1.html

Movable Type 備忘録 - jQueryでスムーススクロール
http://bizcaz.com/archives/2007/06/21-145954.php

IE 6で泣かないための、9つのCSSハック(1/3) - @IT
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack01/01.html

ul、liタグとCSSで作る段組表示: 世界四季報
http://4ki4.cocolog-nifty.com/blog/2008/07/ullicss_7366.html

スタイルシート imgタグにboeder=0を使わずスタイルシートでボーダー0にする
http://template.b-cures.net/dl/stylecss/index11.html

フッターとかの区切り『|』のサンプル1種|CSS HappyLife
http://css-happylife.com/archives/2009/0702_1905.php

もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
http://css-happylife.com/archives/2007/0115_1345.php

CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント
http://www.designwalker.com/2007/02/css-body.html

firefoxで上下のpaddingが効かない
http://q.hatena.ne.jp/1151036372

floatをクリアCSSclearfixハック
http://www.techdego.com/2007/01/floatcssclearfix.php

Good Sleep プルダウンメニューに動きを与えるJavaScript
http://exyz.cocolog-nifty.com/good_sleep/2008/12/javascript-7227.html

グローバルナビゲーションのロールオーバーをJavaScriptを使わず、CSSのみで実現するCSS
http://css-happylife.com/template/07/

デザイン性に優れたCSSメニュー集phpspot開発日誌
http://phpspot.org/blog/archives/2008/07/css_64.html

フロートとネガティブマージンまとめCSS
http://junon.tumblr.com/post/2171181/css

スタイルシート例文辞典
http://www.openspc2.org/reibun/css/

 
 

 

IE 6で泣かないための、9つのCSSハック

IE 6で泣かないための、9つのCSSハック @ITよりメモ

1. 透過PNGを表示させる方法
2. min- width、max-widthを使いたい
3. min- heightを対応させる方法
4. height を100%にする方法
5. フロート時の2倍マージンを通常に戻す方法
6. リストの縦並びメニュー
7. リサイズ時にずれる
8. フロート時にテキストが3pxずれてしまっていた場合
9. 外側の要素にoverflow:auto;を指定していた場合

http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack01/01.html
 
 

 

IE6,IE7でul,li要素のスペース・marginバグ

IE8,Firefox,Chrome,Safariでは、問題が出ないul,liのマージン問題。

IE6,IE7だと、ul,li要素の先頭にスペースが入ってしまう。これを解決するには、下記のように一文追加する。

list-style-position:outside;

ブラウザごとに違う解釈(表現)のせいで、世界中でどれだけどwebデザイナーが苦労してるんだろう(^^;

 
 

 

お気に入りに入れた時に表示れるアイコンの作り方

お気に入りに入れた時に表示れるアイコン(ファビコン)の作り方

1.16x16ドットのgif画像を用意
2.下記サイトで、gif→icoファイルに変換(zipで圧縮されているので解凍する)
http://www.html-kit.com/favicon/

3.htmlに下記タグを追加。
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

案外、簡単に出来ますね。下記のサイトを参考にさせて頂きました(どうもありかどう)。

ステップアップ&テクニック - ホームページ作成ガイド
http://www.tagindex.com/hp_guide/img/favicon.html
 
 

nice!(41) 
 

firefoxでpaddingが効かない

IEでは大丈夫なのに・・。で検索したらオーバーフローしていたみたい。

http://q.hatena.ne.jp/1151036372
http://itref.fc2web.com/css/overflow.html
ここ参考になった(解説してくれた方々ありがとう)。いや本当にネットって便利だなと痛感(^^;
カラム落ちとか、CSSで思うとおりに表示されないときは、border: 1px solid #ff0000; としてボーダーを表示させ、現状確認するのがいいですね。
 
 

nice!(30) 
 

imgタグの後にdivを置くとスペースが出来る

xhtml+cssでのコーディングで

<img ・・・・ />
<div>・・・</div>

画像の下にスペースが出来る(IEで再現。Firefoxは問題ない)。
この場合の回避方法としは、imgタグの後に改行コードを入れる。

<img ・・・・ /><br />
<div>・・・</div>


参考になったサイト(助かりました。ありがとう)
http://www.geocities.co.jp/SiliconValley-SanJose/2485/browsertrouble.html

メモとして記載。

 
 

nice!(37) 
 

サイト制作でcommonの意味

サイト制作で、各ページ共通のファイルを置く場合、commonというディレクトリを用意し、cssやimgをというディレクトリをさらに作って、それぞれのファイルを入れているとのこと。ちょっと疑問に思って調べてみたら、説明しているページを見つけた。

良く見かけるcommonという言葉はどんな意味で付けられているのでしょうか。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1012259575

メモとして記載。
 
 

nice!(31)