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)
追加された行はこの色です。
削除された行はこの色です。
#author("2023-01-16T10:41:14+09:00","default:irrp","irrp")
→Web技術関連

→[[CSS関連]]

→[[JavaScript]]

→[[XML関連]]

#contents


*HTML [#n8723343]
-[[html { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です - Qiita>https://qiita.com/mrd-takahashi/items/8396d84bd2c52ab1cf3e]] 2023.1

-[[HTMLの< a href="tel:" >でリンクをタップして電話を発信させる方法｜webliker（ウェブライカー）>https://webliker.info/html/65145/]] 2022.1
-[[HTMLでメールを送る「mailto:」の使い方と注意点まとめ｜webliker（ウェブライカー）>https://webliker.info/html/99276/]] 2022

-[[HTMLname属性とid属性の違い - name属性とid属性の違い... - Yahoo!知恵袋>https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10102376495]] 2013
-[[input要素のid属性、name属性、type属性の違い - Qiita>https://qiita.com/it_tsumugi/items/b875efe89ae6c68abdd3]] 2021

-[[Create Buttons With Icons using HTML & CSS - DEV Community>https://dev.to/robsonmuniz16/create-buttons-with-icons-using-html-css-2iin]] 2022.7

-[[【保存版】Webフロントエンド基礎力（初心者向け）>https://qiita.com/teradonburi/items/43c52d7cffc318e9b1e9]] 2019.11

-[[HTMLとスタイルシート（CSS）の業務スキルレベル　判別表　（５段階）>http://d.hatena.ne.jp/language_and_engineering/20110702/p1]] 2011.7.2

-[[Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)>http://blogs.msdn.com/b/microsoft_press/archive/2012/08/20/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-second-preview.aspx?WT.mc_id=MSLS_win8apps-ebook]] 2012.8.20

-[[知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ>http://webcre8.jp/investigate/html-implied-specifications.html]] 2013.1.23

-[[知らない人は遅れてる？新Zen-Coding Emmet>http://log.deconcepter.jp/2012/10/emmet/]] 2012.10.21

-[[「携帯サイトをはじめて作る時にぜひ読んでおきたい11の記事」>http://www.plusmb.jp/2009/12/01/4999.html]] 2009.12.1


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

-[[HTML/CSS/RSSの妥当性を検証する14のツール>http://journal.mycom.co.jp/news/2009/06/03/062/index.html]] 2009.6.3

-[[検索エンジン３社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化）>http://www.sem-r.com/09/20090213153711.html]]
-[[プロレベルでハイクオリティなXHTML/CSSテンプレート集>http://phpspot.org/blog/archives/2008/12/xhtmlcss.html]]
-[[Why and How Styling Text Links>http://www.andyrutledge.com/styling-text-links.php]]
-[[直リンクに何が起きているのか>http://park5.wakwak.com/~tanaka02b/column/history.htm]] 2008.4.20
--直リンクという言葉の一般的な用法は、「直リンク＝ディープリンク」から「直リンク＝オブジェクト埋め込み」に変わりつつあります。しかし、このサイトでリンクについて述べるときには私は今後も「直リンク＝ディープリンク」という用法を使い続けるつもりでいます。この最大の理由は、オブジェクト埋め込みは正確な意味ではリンクではなく、これを「直リンク」と呼ぶことで多くの混乱が生じていると考えるからです
-[[HTML5が持つ本当の意味>http://www.atmarkit.co.jp/news/200801/25/html.html]]
--XHTML、セマンティックWebは普及に失敗した
-[[画面の中心にボックスを配置>http://code.nanigac.com/source/view/286]]
-[[角丸の背景を最低限のタグで実装>http://code.nanigac.com/source/view/285]]
-[[dl,dt,ddタグで表組みもどきを作る>http://code.nanigac.com/source/view/280]]
-[[左上にステッカーのような飾りをつける>http://code.nanigac.com/source/view/278]]

-右クリックできなくする
 <body oncontextmenu="return false">
 </body>

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

-[[無料で200個以上のウェブサイトテンプレートをを配布する「OpenDesigns.org」>http://gigazine.net/index.php?/news/comments/20070215_opendesign/]]
--http://www.opendesigns.org/

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

-[[プロに学ぶWeb 2.0な画像テク ガラス調ボタン>http://journal.mycom.co.jp/series/web20/001/]]
-http://nikitathespider.com/ htmlのバリデーションやリンク切れをチェックしてくれるサービス
-[[サイトがほかのブラウザでどう見えるか試すサービスbrowsershots.org:http://gigazine.net/index.php?/news/comments/20060908_browsershots/]]
-[[SHTML:http://www.shtml.jp/]] 
--JavaScriptを使ってソースを暗号化する仕組み。Secure HTMLの略らしい。
--ブラウザが違うとちゃんと動かなかったりする問題がある。使い物になるのかどうかについては要検討と思われ
-[[Five XHTML Elements You Didn't Know But Were Afraid to Ask:http://www.codeproject.com/html/FiveXhtmlElements.asp]]
-[[URLにチルダを書いてはいけない？:http://www.asahi-net.or.jp/~jy3k-sm/i_net/url.html]]
--「~」のエンコードはUAが行うべきだと
-[[HTML概説:http://www.parkcity.ne.jp/~chaichan/src/element.htm]]
-[[HTML lint:http://openlab.ring.gr.jp/k16/htmllint/htmllint.html]]

**ブロックレベル要素 [#e02e464d]
-h1～h6
-p
-ul
-dl
-blockquote
-address
-div

**インライン要素 [#v532b512]
-a
-img
-em
-strong
-br
-span


*HTML5 [#x46623c4]
-[[contenteditableで編集可能なテーブルを作る >https://noarts.net/archives/986]] 2018.7

-[[HTML5入門>http://html5.imedia-web.net/]]

-[[Dive into HTML5>http://diveintohtml5.info/]]

-[[世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ>http://mizchi.hatenablog.com/entry/2013/09/25/190313]] 2013.9.25

-[[HTML5で組んでるならこの魔法のjsも入れておけっていう話>http://mbdb.jp/hacks/html5shiv.html]] 2012.12.1

-[[HTML5のスマホ対応の基礎知識とハマリどころ3選 (1/3)>http://www.atmarkit.co.jp/ait/articles/1211/22/news022.html]] 2012.11.22

-[[1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！>http://design.kayac.com/topics/2012/11/html5tool.php]] 0212.11.12

-[[モバイルアプリ開発プラットフォームとしてのHTML5>http://japan.cnet.com/sp/businesslife/35023353/]] 2012.10.23

-[[HTML5の学習に役立つ(主に)日本語のサイトまとめ2012 >http://webcre8.jp/collect/html5-resource-japanese.html]] 2012.10.25

-[[いったん、水を差されたHTML5の現状と、将来について>http://thinkit.co.jp/story/2012/10/23/3744]] 2012.10.23

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

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

-[[HTML5カンファレンス2012の資料まとめ>http://stocker.jp/diary/html5-conference-2012/]] 2012.9.11

-[[Apache Cordova を使って Windows Phone の HTML 5 アプリを開発する>http://msdn.microsoft.com/ja-jp/magazine/hh975345.aspx]] 
--[[Apache Cordova Documentation>http://docs.phonegap.com/en/2.0.0/index.html]]

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

-[[The Most Important Parts of HTML5>http://blog.n01se.net/blog-n01se-net-p-375.html]] 

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

-[[HTML5--押さえておくべき10のタグ>http://japan.cnet.com/sp/businesslife/35017728/]] 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)の資料を公開します>http://tonosamart.com/blog/html5-jquery-5-26/]] 2012.5.26

-[[MdN Design Interactiveにて連載した「ゼロからはじめるHTML5でのサイト制作」全12回まとめ>http://webdesignmatome.com/web-tips/mdn-matome]] 2012.6.1

-[[Tutorial: Rubik's cube with HTML5 (CSS3 + JavaScript) >http://html5rubik.com/tutorial/]] 2012.6.1

-[[HTML5 Game Development Tips: Part 3>http://blog.clay.io/tag/html5-game-development-tips]] 2012.5.29

-[[HTML5 マークアップ入門>http://tmlife.net/web/html5/html5-markup-guide.html]]

-[[避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場>http://news.mynavi.jp/news/2012/01/31/034/index.html]] 2012.1.31

-[[いままでまとめたHTML5の勉強をしたさいに作成したまとめ　～HTML5の新要素の説明からマークアップの基本まで～>http://webdesignmatome.com/web-tips/html5matome]] 2012.1

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

-[[HTML5とは何かを簡単にまとめてみた>http://techblog.yahoo.co.jp/cat207/web_1/html5/]] 
-[[HTML5基礎知識>http://d.hatena.ne.jp/hebita164/20100306/1267889468]]
-[[HTML5を学ぶための情報源まとめ>http://hyper-text.org/archives/2009/11/html5_resources.shtml]] 2009.11.2


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

-http://dothtml5.com/




*SVG [#d003431d]
-[[SVGの記述方法 - Qiita>https://qiita.com/takeshisakuma/items/777e3cb0a54ea7b1dbe7]] 2021.11
-[[Displaying and detecting support for SVG images>http://voormedia.com/blog/2012/10/displaying-and-detecting-support-for-svg-images]] 2012.10.18
-[[svgを使って複数の画像を一つにまとめる方法 >http://defghi1977-onblog.blogspot.jp/2012/07/svg_30.html]] 2012.7.30
-[[10分でわかるSVG 基礎編>http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics02/01.html]] 2012.6.2



*Webデザイン [#f83814c3]
-[[大量の文字と派手な色が並ぶ日本のウェブサイトはなぜこれほどまでに「異質」なのか - GIGAZINE>https://gigazine.net/news/20221129-peculiar-case-of-japanese-web-design/]] 2022.11

-[[パララックス効果に欠けているもの &#8211; U-Site>https://u-site.jp/alertbox/parallax-usability]] 2022.10

-デザインサンプルになるサイト
--[[Awwwards - Website Awards - Best Web Design Trends>https://www.awwwards.com/]] 
--[[CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards>https://www.cssdesignawards.com/]] 
--[[The FWA - Awards>https://thefwa.com/awards/page/1/]] 


-[[UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ>https://coliss.com/articles/build-websites/operation/design/visually-distorted-when-ui-looks-all.html]] 2019.11

-[[未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開>https://baigie.me/officialblog/2019/10/30/web-design-workbook/]] 2019.10

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

-[[Webサイト設計図 &#8211; ワイヤーフレームの作り方 >http://www.webcreatorbox.com/tech/basic-wireframe/]] 2012.10.3


-[[胡散臭いデザイン、集めました>http://buta.in/]]
-[[ビジネスサイトに使えるレイアウトのチュートリアルいっぱい>http://www.designwalker.com/2009/11/corporate-tutorial.html]]

-[[みんなで作るWEBデザイン参考集「ブックマ！」>http://bookma.org/index.cgi]]

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

HTML関連の履歴差分(No.2)
