![html5-memo.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/d12de8a8dfaa8f89583d686f8d6c6e86212df81e/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2012%2F08%2FA86.jpg)
アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが重要になってきます。 今までのHTML4やXHTML1.0でもh1~h6の要素を使用して暗黙的に階層化されているのを示していましたので考え方が変わったということではないですが、HTML5ではサイトのアウトラインを考えるには、まずセクションを意識する事がとても大切になります。 HTML5のセクションを考える セクションの考え方を理解する為に1冊の本を例に挙げたいと思います。 本は1つの大きなセクションからできていて、タイトル見出しと内容があります。その中には章があり、それらの各章をセクションに例えます。そして章にも見出しと内容があります。さらに章の中にはいくつかの節があり、これもセクションに例えることができます。 次に、この考えをWebページに当てはめる為にHTMLではセクションをどう区別している
前にipadで見れる写真系のアプリを紹介しましたが、今回はレイアウトの参考になるWEBマガジンのアプリの紹介です。 こちらも無料で(一部アドオンは有料)でクオリティの高いものがたくさんあるので僕もWEBデザイン(特にグラフィックや文字の見せ方)の参考にしています。 雑誌などでもデザインの参考になる本はたくさんありますがWEBデザインやアプリ制作などでは実際のデバイスで見た方がイメージがつきやすい部分があるんですよね。 僕がipad買ってよかった点は「気軽にソーシャル系サイトの閲覧ができる」「youtubeなどをある程度のサイズでどこで見れる」「無料アプリで写真やデザインの参考にできる物が結構ある」といったところでしょうか。 SYU.HA.RI 2011/10/26現在の価格:無料 日本の伝統工芸がわかる!楽しめるipadアプリです。 SYU.HA.RI / 守破離は、日本の伝統工芸を紹介す
iPhoneサイト制作(スマートフォンサイト制作)をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作(スマートフォンサイト制作)にreset.cssは必要? そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
スマートフォンサイトを制作する上で重要となる「最適化」。 PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。 スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。 今回は、スマートフォンサイト制作に便利な、CSS3のグラデーションを使った背景パターンの作り方を紹介します。 ※CSSではスマートフォンサイト向けにwebkitの記述のみを使用しておりますので、サンプルページはスマートフォンのブラウザかSafari、Chromeで閲覧ができます。 CSS3のグラデーションを使ったパターンの作り方 CSS3のグラデーション機能を使うと、様々なグラデーションを作ることができますが、 一見グラデーションには見えないような単色の
スマートフォンサイトを制作する際に、iPhoneやAndroid両方の機種での検証や、もう発売されていないようなOSのバージョンの対応も必要になる機会があるかもしれません。 本来ならば一通りの機種を用意して実機で検証できる環境が必要ですが、個人での制作や、ちょっとしたサイトのスマートフォンサイトの対応の場合もう少し手軽な検証方法が必要になります。 また、PCでコーディングなどのサイト制作時のちょっとした確認は、やはりPCブラウザで見た方が楽です。 今回はPC版safariのユーザーエージェント指定を使用したスマートフォンサイトの検証方法を紹介します。 なぜPC版safariなのか? 現状のスマートフォンのブラウザは主に、iPhone向けのsafariとAndroid向けブラウザの二つに分かれます。 また、BlackBerryなどのその他のスマートフォン機種もWebkit系ブラウザを使用する
【HTML】 <audio controls> <source src="audio/sample.mp3" type="audio/mp3"> <source src="audio/sample.ogg" type="audio/ogg"> <source src="audio/sample.wav" type="audio/wav"> <p>※ご利用のブラウザでは再生することができません。</p> </audio> source要素もHTML5からの新要素になります。使い方は上記のようにaudio要素の中に記述しsrc属性に再生するファイルを指定しすることでブラウザは上から順に再生可能かをチェックしていきます。尚、要素に対応していないブラウザでは全て無視され、その後ろに記述された要素が表示されるようになります。 ブラウザの表示確認 今回はFirefoxもちゃんとプレイヤーが表示されまし
facebook いいねボタンの仕様変更?OGPの設定についてまとめました( localeプロパティについて) 『いいね!』ボタンのOPGについて FacebookのいいねボタンのOGP設定に若干の変更がでておりましたので補足記事を含め作成しました。今回の記事だけでいいねボタンの作成からOGPの設定までを再構築しました。facebookは仕様がよく変わるので一部のキャプチャーが違うかもしれませんが大体同じ感じになっています。 現状(2011.12.16)でURLリンターを使ってみると下記のような『Warning』の警告が出てしまうようです。 『The og:locale property should be explicitly provided, even if a value can be inferred from other tags.』 警告のコメントを翻訳にかけてみた結果、どう
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました! ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。 特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。 HTML5でinput要素に追加されたtype属性 下記に各属性ごとの特徴をピックアップし、現状で対応しているブラウザの画面キャプチャを掲載しました。だだし、現状(※2011年9月)の対応状況になります。 search 『type=”search”』の主な特徴 1行テキストの入力フィールドで表示され検索向けであることを表します。 input要素の
Facebookページはみつけにくい? Facebookページってなかなか探しにくいですよね? 検索機能はありますが、ページを持っているかなどまとまっているサイトがまだまだありませんし、facebooknaviはあまり機能していないしということで地道に探していくか、友達がいいね押して表示されたのをチェックする感じかとおもいます。 WEB製作会社ではFBページの提案も多くなってきているので実例を調べる機会も多くなっているとおもいますので業種別にFacebookページをまとめてみました。 まずはファッションブランド業界のFacebookページを集めました。 ファッションブランド業界では特設ページを作成してPRしているブランドと、ただウォールを設けて写真で商品を紹介しているサイトなど力のいれようはそれぞれですが、どのブランドもコレクションを写真や動画で紹介したりコミュニティとして使われる場合が多
Facebookページの作成で参考にしたFacebookページ 今回Facebookページの作成で参考にしたFacebookページをまとめました。国内のFBページの事例紹介や無料テンプレートサイト、FBページ製作Tips系などを参考にしました。 こちら以外にもオススメがありましたら教えてください。 デザインが素敵な日本語Facebookページ 10選 http://goo.gl/lev0Z Facebookプロモーション国内事例集 http://goo.gl/RYq34 iframeテンプレート実用サンプル集 http://www.facebook.com/iframe.templates ソーシャルメディアで勝つためのランディングページ攻略方法 http://www.facebook.com/jetbulls フェイスブックページ・フリーテンプレート倶楽部 http://www.face
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く