wordpressの記事で画像を（底をそろえて）並べたい場合のCSSの書き方 | 起業・経営お役立ちブログ
ありそうでなかった画像の並べ方。HTML4.0派としてはtableタグを使えば、チョー簡単に並べられるわけですが、このご時世、それはあまりにもダサい。というワケでCSSによる画像の並べ方を。 例えば、リンゴとミカン、洋ナシの３つの画像を普通に画像登録してタグを挿入するとこのようになります。 CSSはLIを使う！ CSS全盛でTABLEタグはほとんど見かけなくなりました。その代わり、要素を横に並べるタグは<ul><li>—</li></ul>が良く使われます。 このタグをそのまま書けば、文字通り、下に向かって箇条書きにリスト表示されますが、ひとつの<li>をボックス的に使って横に並べる方法があります。 .yoko li { margin:0; padding:0; list-style:none; float:left;/※横並びは、ここがポイント！/ } float:leftを指定してli
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON （カメきち）
CSSのfont-family指定はこれで決まり！（2013冬） - 遠近法ノート
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
Webサイト制作におけるoverflow:hiddenの効果 - Webあんぎゃ
Webサイト制作において、overflow:hidden;が登場する機会は比較的多いような気がする。floatを指定したものの親要素に指定すると習ったが、そういえば実際にその効果を検証したことはなかったと思い、今更ではあるが検証（確認）しておく。 1．1つのブロック要素の指定領域より中身が大きい場合 以下、コード。 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>overflow:hiddenの検証</title> <style> body, div, p { margin: 0; padding: 0; } p { width: 60px; height: 30px; background: #0f0; /* 緑 */ } </style> </head> <body> <div> <p>あかさたなはまやらわアカサタ
CSS Lecture: CSS backgroundプロパティについてのまとめ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IEなんて怖くない！冷静にバグを叩き潰すための11のヒント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングを始めてはや1年。今でこそ、そこそこできるようになってきた僕ですが、初めの頃はそれはもう悲惨なものでした。 あるときはIEのバグで先輩に助けを求め、またあるときはIEのバグで先輩に助けを求め、そしてまたあるときはIEのバグで先輩に助けを求め・・・。 そんな時代に、CSSハックを使わず、極力自力でバグをつぶすために、僕は先輩の助言を元に「バグで詰まったらまず目を通す11のヒント」なるものをノートにリスト化して書きとめておいたのでした。 バグったらとりあえずこの項目に目を通す。するとGoogle先生に頼らずともなんとかなるようになりました。 今でこそもう使わずともよくなりましたが、コーディングに不慣れな方は、このようなリストを作っておくといいかもしれません。 参考程度に以下、ご覧になってみてくだ
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
text-indent:-9999px;による画像置換からの脱却 | pipilog
画像置換の際のCSSテクニックとして広く用いられている（た）[text-indent:-9999px;]ですが、そろそろ自分も改めようと思います。 text-indent:-9999px;の使い方 まずはおさらい。 適当な画像、hoge.pngを用意 HTML <h1 class="hoge">画像置換される部分</h1> CSS .hoge{ width:400px; height:100px; display:block; text-indent:-9999px; background-image:url(hoge.png); } DEMO 現状当サイトでもこの方法で画像置換を行なっています。 では、この方法の問題点。 ブラウザが9999pxのボックスを書きだす -9999pxを指定しているため、ブラウザが9999pxのボックスを作っているという点。 無駄な書き出しを行なっている
text-indent:-9999pxを使わない画像置き換えの方法
ami-to で働くハヤシのブログです。まだ方向性は決まっていません。 気ままに様々なことを書いていく予定です。 昨年の秋からGoogleでパンダアップデートやら、ペンギンアップデートやら リンクペナルティやら色んなことが盛んに行われており、 サイトの順位が下がっちゃって大変な思いをされている方も多いと聞きます。 ami-toが管理しているサイトは運良く（ちゃんと作ってたと言うべき？） これらによる順位の変動は無かったわけですが、 前々から気になっていたCSSの使い方があったので ここいらで何か他の手はないものか探してみるとありましたよ。 今回もネットの先輩たちに感謝しつつ紹介したいと思います。 その前に、 text-indent:-9999px; って何かというと、タイトルとかの画像を表示しているんだけど、 HTML上ではテキストになっているので結構長い文章でも入れちゃえる手法なんです。
戦国乙女4 スロット ポイントパチンコ やり方|戦国乙女4 スロット ポイントルーレット|戦国乙女4 スロット ポイントパチンコ レート|戦国乙女4 スロット ポイントカジノ クレジットカード
ケンタッキー クリスマス メニュー当社の製錬能力は世界の生産量の約 1.5% である 760,000 トンに増加します.信頼性の高い電力供給とサマラジュという戦略的な立地により
CSS Shadow Effects: Tips and Tricks
The art of incorporating drop shadows and inner shadows became a skill I acquired through my exploration of Photoshop’s Blending options. However, in the present era marked by the ascent of CSS3, the dependency on Adobe’s design tool to infuse a box with a drop shadow or an inner shadow has waned. In this contemporary landscape, a fascinating revelation emerges: the ability to craft exquisite CSS3
『positionを知る。アメブロカスタマイズにも役立つCSS』
この表を見ながら、ひとつひとつゆっくり説明して行きます。 まず何から説明しようか迷いましたが、絶対的な位置とか相対的な位置とかってわかりにくいですよね・・・ この辺をもっと簡単に説明すると・・・・ 「あなたはどこを基準に動きますか？」ってことです(・∀・) あなたは家に居ます。自分の家を基準に動きますか？それとも町内を基準に動きますか？って感じですw 図で説明するとこうです！ 自分が右下の青のボックスの中にいます。 青のボックスを基準として、左上に動いた場合はこうなりますよね？ じゃあ赤のボックスを基準に左下に動いた場合はもちろんこうなります！ イマイチこれで何が出来るかわからない！そう感じたらこれを見て下さい。 僕のブログ全体を基準にしたら、どこへでも行ける様になります！ フリープラグインやフリースペースは普通ならサイドバーにしか表示出来ません。 でもこのpositionを使えばどこでも
web：Google Chromeの「要素を検証」機能が便利すぎる | naglly.com
ひたすらChromeを触りまくっています。 Firefoxのアドオンで便利な物の一つにWeb Developerがあります。 参照 ブログ：ブロガーに必要なFirefox3.01アドオン（拡張機能） これは、Webページ作成支援ツールです。あらゆる情報を見たり、設定変更を支援します。極論言うと、これを使いたいが為にFirefoxにしていると以前書きました。CSS系のデザインはこれなしには不可能です。 Chromeでは、これにと非常に似た機能があります。 表示したページで右クリックすると、メニューが出ます。 「要素を検証」を選ぶ 一番下にある、「要素を検証」を選びます。 「要素を検証」画面 そうすると上の画面が開きます。webページ検証のツールです。divやclassなど、CSSのボックスが入れ子になっていて非常に見やすいです。 「resources」画面 [resources]を選んで、該
Web用にメイリオをXP環境でも使用する方法とCSSでのフォント設定まとめ
Windows Vistaの売りの一つだった見やすい「メイリオ（Meiryo）フォント」をWindows XPでも利用する方法と、Webサイトの表示フォントもメイリオに変更するCSS記述設定のまとめ。Vistaどころか次のWindows 7まで発売されて「標準でメイリオを表示できる環境」は広まってきているし、まだまだXPを使い続けるつもりの人でもメイリオの導入だけなら非常に簡単で効果もあるので、覚えておいて損はないかと。 Windows XP環境でメイリオをダウンロードして使用する 1. マイクロソフトからフォントをダウンロードする マイクロソフトのダウンロードセンターにメイリオのフォントセットが用意されているので、普通にダウンロードしてインストール。（環境によっては「正規のWindowsか認証してください」と表示されるかもしれないので、指示に従って作業。） ダウンロードの詳細 : Win
CssCreator->Page Layout
About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. Other HTML and XHTML doctypes are still available. The generator helps you create the structure of your website t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSリセット手法
横並びのナビゲーションの基本的なら作り方: CSS Lecture
http://www.hostingjedi.com/tips/css/ie-haslayout-bug.html
http://japan.internet.com/busnews/20110328/7.html