サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
プロフェッショナル向きに開発された、HTML5+CSS3+jQueryなど直接実装に関わるファイルから、robots.txt, .htaccessなどサーバー関連のファイルも一式にまとまったテンプレートを紹介します。 HTML5 Boilerplate 昨日、当サイトで紹介した「HTML5 Reset」もHTML5+CSS3をベースに開発されたテンプレートセットですが、こちらはよりプロフェッショナル向けに開発されたものとなっています。 下記にその特徴を。 HTML5 Boilerplateの主な特長 クロスブラウザ対応(IE6も) HTML5対応 キャッシュの最適化と圧縮でGrade-Aのパフォーマンス モバイルブラウザへの最適化 クロスブラウザ対応のためにIEでは特定のclassを用意 プリント用のスタイルシート、パフォーマンスの最適化 HTML5でより早いページロードにする「.htac
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成:コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
10 examples of futuristic CSS3 techniques 近未来に頻繁に使われるであろうCSS3サンプルがまとまっていました。 本ブログで以前に紹介したものも多いですが、まとまっていて便利そうだったのでご紹介。 吹き出しをCSSオンリーで実装 シャドウ&グラデーション付きの立体ボタン 枠付き写真をCSSで実装 ポラロイド写真風 角丸ファンシーなフォーム実装 立体的なドロップダウンメニュー MacOSのインタフェースをCSSで実装 近未来においては、こうしたものを組み合わせつつ更にJavaScript等とも組み合わさって今では信じられないインタフェースになっていそうな気がします。 1990年代後半の時代を振り返ってみると、あの当時当たり前だったサイトが一部のサイトで見られるものになるような、同じような状態になっているのかも。 関連エントリ CSS3等を使ったサンプル
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
グーグルがHTML5の機能を駆使したGoogle Waveを発表したことなどをきっかけに、HTML5への関心がこのところ急速に高まっています。以前の記事「いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0」で紹介したように、HTML5やCSS3ではWebアプリケーションの構築に有用な機能が数多く含まれており、策定は現在もW3Cで進んでいます。 最近相次いで登場した最新のWebブラウザ、Firefox 3.5やSafari 4、Google Chrome 2.0などでは、策定中のHTML5やCSSの機能を取り入れ始めています。Video/AudioタグがFirefox 3.5でもサポートされ、プラグインがなくても動画や音声の再生が可能になったことは最近話題になりました。最新のWebブラウザでは、すでにいくつものHTML5の機能が使える状態です。
次のIE7やFirefox、Opera、Safariなどでサポートされる「CSS3」に関する情報をまとめたサイトです。テーブルの角を丸くするとか、文字に影を付けるとかの効果を確認できる実際にCSS3を使ったサンプルもあります。 Everything you should know about CSS3 - CSS3.info http://www.css3.info/ プレビューいろいろ。 CSS3 Preview - CSS3.info http://www.css3.info/preview/ 例としては以下のような感じです。なお、FirefoxなどのCSS3に対応したブラウザで見ないと効果がわかりませんのであしからず。 角を丸くする、四隅の内2つとか、上だけとか下だけとかも可能 http://www.css3.info/preview/rounded-border.html 文字に影
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く