CSSで様々なアクセサリをつける装飾CSS＋ｊQuery*ホームページを作る人のネタ帳
日本人が好きなフォントは？：CSS入門
CSS入門（14） 日本で愛されているフォント、いわゆるよく利用されているフォントを調べてみました。日本人が好きなフォントって、何なのかしら？ お話は、次の順番で進みます。 有名サイトで指定されているフォントは？ 有名サイト、大手新聞社、IT系サイトなど、フォントにまで綿密に配慮していそうなサイトを調べてみました。 ちょっと、サンプルデータが少なく（16サイト）、探し当てることができなかったサイトもあり、十分とは言えませんが、よかったらご覧くださいませ。 1：第一候補が多いフォント 調査結果から書いていきます。まずは、第一候補に選ばれることが多いフォントです。「ヒラギノ角ゴ Pro W3」と「ＭＳ Ｐゴシック」の人気が高いようです。 16票のうち10票を、「ヒラギノ角ゴ Pro W3」と「ＭＳ Ｐゴシック」がもっているのだから、ツートップといったところでしょうか。 1位（5票）
継承と子孫セレクタとは？：CSS入門
▲ページの先頭に戻る CSSの継承とは？ このCSS入門を通してご覧になっている人は、実はすでに継承という方法でコードを書いています。ごめんね、知らないうちに書かせちゃって・・・。 1：前回までの状態 （01） はじめに、前回までの状態を確認しておきましょう。marginやpaddingをほどこしたところで、終わっているはずです。 CSSコードは、次のような感じです。だいぶ長くなってきましたね。 h1, h2 { margin: 0; padding: 0; } body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; padding: 5px; } h2 { background-color: #ffffff; border-top: 2px solid #191970; bor
margin、paddingとは？：CSS入門
・・・と言われても、何のことだか、まるで分からないと思います。 ▲ページの先頭に戻る 2：margin、paddingを図解 まるで分からないと思うので図解します。margin、paddingは、次のように「border」を境にして、外側の余白と、内側の余白を指定することができるのです。 記事「グループ化 【<div>タグ】：HTML入門」でも少しお話しましたが、ブロックレベルのタグは、このようにそれぞれのタグが箱の中に入っているようなイメージになります。 つまり、marginという大きめの箱に、paddingという小さめの箱を入れて、さらに、そのpadding箱に、中身となるタグを入れるようなイメージです。 ひとつのページであれば、それらの大きめの箱が、ギュウギュウとひしめき合っている状態といえます。 ▲ページの先頭に戻る なぜ余白が2つ（margin、padding）も必要なのか？ し
margin、paddingの初期化：CSS入門
つまり、「すべての適用先に対して、margin、paddingを指定します！」という意味になります。 ▲ページの先頭に戻る 4：margin、paddingを初期化する （06） それでは、CSSコードに追加してみましょう。記述する場所は、より上の方に記述します。 なぜ、上の方に記述するか分かるかしら？なぜなら、CSSは、上から順番に実行するからです。初期化ですから、下の方に書いても意味がありません。 * { margin: 0; padding: 0; } body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; } h2 { background-color: #ffffff; border-top: 2px solid #191970; border-right: 2px s
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](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)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セレクタでのCSSハック一覧表｜web bibo
間隔をあける【margin、padding】：CSS入門
サイトの背景画像を変える時に使える7サイト - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
CSSハック | BLOG × WORLD ENDING
無料で使える写真素材 - 厳選１２サイト | DesignWalker
Photoshopのブラシサイトまとめ - DesignWalker
[CSS]チェックしておきたい50のCSSのテクニック | コリス
『無料＋ブラウザ』で全部やってしまおう。webジェネレーターとサービス50個まとめ*ホームページを作る人のネタ帳
http://e0166nt.com/blog-entry-434.html