HTML関連の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
HTML関連へ行く。
- 1 (2022-11-29 (火) 10:47:13)
- 2 (2023-01-16 (月) 10:41:14)
- 3 (2023-04-07 (金) 17:28:42)
- 4 (2024-01-06 (土) 13:32:48)

→Web技術関連

→CSS関連

→JavaScript

→XML関連

HTML
- ブロックレベル要素
- インライン要素
HTML5
SVG
Webデザイン

HTML†

html { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です - Qiita 2023.1

Create Buttons With Icons using HTML & CSS - DEV Community 2022.7

【保存版】Webフロントエンド基礎力（初心者向け） 2019.11

HTMLとスタイルシート（CSS）の業務スキルレベル　判別表　（５段階） 2011.7.2

Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview) 2012.8.20

知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ 2013.1.23

知らない人は遅れてる？新Zen-Coding Emmet 2012.10.21

「携帯サイトをはじめて作る時にぜひ読んでおきたい11の記事」 2009.12.1

携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 2009.10.31
- tableの使用はOKか
- 背景色を複数色使っていないか
- 枠線を使っていないか
- サムネイル画像の横にテキストが来るパターン
- リストアイコンの下に文字が回り込んでくるかどうか
- ページの左右に微妙な余白が空いていないか
- フォントサイズは2段階ないし1段階か
- 太字を使っていないか

HTML/CSS/RSSの妥当性を検証する14のツール 2009.6.3

検索エンジン３社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化）
プロレベルでハイクオリティなXHTML/CSSテンプレート集
Why and How Styling Text Links
直リンクに何が起きているのか 2008.4.20
- 直リンクという言葉の一般的な用法は、「直リンク＝ディープリンク」から「直リンク＝オブジェクト埋め込み」に変わりつつあります。しかし、このサイトでリンクについて述べるときには私は今後も「直リンク＝ディープリンク」という用法を使い続けるつもりでいます。この最大の理由は、オブジェクト埋め込みは正確な意味ではリンクではなく、これを「直リンク」と呼ぶことで多くの混乱が生じていると考えるからです
HTML5が持つ本当の意味
- XHTML、セマンティックWebは普及に失敗した
画面の中心にボックスを配置
角丸の背景を最低限のタグで実装
dl,dt,ddタグで表組みもどきを作る
左上にステッカーのような飾りをつける

右クリックできなくする

<body oncontextmenu="return false">
</body>

IE6ではDOCTYPEの前にxml宣言（もしくはコメントなど）があると強制的に互換モードになる。よってxml宣言は（lintには書けと言われるが）書かないほうが良い。

無料で200個以上のウェブサイトテンプレートをを配布する「OpenDesigns.org」
- http://www.opendesigns.org/

無料SEO ただより高いものはなし 2006.12.2
- この無料SEOサービスは、無料につられてやってきた多数のサイトに、有料顧客サイトへの隠しリンクを張らせるというサービスなのだ。
- 隠しリンクは、Googleのペナルティ対象である。もし見つければ、隠しリンクを張ったサイトは悪質とみなされ、ランクを下げられるかインデックスから削除される。無料だからと気軽に乗ると、検索結果上位どころか、インデックスから消えて無くなるかもしれないのだ。ただより高いものは無い

プロに学ぶWeb 2.0な画像テクガラス調ボタン
http://nikitathespider.com/ htmlのバリデーションやリンク切れをチェックしてくれるサービス
サイトがほかのブラウザでどう見えるか試すサービスbrowsershots.org
SHTML
- JavaScriptを使ってソースを暗号化する仕組み。Secure HTMLの略らしい。
- ブラウザが違うとちゃんと動かなかったりする問題がある。使い物になるのかどうかについては要検討と思われ
Five XHTML Elements You Didn't Know But Were Afraid to Ask
URLにチルダを書いてはいけない？
- 「~」のエンコードはUAが行うべきだと
HTML概説
HTML lint

↑

ブロックレベル要素†

h1～h6
p
ul
dl
blockquote
address
div

↑

インライン要素†

a
img
em
strong
br
span

↑

HTML5†

contenteditableで編集可能なテーブルを作る 2018.7

HTML5入門

Dive into HTML5

世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ 2013.9.25

HTML5で組んでるならこの魔法のjsも入れておけっていう話 2012.12.1

HTML5のスマホ対応の基礎知識とハマリどころ3選 (1/3) 2012.11.22

1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！ 0212.11.12

モバイルアプリ開発プラットフォームとしてのHTML5 2012.10.23

HTML5の学習に役立つ(主に)日本語のサイトまとめ2012 2012.10.25

いったん、水を差されたHTML5の現状と、将来について 2012.10.23

さようならHTML5...。アメリカ人と日本人の標準化に差を感じる【連載：村上福之?】（1/2） 2012.10.2
- アメリカ人が集まって業界で標準規格を作ると、ハイスペックで個性と拡張性を重視する一方、互換性ウンコでカオスになりがちに見えます。一方、ヨーロッパ人や日本人が標準化をすると低スペックですが、足並みと横並び互換性重視で整然とするように見えます。

http://thecodeplayer.com/
- コードを書いている所とその結果表示を同時にアニメーションさせながら見せてくれるサイト

HTML5カンファレンス2012の資料まとめ 2012.9.11

Apache Cordova を使って Windows Phone の HTML 5 アプリを開発する
- Apache Cordova Documentation

このまま行っても儲からない！？HTML5アプリがマネタイズに不向きな５つの理由 2012.8.8
- 1. アプリ発見の難しさ
- 2. サポートが限られている
- 3. 広告ネットワークの欠如
- 4. HTML5で画一化された決済の仕組みがない
- 5. ユーザーのためらい

