ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。 - kojika17
最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 UA Style Sheets の margin p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。 IE8: p要素のUA Style Sheets p { display: block; margin: 1em 0; } Webkit:
そのHTML5のタグは合ってますか？間違えやすいタグ15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ <dt>,<df
4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
セレクトメニューを自由にデザインできる customSelect.js
「customSelect.js」は、CSSだけでは変更できない、フォームのセレクトメニューのデザインを簡単にカスタマイズできるプラグインです。 標準スタイルはシンプルですが、自分で用意したデザインも適用できます。軽量で拡張しやすいので、セレクトメニューのデザインをカスタマイズするにはベストなプラグインです。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、customSelect.js を配布ページからダウンロードしましょう。customSelect.js は GitHub で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と customSelect.js を、利用するWebページの head の閉じタグ直前に読み込みます。このプラグインはページの読み込みが完了する前に読み込む必要があ
[CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート
JavaScriptは使用せず、CSS3アニメーションで画像を振り子のように揺らすスタイルシートを紹介します。 Swinging image with CSS animations 画像はネコの写真だけで、枠やピンや糸はスタイルシートです。 実装は下記のようになります。 HTML <figure class="swing"><img src="http://placekitten.com/g/200/200"></figure> CSS body {background: #9cf;} .swing { -moz-animation: swing linear 2s infinite; -moz-transform-origin: center -20px 0; -webkit-animation: swing linear 2s infinite; -webkit-transform-o
[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
Bootstrapの新バージョン3のRC1がリリース！デスクトップからモバイル優先に、IE7, Firefox3.6はサポート外に
Bootstrap 3のRC1がいよいよリリースされました。 RC1はリリース候補版で、可能な限り広範囲でテストをすることを目的としたものです。 Bootstrap blog: Bootstrap 3 RC1 Bootstrapは今まではデスクトップ寄りのよく使うインターフェイスをまとめたフレームワークでしたが、Bootstrap 3ではモバイルファーストになり、CSS/JavaScriptなど1,600項目以上、ファイルも300以上が変更されました。 WIP: Bootstrap 3 ブラウザはIE7, Firefox3.6のサポートが中止されます。これはIE7は「*」と「zoom:1;」のハックを削除したこと、Firefox3.6は「-moz-box-shadow」のハックを削除したことによるものです。 また、スタイルシートをレスポンシブ用も含め一つのファイルにまとめたり、ライセンスが
Bootstrap 3(2.xも)を活用する時に役立つリソースのまとめ
Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。 Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。 まずは、本家のBootstrapから。 Bootstrap 3 スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。 最新のBootstrap 3rc1（7/27に公開）はリリース候補版です。 Examples Templates for Bootstrap Bootstrap純正のテンプレートやページの仕掛けが揃っています。 Narrow marketing 小さいプロジェクト用の軽量のテンプレート。
[CSS]パラグラフやリストなどのテキストの下にできてしまう意図しない余白を解決する方法
p, ul, ol, dl などのテキストの下にできてしまう意図しない余白を解決するうまい方法をCSS-Tricksから紹介します。 下記は各ポイントを意訳したものです。 Spacing The Bottom of Modules 上記のコードはシンプルで、divをラッパーとして、見出しとパラグラフを配置しているだけです。 HTML <div class="module"> <h3>Module</h3> <p>Pellentesque habitant morbi tristique senectus...</p> </div> スタイルシートもシンプルです。 CSS html { background: #333; } .module { width: 20rem; padding: 1.5rem; margin: 1.5rem auto; background: white; } h
[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
[CSS]box-shadowの面白い使い方！画像にシャドウをこんな感じにつけると立て看板風に見える
box-shadowはボックスの周りにふわりとしたシャドウをつけることができますが、それを少しアレンジして、立て看板風のシャドウをつけるテクニックをBloomから紹介します。 まずは、通常の周りにふわりとシャドウをつけてみます。 HTML img要素をdivで包みます。 <div class="css-box-shadow"> <img src="logo.png" alt="" /> </div> CSS ボックスの四辺にシャドウを適用します。 .css-box-shadow { width:133px; position: relative; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5); box-shadow: 1px 1px 4px rgba(0
自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」:phpspot開発日誌
Editr - HTML, CSS, JavaScript playground 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」。 いつでもどこでもブラウザがあれば開発ができるスタイルにするための鯖設置型エディタ。 コードハイライト機能がついているため、編集もしやすく、編集結果もすぐ見られるので学習用にもいいかもしれませんね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 前ブラウザのブラウザハックまとめ「Browserhacks」 ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 CSSのブラウザ対応状況が一発で分かる「BrowserSupport」 ブラウザ上での音声再生に使えるシンプルプレイヤー「Audio5js」
フラットだけじゃない、最近のチェックしておきたい良質ウェブデザインのまとめ
最近のウェブデザインのトレンドといえば、フラット、サークル、ブラー、ブラックなどがありますが、一番大切なのはコンテンツありきのコンテンツファーストではないでしょうか。 ここではコンテンツを魅力的に見せているウェブデザインをCSS Awardsから紹介します。
[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: position:relative 実装: display:table 実装: display:inline-flex デモ デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。 デモページ：幅780pxで表示 実装: display:inl
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？ 私が
CSSで定義されている147の色の名前を学べる『147 Colors』 | 100SHIKI
Webデザイナーさんとかには嬉しいかもしれないサイトのご紹介。 147 Colorsでは、CSSで定義されている147の色の名前を学ぶことができる。 ざざっと眺めて綺麗な色があればその名前を覚えておけばいいだろう。また色の名前はマウスオーバーするまでわからないのでクイズ的に使ってもいい。 どちらにしろ、「こんな色があったのか」という驚きがあっていいですよ。一度見ておくといいかもですな。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
