“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
HTMLコードを解析して問題箇所と理由を知らせてくれるブックマークレット・HTML_CodeSniffer - かちびと.net
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
WP Help SheetのHTML版を日本語化したので無料配布します - かちびと.net
以前書いたWPのチートシート色々 という記事内でご紹介した WP Help SheetのHTML版が 自分にとって結構役に立っている ので日本語化して配布する事にします。 記事元はもともとWPCandyのチートシートをHTML化したものですが、ライセンス表記が無く、WPCandyも閲覧不能な状態なので記事元に確認のコメントを入れましたが返信が無いので（1年前の記事ですしね）WPCandy（http://wpcandy.com/ リンク切れ）、Liquidicityと記事元のFrozr.comのクレジット表記を残しておきます。 WP Help Sheet HTML Ver.日本語版 日本語版です。なんとなく説明しにくく、微妙なものもありますorz 分かりやすいようにご自身で変更加えてもいいでしょうし、付け足すのも有りですね。 ダウンロード テキストエリアでタグを囲ってあるのでコピペを容易に行
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3だけで作るボタンデザインいろいろ
html5-memo.com
エクセルのデータをhtmlに1秒で変換してくれるサイト TABLEIZER!が便利すぎる。 – @attrip
3streamer.net
今風のウェブを作る際に使えるCSS/HTML/JSのテンプレ『Easy Front-End Framework』 - 100SHIKI 〜 世界のアイデアを日替わりで