新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。 | GrowGroup
あけましておめでとうございます！ 普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ GORILLA-Yこと、ただのゴリラです。 本年もGrowGroup株式会社をどうぞよろしくお願いいたします！ さて今回はスマホコーディングについてもう一度おさらいということで記事を書きました！ 普段web上で色んなサイトを見ていたり、プラグインなどを眺めていると 「そんなのあったの？」なんて指定に気づいたり、「よく見かけるけどあんまわかってない」なんて 状況、よくありますよね。 これは専門書を読んで学んでいくだけだと、その中に無い指定について自分で探求するのをやめてしまうから起こってしまう悲劇だと個人的に思っています。 新しいものを取り入れていくためにも、ここらで「htmlとcssのスマホ対応これだけはやっとけ/これはある程度わかっとけ」を一度まとめておこうと思ったわけですね。ハ
<style>－HTML5タグリファレンス
<style>タグは、スタイルシートを記述する際に使用します。 通常は<head>～</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。 style要素のtype属性は、スタイリング言語（スタイルシートのMIMEタイプ）を指定します。 例えば、CSSの場合にはtype="text/css"となります。 type属性は必須属性ではなく、指定しない場合にはtype="text/css"がデフォルトで適用されます。 style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。 media属性でメディアの種類を指定することで、 例えば、パソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイル などを指定し分けることができます。 W3Cの仕様で規定
【CSS】☆を子に持つ親の指定
それは現状ではできません。 この場合、親要素にclass名をつけるしかありません。 なお、HTMLが間違っています。 ★articleは、内容にheader,section,footer要素をとる、あるいはとると期待された完結した記事を示します。 ★<img>は行内要素ですから<p><img></p>と囲みます。 ⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/h … ) リンク先に仕様書本体があります。サンプルもそこに・・ <section> <h2>見出し</h2><!-- sectionには必ずひとつだけ見出しが存在すると期待される --> <p>段落</p> <p>段落</p> <figure class="fig withIMG" id="fig1"><!-- 本文から参照される記事
Ruby support in Firefox Developer Edition 38 – Mozilla Hacks - the Web developer blog
It was a long-time request from East Asian users, especially Japanese users, to have ruby support in the browser. Formerly, because of the lack of native ruby support in Firefox, users had to install add-ons like HTML Ruby to make ruby work. However, in Firefox Developer Edition 38, CSS Ruby has been enabled by default, which also brings the support of HTML5 ruby tags. Introduction What is ruby? I
animation-name－CSS3リファレンス
animation-nameプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーション名を指定する際に使用します。 animation系プロパティで要素にキーフレームアニメーションを適用する際には、@keyframesルールでキーフレームを定義する必要があります。 キーフレームでは、アニメーション開始時点（0%）のスタイルと終了時点（100%）、 さらに、必要に応じてその進行途中（0～100%）のスタイルを指定します。 animation-nameプロパティでアニメーション名を指定すると、@keyframesルールで定義したキーフレームが選択されます。 それにより、アニメーション効果を与える色・サイズなどのスタイルと、 アニメーション効果の適用方法（時間・進行割合・繰り返し回数・反転再生・一時停止・いつ始まるか）が関連付けられます。 animation-nameプロパ
box-sizing は魔法のコトバ！もうpaddingやborderを含めた幅の計算はヤメヤメ | Cappee Design
あとで読みたい人は… CSS3 の box-sizing プロパティがかなり便利です。 あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。 CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。 「あれ、なんで崩れるんだろ？」 「padding と border 分マイナスするの忘れてた～」 ってのがよくありました。（今もたまに。。） それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。 これはものすごい効率化になりますね！ box-sizing の書き方 box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。 指定できるのはこちらの２種類です。 content-box … 【デフォルト値】padding と border を要素の幅と高さに含
Code Guide
Golden rule Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what’s incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub. Every line of code should appear to be written by a single person, no matter the number of contributors. HTML Syntax Don’t capitalize tags, including the doctype. Use soft tabs with two spaces—they
Modernizrを使ってブラウザーの機能を調べるには
ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能なHTML5／CSS3機能を判定する方法は時代遅れだ。これからは機能単位で判別しよう。その方法を解説。 本稿では、Webブラウザーで使用できる機能を調べるのに、ユーザー・エージェント文字列を使ってブラウザー単位で判定するのではなく、機能単位で使えるかどうかを判別する方法を紹介する。 Modernizrとは HTML5やCSS3では、HTMLで表現できることが大幅に強化された。そのため、HTML5＆CSS3が普及するにつれ、きれいな見た目のサイトやリッチなレイアウトを持つサイトが増えてきている。 しかし、HTML5／CSS3機能の実装状況はブラウザーごとに異なるため、HTML5／CSS3の仕様として定義されているからといってそのまま使えるわけではない。この実装の差異に対応するために、これまでは、JavaScriptやサーバーサイド
CSSだけで作るスマホ向けラジオボタン | Agnist.code
スマホだとラジオボタンみたいな細かい要素は押しにくいのでサクッと作ったものを共有します。 表示サンプルクリックで選択状態の方が黒く塗りつぶされます。 IE8以下は非対応。そもそもスマホ用なのでいらんでしょう。 HTML<ul class="radios"> <li> <input type="radio" name="radio1" value="on" id="radio1-1" checked="checked" /> <label for="radio1-1">ON</label> </li> <li> <input type="radio" name="radio1" value="off" id="radio1-2" /> <label for="radio1-2">OFF</label> </li> </ul> ミソとしては、 <label> の中に <input> を入れず、
[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
Border-image: using images for your border - CSS3 . Info
Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for: border-image: border-top-image border-right-image border-bottom-image border-left-image bor
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
CSS3 の border-image で簡単にリッチなボタンを作れる未来がいつの間にかきてた - latest log
画像を使ってリッチでフレキシブルに伸び縮みするボタンやフレームを作る時みなさんはどうしているでしょうか。 従来の方法だと デザイナーさんが画像を9分割 マークアップで頑張って再現する というハードワークを強いられていましたが、 昨今のモバイル開発環境では、それ、もう要らない苦労らしいですよ。 CSS3 の border-image を使うと、9 slice(9 patch)を CSS だけで実現可能です。 用意するものは、9つに分割する前のボタン画像です。 画像を用意したら、http://border-image.com のジェネレーターを使い border-image 用のCSSを生成します。 -webkit-border-image: url(img/btn.9.png) 27 24 30 25 round; とすると、 Android Browser 2.3.3 iPhone 4S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
テキストをCSSやSVG等でアニメーションさせるやばいサンプル集:phpspot開発日誌
Nine-patch images for web development
Html5で9patch