普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
【続・誤植】Adobeの提案する新しい＜br＞の世界が酷すぎて泣ける。
【閲覧時腹筋注意】Apple新商品のキャッチコピーが直訳すぎて気になったので集めました。 それに引き続き今度はAdobeのサイトにも似たような面白いものがあるということで見てきたました。 今回は前回ほどでは無いのですが、修正される前にキャプチャーを撮ったのでよろしければどうぞ。 これを見て、分かる人は分かると思います。 この＜br＞というのは、ホームページなどをつくるHTML等で使う改行のこと。 本来ならこの＜br＞というのはこのように表示されず、そこの部分が改行されるのですが、 ＜＞が全角なんでしょうか？とりあえずそのまま表示されちゃっているので、こんな奇妙な文章に… とりあえずAdobeが提唱する＜BR＞の新たな次元をご紹介しましょう。 なるほど。＜br＞は効率かつ柔軟なんですね。 最高峰の＜br＞には世界が驚きます。 Adobeを使えば＜br＞が効率良く作れます。 ＜br＞というのは
引用元のマークアップ
引用で引用元について明らかにすることは大切です。blockquote要素にはそのための属性としてciteが用意されていますが、ほとんど飾りのようなもので、効果的にその情報を表示することは出来ません。じゃどうすれば良いのかというような話です。 figcaption要素で引用元の情報をマークアップし、blockquote要素と共にfigure要素で括るというのがどうやら王道なようです。 <figure> <blockquote cite="http://example.com/"> <p>Lorem ipsum dolor sit amet.</p> </blockquote> <figcaption> <p><cite><a href="http://example.com/">Example Website</a></cite></p> </figcaption> </figure> bl
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
画像の直リンクの是非について考えた：ekken
先日話題になった「他人のブログをそのままパクって、img直リン画像を差し替えられたブログ」の話なんだけど。 パクリがイクナイのは当然として、問題となったブログを批難する声に見られた意見に気になる物があった。 他人のブログをパクり無断で公開！ 被害者の対抗策が凄い アメブロ広報「数件の通報が来ている」 - ガジェット通信 この露骨にパクったブログが何故問題になっているのか整理してみよう。 と、挙げられているのが、下記の六つ。順序付きリストにしてみた（文頭に番号が反映されていない人は、上から順に1～6が付いている物として下さい）。 無断転載 引用の範囲を超えている コピーライトが入っていない 相手のサーバーから画像を持ってきている 参照元にリンクすらない 自分が書いたかのような書き方 1,2,3,5,6の問題点は、要するに「他人の書いた物を自分が書いたように見せている」ということで共通している
改行の使用について - OKWAVE
No.1さんも述べられていますが、たぶん、そんなに深い意味はないと思います。 あまりにも、改行が多い場合には間延びしたものになるため、読む側からすれば読みにくいと言うのはあると思います。 最近はやたら、改行の多いメールやこのような質問サイトでも見受けられます。 その反動で、このような極端な発想になっているのでしょう。 つまり「絶対にやってはいけない」と言っておけば、従わない人でもそんなに酷いことをやらないだろうと言うのは指導する側の常套手段としてよく用いられます。 今回の場合は「絶対に」と言うほどのことでもないため、このような対応になったのだと思います。 何の採点で減点対象なのか、よくわかりませんが、小説の文章内容以外の指摘は参考程度にして深く悩まない方が自分のためになると思います。 特に個人の趣味であくまで楽しみでやっているのならば、なおさらでしょう。 でも視力が弱いと言う人は、改行を増
MobileHackerz再起動日記: ディレクトリに置くWebページはなぜ「index.html」なのか
2010/04/16 ■ ディレクトリに置くWebページはなぜ「index.html」なのか 自分でWebサイトを作ったりしたことがある人ならおなじみの、そしていろんなページを見てまわっていても見かけることが多いファイル名に「index.html」というものがあります。これ、何かといいますと「URLが特定のディレクトリだった時に、自動的にチェックされるファイル名」です。つまり、 http://mobilehackerz.jp/archive/wristomo/ というURLを入力すると、 http://mobilehackerz.jp/archive/wristomo/index.html と同じものを表示するわけです。下のURLが本来正しいのですが、上の表記でも（index.htmlが省略されているとみなして）表示してくれるという仕組み、そんなファイル名が「index.html」。 では
HTML5とCSS3の決定的な違いって？？ - OKWAVE
補足。『致命的な困りごと』というわけではありませんが、 No.2 に HTML5 は『ブラウザ内でいろんな作業ができることを目標』にしている、と書きました。それゆえ、構文ミスのある「壊れた HTML」でも、HTML5 ブラウザなら共通のエラー訂正をしてくれます。 構文ミスに寛容な代わり、「意味」の間違いには異様に厳しくなっています。例えば、HTML5 においてテーブルレイアウトは認められません。それは表をレイアウトに転用する「意味」の間違いだからです。また、HTML5 ブラウザは見出し要素 h1、h2、……を拾って自動的にアウトライン（目次）を生成しますので、h1、h2 を「文字の大きさを変えるもの」と間違って覚えていた人は、痛い目を見るかもしれません。 これは、構文ミスに厳しい代わり「意味」には比較的寛容であった XHTML とは対照的です。そして「意味」の間違いは、機械的にはなかなか判
意外と知らないHTMLタグ講座 | オモコロ
HTMLタグというのはWEBの文章やグラフィックの配置や装飾を指定する便利な記号です。かけだしブロガーも、バリバリのプロフェッショナルも要チェック！意外と知らない便利なタグがあるかも！ 原宿: うーーーん………どうもホームページ作りがうまくいかないな…… リックェ: こんにちはー 原宿: おー、リックェ リックェ: 「HTMLタグ」のことでお困りだって聞いたんですけど？ 原宿: そうなんだよ、全然わかんなくてさ リックェ： 任せといてください！ 僕、一応そっち系の仕事してますんで詳しいですよ 原宿： 頼りになるー！ 悪いけどちょっと教えてよ リックェ： はい。まぁHTMLタグってのはマークアップ言語（ランゲージ）のひとつで、ドキュメント、つまり文章やグラフィックですね。これの配置を決めたり装飾をしたりする…… 原宿： あー、ちょっと待って。口で説明されてもイマイチわからないから、とりあえず
はてなダイアリーにおける文書の視覚整形について
メモ８ @nagao_memo8 意外や反応ある今日のブログネタ。「ネットにおける正しい日本語の書き方」。やはりこれは続きモノにしようかなあ。 http://htn.to/u7hzLJ 2010-08-04 19:05:23 Yukako MATSUMOTO 🐦️ @snowystreet via @nagao_memo8 さん。はてなダイアリー初期の頃、このような話やCSSのカスタマイズができるようにとかでよく議論したのを思い出したり。あと、箇条書きは、ul〜になるよう、はてな記法使われたほうが便利だと思います。 / ネ… http://htn.to/stvB1Y 2010-08-04 19:26:42 Yukako MATSUMOTO 🐦️ @snowystreet はてなダイアリー・はてなグループでは、箇条書きリストが極めて簡単に書け、マークアップも適切になる「リスト記法」という
【レポート】src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況 | エンタープライズ | マイコミジャーナル
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. HTMLのimgタグおよびscriptタグで「src=""」が指定されている場合、またはlinkタグで「href=""」が指定されている場合、リクエストが発生してページの取得が実施される振る舞いをするブラウザがあることをNicholas C. Zakas氏が指摘している。しかも空URL指定で取得されるコンテンツは何にも使われることなくそのまま消えていくという、まさに通信帯域だけを消費するという無駄な動きになっているという。 こうした動作の違
html5 ざっくりメモ
html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。 ほんとにざっくり書いているので、何か期待しても何も出ません＞＜ 日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。 例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。 あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。 なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。 主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。 なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し
３月６日付 よみうり寸評 : 社説・コラム : YOMIURI ONLINE（読売新聞）
なぜ、こんなものが流行(はや)るのか。インターネットの世界で利用者が急速に増えている「ツイッター」にそう首を傾(かし)げている人は多かろう◆１４０字以内の短文を誰でもネットに発信できる。読んでもらう相手を決めておく必要はない。いわば「つぶやき」だ。「腹減った」「もう寝る」もある。政治経済や国際情勢、宇宙を語っている人もいる◆最近は政治家もよく「つぶやく」。国会議員など３００人以上が利用中という推計もある。このうち今週話題になったのが原口総務相だ◆１週間前のチリ地震で自ら津波情報をつぶやいて発信。水曜日は国会予算委に遅刻したが、その間もつぶやいていた◆「ツイッター」は英語で「鳥のさえずり」。人々があちこちでつぶやく様を指すらしい。利用者は１００万人以上。つぶやき数も今週、累計１００億回を超えた。政治家の情報発信には格好の道具だ◆ただ発言を取り消せない。流言飛語が怖い災害時も使えるか。「綸言(
画像とかのパスを//で始めるのは何か問題があるのかな - Webtech Walker
知らなかったんだけど、画像のパスとかリンクとかhttp:を省略して//から書くことができるんですね。リンクだけじゃなくて画像とかも。そして//から始めると、今見てるページのプロトコルになるんですね（httpだったらhttp、httpsだったらhttpsってこと）。 <img src="//example.com/banner.gif" alt="banner /> 外部ドメインのバナーとか貼るときとかに全ページ共通でhttp://~と書いてるとhttpsのページでIEがエラー吐くんでhttpとhttpsで切り替えたりしてたんですけど、//から書けばいいんじゃないか疑惑。 これって何か問題あるのかな。ブラウザによって挙動がおかしいとか。問題無ければ使いたいところ。 追記：IEでリクエストが2回走ることがあるらしい。 CSS files downloaded twice in Internet
CGデザイナー・Webデザイナー・グラフィックデザイナーのためのクリエイティブ・タブロイド withD（ウィズ・ディー
2009.06.30 | トピックス クリエイティブ・タブロイド withD休刊のお知らせ 2009年6月30日をもって休刊させていただきました。 ご愛読いただき、ありがとうございました。 2009.06.29 | インスピレーション・ネタ探しの旅 行動につながる情報を見つけ出す インスピレーション・ネタ探しの旅 ♯26 ミキチョクシ（ペタビット／ナフタリン）
HTML5では、あの問題は解決するのでしょうか - カナかな団首領の自転車置き場ダイアリー
ふと思い出したわけですよ。 いや、p 要素の中に、ブロックレベルは配置出来ない問題なんですが。 問題文 2 ： しかし、私は上記に加えて、 ・水筒 ・タオル ・ちり紙 ・ビニールシート ・ビニール袋 ・雨具 も、必需品ではないかと思うのだ。 上記をどうマーク付けするか問題。 解答例 6 ： <p>しかし、私は上記に加えて、</p> <ul> <li>水筒</li> <li>タオル</li> <li>ちり紙</li> <li>ビニールシート</li> <li>ビニール袋</li> <li>雨具</li> </ul> <p>も、必需品ではないかと思うのだ。</p> これでいいや、ってことになったんでしょうか？（僕は、いいんだけど） 参照：マークアップの仕方、P 要素とか - カナかな団の躁鬱
【コラム】エンタープライズ0.2 - 進化を邪魔する社長たち - (36) メルマガの可能性と完璧なスタイルシートの考察。ユーザビリティ0.2 | 経営 | マイコミジャーナル
メルマガの可能性 メルマガを発行してもうすぐ6年になります。きっかけは自衛隊のイラク派遣に友人が「おかしい」と憤りながら、直前に行われた衆議院選挙で「自民党」に投票したことです。彼は「先輩に頼まれたから」を唯一の理由に自民党候補者に投票したといいますが、当時の与党で送り出した側。私は彼にこういいました。 「おまえが自衛隊をイラクに送った」 思想信条からではなく、粗忽な友人は投票と政治の関係をいまいち理解していなかったようです。彼に両者の関係を教えたときに思ったのです。「同じ様な人がいるかもしれない」。そして、メルマガをはじめました。彼は相変わらず粗忽のままですが、続けているのは見ず知らずの読者からのメールによります。 発行開始から半年後にレイアウトを改訂しました。紙面の各所をアスキーアートで飾った「見た目」重視のリニューアルです。「新訂版」発行直後に以下のメールが読者から届きました。 「私
AAずれる - 教えて！goo
ブログにＡＡ（アスキーアート）を載せたいのですが、ずれてしまいます。コピー＆貼り付けだけでは無理なようです。 必要なhtmlやポイントなどを教えてください。 例.ＡＡ ∧∧∧∧∧∧∧∧∧∧ ／＼ ／＼ ＜ ＿/￣/＿ ＿＿＿_ロロ＞ ／＼ヽ ∨〃／＼ ＜/ ＿＿ / /＿＿＿/ ＞ /(・) ＼ゞ/ ／(・) 〉 ＜ー' __ノ / ＿＿＿＿ ＞ ＿__/＼＿／ノ ＼＿／ ＼ ＜ /___／ ./__ ＿_/ ＞ ／ ￣￣￣￣＼ ＼ ＜ ││ ／／ ＞ ／ ソ ＼ | ＜ ││ ￣ ＞:／ ＿＿ | ＜ ││ ロロ┌┐ ＞:r〜〜〜〜〜〜‐、ヽ＼ ＼ |
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Another HTML Lint