全てのブラウザに対応したcssスタイルシートの透明、半透明の背景設定を記述する | WordPressにGoogle Maps API V3！
通常のWeb画面では、あまり使用しないかも知れませんが、スマートフォンの画面は狭いので、背景（background-color）を透明、または半透明にするテクニックを覚えておくと良さそうです。 背景を透明にする場合： 背景（background-color）に、transparentを指定します。 background-color:transparent; 全てのブラウザに対応した半透明の設定 具体的には、次のように記述します。これで、IEを含む全てのブラウザをサポートできるそうです。 次は、背景白色のカラー（＃FFFFFF）を85％の透過に設定したものです。 #maplist{ background-color:#FFFFFF; filter:alpha(opacity=85); -moz-opacity:0.85; -khtml-opacity: 0.85; opacity:0.85;
スタイルシート 背景画像の位置を指定する
背景画像の位置を指定するには、background-positionプロパティを使います。 この前に説明したbackground-repeatの値に、no-repeatを指定すれば画像は繰り返さず画面の左上に一つだけ表示されましたが、このプロパティを使えば左上だけではなく、好きなところに画像を表示させることが出来ます。 位置の指定はまず、数値にptなどの単位をつけて設定する方法があります。最初の値には左側からの位置を指定し、半角のスペースの後の2つ目の値は、上からの位置をそれぞれ指定します。 左からの位置を100px、上からの位置を200pxに設定したい場合は、 background-position:100px 200px;というように記述します。 それと、キーワードを使って位置を指定することも出来ます。キーワードには、left(左）,center（中央）,right(右）,top(上)
フリーのボタン素材を作ってみました。 | Design Plus
ウェブサイトは、WordPressテーマで効率よく制作する時代に入っています。 私たちは、この市場のニーズに応え、低コストでハイクオリティ、 そして、驚異的にインパクトのあるサイトが構築できるWordPressテーマTCDを開発し続けています。 美しいデザインのサイトを、どなたでもかんたんに運営可能です。 累計ユーザー数120,000を超える老舗トップブランド「TCD」テーマの威力をどうぞご堪能下さい。 WordPressテーマTCD 3つの特徴 テンプレートの領域を はるかに超越した美しいデザイン 世界で最も先進的で、スタイリッシュなテンプレートを作りたい。その基盤となるのはデザインである、という思いが私たちにはあります。美しく魅力的なデザインはそれだけで読み手の心を掴む力があるからです。デザインは「印象付け」をする大きな要素です。私たちは、あらゆるネットマーケティングのシーンであなたの
display:inlineで横並びにした際に出来る余白を消す方法 | CSS Lecture
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.
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
画像を簡単に中央寄せする | tyto-style
ホームページを作成していると、画像を中央に寄せたいと思うことがよくあります。 意外とブロック要素で括ってtext-align属性で中央寄せをしている方も多いようですので、今回は簡単に画像を中央寄せ（左寄せ・右寄せ）する方法を紹介します。 text-align属性で中央寄せ まず先に紹介した「text-align属性で中央寄せ」ですが、例えば以下のようなhtmlの場合があります。 <div> <p><img src="画像のパス" alt="画像の代替文" /></p> <p>サンプルテキスト。サンプルテキスト</p> </div> このとき、CSSは以下のようになりますね div p{ text-align:center; } しかし、これだと、画像の下の<p>サンプルテキスト。サンプルテキスト</p>まで中央によってしまいます。これを避けるには、img要素を括っているp要素にid/cla
画像を使わずにCSSで枠線（border）の角を丸くする方法！
これまで、画像を使って表現していた角丸（かどまる）を、CSS3の記述を用いる事で、画像を使わずに簡単に表示させる事が出来ます。 border-radiusと言うプロパティで、Firefox, Safari, Google Chromeでは独自拡張として実装されています。 ＊注意 この手法はブラウザが IE8（インターネット・エクスプローラー8）では効果を発揮しません。（2011年01月現在IE8以下。今後IEの新バージョンでは表示が出来る様になるとは思いますが・・・。） このブログを見て頂くと解ると思いますが、ヘッダーやプラグインタイトル、リンクボタンにこの手法を用いています。（2011年01月現在） ブログデザイン変更の為、一部、記事下（続き）に表示しています。 画像を使わずにCSSで枠線（border）の角を丸くする方法！ （例）ヘッダーに2pxの太さで赤い（#FF0000）線を引き
briccolog » 画像置き換えのtext-indent:-9999pxに変わる新手法
外苑前のWEB制作会社ブリコルールのスタッフによる、役に立つ情報から役に立たない情報まで。いろんなところにアンテナ張ってるつもりです。 PC向けWEBページのコーディングをする際、見出し領域などで画像の置き換えを行うためによく使われているのが「text-indent:-9999px;」を設定する手法です。 h2#campaignTitle{ text-indent:-9999px; width:400px; height:50px; background:url(campaigntitle.jpg) no-repeat; } ところがこの手法には一つ大きな問題があります。見た目はどうであれ、この部分の描画を行う際、ブラウザ内部の処理としては-9999ピクセルという非常に大きなブロック領域を生成しているため、パフォーマンスが低下してしまうのです。 この問題を解消するための新たな方法が、以
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
CSSで中央配置（センターリング）する方法 | CSS Lecture
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.
font-family CSS フォント
Updated 2013.11.05 / Published 2007.02.02 font-familyプロパティは要素内の文字の表示書体となるフォントを指定します。値にはフォント名、または総称ファミリ名を指定します。総称ファミリ名が指定された場合は、UA の環境設定に指定されているフォントが自動的に選ばれて、そのフォントで表示されます。 値 <フォント> <総称ファミリ> inherit 初期値 UA の設定に依存 適用対象 すべての要素 継承 する メディア visual フォント名の指定は複数指定が可能で、各フォント名をカンマ（,）区切りで指定します。複数指定した場合は、ユーザの利用している環境（コンピュータ）にインストールされているフォントが指定順に優先して反映されます。また、"ＭＳ Ｐゴシック" のようにフォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーショ
CSS(スタイルシート) 背景
CSS 背景 CSSで背景を設定することにより、さらにHTMLのソースをシンプルにすることができます。 その為、ブログや情報量の多いポータルサイトなどでは背景画像をCSSに設定し、画像ファイルを直接HTMLに組み込まないスタイルが人気です。 CSS 背景 CSSが使えるようになると、レイアウトでの画像使用は殆ど背景で設定することが可能となります。 ブログでもそうですが、レイアウトの画像はすべてCSSで背景画像として表示されています。 CSSロールオーバーでも背景画像を使いロールオーバーを表示する方法を書きましたが、背景画像の設定する場所は大抵決まっているので、ひとつ覚えてしまえば、いろいろなところに設定ができるようになります。しかし、背景の画像の表示も微妙な配置の設定などが必要となってきます。 そんな時、背景画像のCSSは設定をどのように変えたらいいか？わからなくなることがあります。 背景
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/csstec/base/link.html
http://www.css-lecture.com/log/css3/css3-border-radius.html
文字や画像をCSSのみで半透明にする方法 マウスオーバーに使うと面白い
http://o-ands.net/css_hover_howto/