The Most Important Parts of HTML5

HTML5はなぜ重要なのか？ 2012.7.21
- 「スマートデバイス」の時代の覇権を、アップルやグーグルといった限られた企業が、そのOSによって握ることのインパクトは大きい。こうした状況の中で、固有のプラットフォームを持てない企業はどうすべきなのか？　列強の支配下にない唯一のアプリの動作環境が、「HTML5」なのだと言ってよい。
- HTMLはWebを記述するためのマークアップ言語だが、HTML5になると、できることに大きな違いが生じてくる。たとえば、HTML5アプリとして書かれたEvernoteやローカル版Gmailでは、通常のWeb版のようにアクセス時にデータの読み込みで待たされることがない。HTML4.01まででは、端末側にはクッキーやURLに文字列を付け足すような小技しか使えなかったが、HTML5では端末側にデータベースを持てるからだ。
- ひとことでいえば、HTML5（とJavaScriptなどの組み合わせ）で、iPhoneやAndroidのアプリでできることはたいていできるようになる。

HTML5--押さえておくべき10のタグ 2012.6.9
- ＃1：<video>タグと<audio>タグ
- ＃2：<input>タグのtype属性
- ＃3：<canvas>タグ
- ＃4：<header>タグと<footer>タグ
- ＃5：<article>タグと<section>タグ
- ＃6：<output>タグ
- ＃7：<details>タグ
- ＃8：<figure>タグと<figcaption>タグ
- ＃9：<progress>タグと<meter>タグ
- ＃10：<datalist>タグ

東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します 2012.5.26

MdN Design Interactiveにて連載した「ゼロからはじめるHTML5でのサイト制作」全12回まとめ 2012.6.1

Tutorial: Rubik's cube with HTML5 (CSS3 + JavaScript) 2012.6.1

HTML5 Game Development Tips: Part 3 2012.5.29

HTML5 マークアップ入門

避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場 2012.1.31

いままでまとめたHTML5の勉強をしたさいに作成したまとめ　～HTML5の新要素の説明からマークアップの基本まで～ 2012.1

Webの開発側にいる人間でFlash死ね！HTML5最高!と言っている人は正直どうかと思う。 2011.11.29
- HTML5と違い、Flashの設計の過程はadobeさんの独裁でクローズです。その代わり完全統一仕様です。一方、HTML5の場合は、船頭多くして...のような状態で、設計の過程もオープンですが、各社の実装がバラバラで、カオスです。その苦労は開発会社に降りかかってきます。

Flash vs. HTML5という構図がはっきり見え始めたぞ、と 2009.10.6
- しかし、ここに来て一挙に注目を浴びているのがHTML5。GoogleがChromiumにWebKitを採用した事、WebKitがスマートフォンのデファクト・スタンダードになりつつあること、Microsoftがブラウザーの技術で他社に大きく遅れをとっていることなどが理由で、スタンダードを決める上でのWebKitの影響力がいつの間にか大きくなり、それがHTML5という形で目に見えるようになって来たのが今年の話だ。
- HTML5にはさまざまな機能が含まれているが、「対Flash」という観点から言って意味があるのが、videoタグ、canvasタグ、CSSアニメーション、そしてSVG。これらの機能が入ったブラウザーが十分にかつ正しい形で普及してくればFlashは不要になる。

http://dothtml5.com/

↑

SVG†

SVGの記述方法 - Qiita 2021.11
Displaying and detecting support for SVG images 2012.10.18
svgを使って複数の画像を一つにまとめる方法 2012.7.30
10分でわかるSVG 基礎編 2012.6.2

↑

Webデザイン†

大量の文字と派手な色が並ぶ日本のウェブサイトはなぜこれほどまでに「異質」なのか - GIGAZINE 2022.11

パララックス効果に欠けているもの – U-Site 2022.10

デザインサンプルになるサイト

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ 2019.11

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 2019.10

https://material.io/design/
- Google公式デザインガイド

Webサイト設計図 – ワイヤーフレームの作り方 2012.10.3

みんなで作るWEBデザイン参考集「ブックマ！」

WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード 2009.3.28
- 赤情熱的　活動的　晴れやか　暖かい　元気の良い　購買欲求安っぽい　派手　危険　暴力
- 青さわやか　清らか　清涼感　すっきり　クール　閑静憂鬱　寂しい　冷淡　未熟　無機質
- 黄若々しい　陽気　明るい　楽しいうるさい　目立つ　幼稚　警戒
- 緑ナチュラル　新鮮　穏やか　すがすがしい毒　田舎　疲れ　未熟
- 紫高貴　優雅　神秘的　厳粛　神聖　ゴージャス　個性的不安　嫉妬　不健康　不満
- 橙親しみ　健康的　開放的　食欲増進　フレッシュ　気軽安っぽい　混雑　攻撃　わがまま
- 桃女性的　ロマンチック　優しい　幸福　かわいい　エレガント幼稚　甘え　媚　非現実
- 茶落ち着いた　穏やか　古風　慎重　丈夫　地味　堅実けちの色と言われている
- 黒フォーマル　格調高い　洗練された　高級　重厚感不吉　暗い　悪　絶望　劣等感　負け
- 白すっきり　クリア　清涼　上品　高貴　すがすがしい厳しい　空虚　孤独　冷たい　別れ
デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト

HTML関連 の履歴(No.2)

HTML†

ブロックレベル要素†

インライン要素†

HTML5†

SVG†

Webデザイン†