意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場
HTML5やCSS3といった最新の技術を活用したWebページの制作は開発者にとっては魅力的な選択肢だが、そこには常に「どの機能ならば使っても良いか」という判断が必要になる。最新のブラウザがある機能に対応していたとしても、それがすべての主要ブラウザでサポートされていないことがあったり、あるバージョンでは特定の問題を引き起こすこともある。「どの機能ならば使っても良いか」という調査にかかるコストを考えると、従来の古い技術のみでWebサイトを構築する、といった選択肢も捨てがたいものとなってしまう。 こうした際に役立つサイト「HTML5 Please」が登場した。HTML5やCSS3、JavaScript APIに関して利用が推奨されるかどうか、どのブラウザのどのバージョンがサポートし、全体としてどの程度の対応状況にあるかをまとめたサイトだ。どの機能を利用すべきかといった判断をするのに役立てることが
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
最近話題のデベロッパー用WordPressテーマのBonesを早速使ってみた | バンクーバーのうぇぶ屋
Wordpressでスクラッチからサイトを作る時って、結構大変なことって多いですよね。 ゼロから構築したい時はむしろなーーーんにも無い方が良い！ってことも多々あると思います。 そんなWordpressデベロッパーの為に生まれたテーマ、Bones。まさに骨！！肉付きがありません、まっさらさーらです。 先日の記事で紹介だけしたものの、実際にインストールはしなかったので、ちょっと試しにインストールだけしてみましたのご紹介。 インストールするとこんな感じ。 テンプレートの中身、CSSでさえ、基本スタイル以外はほぼからっぽ。今から入れろって空気バリバリですね。 ヘッダー（header.php）も覗いてみる。いやー、ちゃんとHTML5なのに加えて読み込んで欲しいライブラリやらモジュールやらは大体呼んでいます。クロスブラウザ対応も出来てるっぽい。これ、HTML5のフレームとしても全然使えるんじゃねーすか
HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！ | HTML5でサイトをつくろう
前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。 【前回のエントリー】 HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編 第2回：HTML5のマークアップ】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 今回はそのサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML 5 Outliner』を利用してxhtmlとHTML５の違いを比較しながら理解を深めていきたいと思います。 アウトラインとは まずはアウトラインに
見落としがちなHTML5で変更された要素いろいろ
2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ ↑私が10年以上利用している会計ソフト！ HTML5の基本はここからお勉強！ 「ところでHTML5ってなに？」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！ Webの3つの問題を解決する「HTML5」とは何な
HTML5で制作された国内企業サイト20から現状の制作状況を知る!! | HTML5でサイトをつくろう
HTML5でのコーディング 最近、HTML5のコーディング案件に関わることがあったのですが、その時にHTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。 尚、サイトを調べていて気づいたのですが、現状(2011年8月)では宣言をHTML5にして内容自体は今まで通りdiv要素を使ってマークアップしているサイトが多いように感じました。新要素を多用して後から間違えが出てくるという可能性を考慮すると、とても理にかなっていると1人で感心してしまいました。今後この流れは変わると思いますが現状(2011年8月)では大切な考え方の1つだと思っています。 それともう１つ、多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。調べて見つけるとWEBの制作会社サイトであることが非常に多いように感じました。とても参考にさせていただきました。私も取り残されないように
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
個人利用を中心に急伸を続けるスマートフォン市場は、もはやニッチ市場ではなくなりつつある。過去に企業サイトの携帯電話（フィーチャーフォン）対応が問われたように、今後スマートフォン向けのサイト対応が課題になると考えられる。2010年はスマートフォン元年といわれていたが、2011年は企業のスマートフォンサイトへの投資検討が本格化してくるだろう。 2010年、スマートフォンの市場規模は急成長し、『スマートフォン利用動向調査報告書2011』（MCPC監修、インプレスR&D発行）によると、2011年3月末（2010年度）の契約数は、前年の497万契約から63％増の810万契約となる見通しだ。調査によると、契約数は年平均40％以上で拡大を続け、2015年度には4,712万契約に、コンテンツ配信事業も急成長することが予測されている。こうした調査からも、今からサイトをスマートフォンに対応しておくことが決して
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
BonBon Buttons - Sweet CSS3 buttons
Button Search Stars Home Play Share Love Quit Upload RSS There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. Markup I get a real kick out of trying to keep the markup minimal, so I'm really
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2011/03/html535web.html