Web Material Memo Pad

HTML5/CSS3Category

Webdesign is like store display.

Article6

良く使うstyleのまとめ

結構使うが手打ちするのが面倒臭いやつら!コピペ用… 文字の前後に挿入contentプロパティ 擬似セレクタ:beforeと:afterを使って <small>文字</small> <small class="クラス名">16進数</small> 前に★を挿入 文字 small:before{ content: "★"; } 後ろに16進数で挿入 16進数 small:after{ content: "\00273f"; } ↓nth-childと組み合わせたりすると良い ※IE7以下が未対応 ※ソースに...

ページの上へ戻るリンク(ページトップへ)覚書

画面を下げると「ページトップへ」のリンクをふわっとだすやつ よく使うのでコピペ用に… 関係ないので 下の方にでもペタ <nav id="page-top"> <a href="#top"><i class="fa fa-hand-o-up"></i></a> </nav> スタイルシートをペタ #page-top { position: fixed; right: 10%; bottom: 80px; font-size: 400%; opacity: 0.8; z-index: 500; } 適当に装飾...

ドロップダウンメニュー CSS3で実装

ドロップダウンメニューはjqueryを使うと色々出来る こちらのサイトで紹介されてるのはコピペで良い さらに↓の二行を<head>に足せばjqueryファイルを鯖に上げなくても良い <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4.2");</script> が それすら面倒臭いのでCSS3のみで実装 IE6, 7でもそれなりに逝ける ...

IE9でtransformとか ベンダ・プレフィックス

プロパティ名にベンダ・プレフィックスなるものをつけるとか「-ms-」-webkit-transform: rotate(45deg);/* chrome20/Safari5.1.2 */-moz-transform: rotate(45deg);/* firefox13 */-ms-transform: rotate(45deg);/* IE9 */-o-transform: rotate(45deg);/* Opera12 */transform: rotate(45deg);サポート情報CSS3 Support in Internet Explorer 9 CSS3 Pie (IE6-9)で border-radius(対応済)、box-shadow、とグラデーションが使える...

HTML5 追加された要素

これらを利用することにより要素の役割をより明確に定義することができるsection⇒セクショニングコンテンツnav⇒主要なナビゲーションarticle⇒独立した記事aside⇒関連性はあるが本筋からはずれたコンテンツhgroup⇒見だじグループheader⇒導入コンテンツfooter⇒セクションに関する情報figure⇒キャプション付き図画やコードfigcaption⇒図画やコードのキャプションtime⇒日時mark⇒ハイライトruby⇒ルビ注記rt⇒ルビテキストrp⇒ルビカッコwb...

HTML5

DOCTYPE宣言(01)文字コード属性も簡単に⇒charset属性(02)空要素は閉じなくても良い⇒<br><!DOCTYPE html><meta charest="UTF-8">br<br>多くのブラウザで「display:inline」の状態のものを「display:block」を指定しておくsrticle,aside,footer,header,hgroup,nav,section { display: block;}IEで新たに追加された要素に対してスタイルを適用することができないのでhead要素内に下記コードを追加して対応<!-...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。