iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
CSSのみで簡単にタブ切り替えを作成する方法 | Stronghold Archive
こんばんは！ 今回はライトなのですが。 CSSのみでタブ切り替えを実施する方法です。 かなり簡単な方法だと思います。 では… CSS #tabmenu{ padding:0px; margin:0px; color:#333; font-size: 11px; width:500px; position:relative; } #tabmenu div#tab{ position: absolute; top:0px; left:0px; } #tabmenu div#tab a{ float: left; height: 40px; line-height: 40px; text-align: center; width: 100px; display: block; text-decoration:none; color:#333; background:#eee; } #tabmen
CSS3のbox-shadowを使ってデザイン性の高いシャドウをつくる場合の注意点 | Cappee Design
@cappeeです。 よく見かける紙が浮いたようなシャドウをデザインして、それをコーディングする場合、今までは画像置換でシャドウ用のdivをひとつ増やしていましたが、CSS3の box-shadow を使えば画像なしで実現できます。 デモ：Creating Different CSS3 Box Shadows Effects 詳しいコードサンプルはこちらをご覧ください。 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ box-shadowを使う場合の注意点 上記を参考にCSS3のbox-shadowを使用してシャドウをつけようと思ったのですが、コードを見てみるとサンプルに z-index と position: absolute が指定されているものがあります。 z-index: -1; position: absolute;
box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
[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
digitalskill.jp
Buy this domain. digitalskill.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
CSSだけで吹き出しを作ってみる 三角の作り方｜mattintosh note (跡地)
CSSで三角が作りたいなぁ…と。線を途中で曲げたかっただけなんですけどね。CSSのtransformを使って変形してもいいのですが、ブラウザによってグラフィックに差があるので実用が難しい。 そこでググってみるとborderを使ったトリックが紹介されていました。 Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? | Filament Group, Inc., Boston, MA http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/ 仕組みはborderで厚みを出し、border-colorでもって領域を分割しているそうです。最初、よくわからなかったのですが、かなり昔のことを思い出してみるとそういえば
【CSS 】clearfixを使ってfloatを解除する | バシャログ。
最近、cssでよく使用しているのがclearfixです。 親ボックス内で子ボックスをフロートする場合、親ボックスの背景画像が表示されなかったり親ボックスのマージンがなくなってしまったりと問題がありました。 clearfixを使ってからは、結構スムーズにCSSを設定できるようになりました。 ソースは以下です。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; min-height: 1%; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hid
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.allinthemind.biz/markup/css/box-shadow.html
CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About![CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e5c80524767cb55393e0a6d34b718f50c34e6ef/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F3%2F7%2F0%2F7%2F201609231530%2Ftopimg_original.png)
html5-memo.com
CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout