【html5】HTML5の基本タグと、HTML5対応リセットCSS「sanitize.css」使い方サンプル – atomicbox
2016年1月、ついに世界のWEBデザイナーが切望していたIE8のサポートが実質終了しました。 ようやく大手を降ってhtml5に移行できるよねということで、html5の基本タグを再確認しながらソースサンプルというかデモページを作りました。 HTMLの基本を見直す良いタイミングだったので、ついでにリセットCSSも見直すことに。 HTML5に対応していて、Normalize.css系の、「オールリセットじゃなくて、ブラウザ間の差をなくす」タイプのCSS、「sanitize.css」を使ってみたので合わせてまとめておきます。 HTML5のヘッダー <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content="html5の基本文法と、ベースレイアウトに良く使う基本タグ
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
HTML5のWebsocketを使ってチャットする
HTML5のWebsocket（Node.js+Socket.IO）を使って、チャットが行えるサンプルを作ってみました。Node.js+Socket.IOについては、下記のエントリーを参照してください。 Windows+Node.js+Socket.IO 環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。 １．サンプル動画 2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、チャットを行います。入力した文字列を送信すると、送信者およびページにアクセスしているブラウザに内容を反映します。 下の表示は画面が小さいので、全画面表示にするかYoutubeのサイトで直接見た方がいいかもしれません。 Websocket Chat Sample ２．サンプルコード Node.jsとSocket.IOを
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
HTML5についてのおさらい｜Web制作 W3G
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net
ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ～HTML 5で導入されるcanvas要素の使い方～ 同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。 ～HTML 5
HTML5 の DOCTYPE 宣言って IE6 でも標準モードになるんですね - IT戦記
HTML5 の DOCTYPE 宣言 <!DOCTYPE html> ですが、今までなんとなく「どーせ IE6 では互換モードなんでしょー」って感じで生きてきたんです。 ごめんなさいごめんなさい＞＜ サンプルコード 確認してみてください <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</title> </head> <body> <h1>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</h1> <dl> <dt>CSS1Compat</dt> <dd>標準モード</dd> <dt>BackCompat</dt> <dd>互換モード</dd> <dl> <script type="text/javascript">alert(docume
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でコピーライト表記をする時は「small」タグを使おう | Hack
Loading...
HTML5Rocks - A resource for open web HTML5 developers
css-lecture.com