![[PukiWiki]](image/owl.png "[PukiWiki]")
#author("2022-06-06T12:59:11+09:00","default:dex","dex") #author("2022-06-06T12:59:52+09:00","default:dex","dex") #contents #ls2 *HTML [#lb101240] ///////////////////////////////////////////////////////////////////// -[[Memo/CSS]] -記事 --[[Web制作初心者に読ませたい、最近の初心者向けWeb制作ネタまとめ7つ - W3Q:http://w3q.jp/t/2231]] --[[「困った！HTML初心者にどうやって教えたらいいの？」HTMLとCSSの効率的な教え方 | 3streamer blog:http://blog.3streamer.net/html-css-beginner/how-to-lecture-about-html-and-css-601/]] ---- ** リンク切れ/dead link/broken linkを探す [#ua0e0976] webサービス: - https://validator.w3.org/checklink CLI: - wgetで調べる #geshi(bash){{ wget \ --spider \ --recursive \ --level=inf \ --no-verbose \ --no-directories \ --execute robots=off \ -o wget.log \ https://example.com https://example.com/ }} - [[broken-link-checker でデッドリンクを検出する - Neo's World:https://neos21.net/blog/2017/09/11-01.html]] npmパッケージ ---- ** http/https混合コンテンツの移行 [#jb1dbe50] - http/https混合の検出 -- Chrome/VivaldiVの開発者コンソール(F12 or Ctrl + Shift + I)を押して、黄色い△マークが表示され、中に「Mixed Content:」とメッセージがあれば該当 - 記事 -- [[混合コンテンツの防止  |  Web  |  Google Developers:https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content?hl=ja]] ---- **プレゼン [#s2a7098a] -[[HTMLベースで作成できるプレゼン用スライドのまとめ | コリス>http://coliss.com/articles/build-websites/operation/work/html-basedpresentation.html]] ---- **デザイン [#z2ddef2a] -記事 --[[私がウェブサイト作成時にお世話になっているサイトをご紹介｜Webpark:http://weboook.blog22.fc2.com/blog-entry-324.html]] --[[新卒Webデザイナーにとりあえず読ませておきたいデザインの原理原則が学べるエントリーまとめ10個 - W3Q:http://w3q.jp/t/1747]] --[[Webデザインの評価項目をつくる | Arch:http://www.ar-ch.org/mt/archives/2012/03/web-2.html]] --[[Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ:http://webdesignrecipes.com/web-development-flow/]] --[[デザインをウェブサイトに適用する際にありがちな7つの間違い | コリス:http://coliss.com/articles/build-websites/operation/work/7-mistakes-developers-make-by-webdesignerdepot.html]] --[[2012年に備える、ウェブデザイナーのための10のガイドライン | コリス:http://coliss.com/articles/build-websites/operation/work/10-new-guidelines-for-web-designers-for-2012-by-freelancefolder.html]] --[[今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net:http://kachibito.net/web-design/slide-for-web-developer-and-designer.html]] --[[Appleから学ぶウェブデザインに役立つ10のチップス | コリス>http://coliss.com/articles/build-websites/operation/design/10-lessons-on-design-we-can-learn-from-apple-by-creativefan.html]] --[[デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳>http://e0166.blog89.fc2.com/blog-entry-921.html]] --[[サイトの「色」選びに役立つ20のツール｜Webpark>http://weboook.blog22.fc2.com/blog-entry-276.html]] --[[私がwebサイトのラフデザインを制作する時の流れ | Design Spice>http://design-spice.com/2011/06/23/website-rough/]] ---- **高速化/最適化 [#i8b751f3] -[[PageSpeed Insights:https://developers.google.com/speed/pagespeed/insights/]] --Google製。PCとモバイル両方チェックできる -記事 --[[Webサイト高速化対策の現状（1/3）：CodeZine:http://codezine.jp/article/detail/7030]] --[[ウェブページの高速化のために読んでおきたいサイトのまとめ｜Webpark>http://weboook.blog22.fc2.com/blog-entry-269.html]] --[[Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ (Yahoo! JAPAN Tech Blog)>http://techblog.yahoo.co.jp/cat207/cat214/yahoo_3/]] ---- **ツール [#t815290e] -[[WEB制作者なら必ず知っておきたいWEBツール21選｜designaholic -Creative Column->http://designaholic.cc/2011/03/webweb21.html]] **スマートフォン対応 [#kea27788] -[[はじめてのスマートフォンサイト制作「基礎知識や開発環境の準備編」 | ウェブル:http://weble.org/2012/05/07/smartphone-basic]] -[[スマートフォンブラウザ不具合特集:http://www.slideshare.net/HiroakiWakamatsu/ss-12718639]] -[[たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌:http://phpspot.org/blog/archives/2012/03/2kbhammerjs.html]] -[[少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス:http://www.webcreatorbox.com/tech/smartphone-snippets/]] -[[ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう:http://www.html5-memo.com/html5-site/iphone_markup/]] -[[スマホアプリの「使いやすさ」とは何か、を考えてみた - もとまか日記Ｚ>http://d.hatena.ne.jp/moto_maka/20110713/1310498405]] -[[スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]>http://blog.webcreativepark.net/2011/06/16-103025.html]] -[[Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum>http://web-tan.forum.impressrd.jp/e/2011/01/31/9607]] -[[Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！>http://blog.caraldo.net/2010/12/smartphone.php]] **HTMLテンプレート [#a84a6fc6] -[[超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集:phpspot開発日誌>http://phpspot.org/blog/archives/2011/07/htmlcss_2.html]] -[[レジュメやプロフィールページに使えそうなシンプルで綺麗なテンプレ「Azuka」:phpspot開発日誌>http://phpspot.org/blog/archives/2011/05/azuka.html]] -[[34のフリーで綺麗なXHTML/CSSテンプレート:phpspot開発日誌>http://phpspot.org/blog/archives/2011/01/34xhtmlcss.html]] -[[フリーの(X)HTML/CSSテンプレート５０:phpspot開発日誌>http://phpspot.org/blog/archives/2010/10/xhtmlcss_4.html]] -[[ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０:phpspot開発日誌>http://phpspot.org/blog/archives/2010/10/xhtmlcss_3.html]] -[[コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル:phpspot開発日誌>http://phpspot.org/blog/archives/2010/10/post_507.html]] -[[リニューアルしたTwitter風のWEBインタフェース作成チュートリアル:phpspot開発日誌>http://phpspot.org/blog/archives/2010/10/twitterweb.html]] -[[フリーのCSS/HTMLテンプレートいろいろ2010:phpspot開発日誌>http://phpspot.org/blog/archives/2010/08/csshtml2010.html]] -[[クールなデザイン満載のXHTML/CSSテンプレート４０種:phpspot開発日誌>http://phpspot.org/blog/archives/2010/08/xhtmlcss_2.html]] -[[クオリティの高いXHTMLテンプレート「40 High Quality CSS and XHTML Web Layout Templates」 | DesignDevelop>http://design-develop.net/web-design/40-high-quality-css-and-xhtml-web-layout-templates.html]] ** 長いURLや半角文字を強制改行する [#e7841203] -ブラウザの独自タグを利用するのがスマートそうだ pre { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ } -[http://archiva.jp/web/html-css/20060808013000.html 長～いURLによるカラム落ち、に対処する - Archiva] **buttonタグの動作 [#m9c23f54] IEやNetscapeはタダのボタンとして動作するが、Firefox2.0やOpera9.5はsubmitとして動作する。~ 確実にsubmitさせたいなら、type="submit"を付ける。 -[[<button> - ボタン>http://www.tohoho-web.com/html/button.htm]] --HTML4.01 では submit が既定値と定義されていますが、IE6.0 や Netscape の実装では既定値は button のようです。 -<button>の時submitしない --IE6.0 --IE7.0 -<button>submitする --Firefox2.0 --Opera9.5 **HTTPSの認証ページから認証後、HTTPのページへセキュリティーの警告無しにリダイレクトする方法 [#z2084054] +https://hoge/firstpage ページで入力 +http://hoge/secondpage ページへリダイレクト +IEの場合、セキュリティ警告ダイアログが表示 +「はい。」でhttp://hoge/secondpage へ移動 -条件 --Location: ヘッダで移動した場合 --<form action="">で移動した場合 -[[cyano: HTTPSの認証ページから認証後、HTTPのページへセキュリティーの警告無しにリダイレクトする方法>http://www.onflow.jp/blog/archives/2006/04/httpshttp.html]] --一度metaタグやJavaScriptで移動先を書いてやると良い模様。 <html> <head> <meta http-equiv="refresh" content="0; url=http://www.exmaple.com/logined.html"> <script type="text/javascript"> <!-- location.href = "http://www.exmaple.com/logined.html"; //--> </script> </head> <body> <p>ログインが完了しました。<a href="http://www.exmaple.com/logined.html">続けるにはここをクリックしてください</a>。</p> </body> </html> **htmlファイルから他のhtmlファイルを読み込む [#wc1f01ea] 外部ファイルをphpとかにすれば、動的ファイルを埋め込める。 +[[.htaccessを使う>http://php.nekosuke.com/000048.htm]] AddType application/x-httpd-php .htm .html +<iframe>を使う <iframe src="xx.html" height=300 width=300> この部分は iframe 対応のブラウザで見てください。 </iframe> +<object>を使う。xhtml的にはiframeはNGらしい。~ [[IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。>http://phpspot.org/blog/archives/2006/11/iframehtmlhtml.html]] <html> <head> <title>test</title> </head> <body> header <br/> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html" data="some.html"> <p>non object</p> </object> <!--> <![endif]--> <br/> footer </body> </html> +JavaScriptでdocument.write()、もしくはinnerHTMLする。 document.getElementById("disp").innerHTML = 'hoge' <SCRIPT src="header.js"></SCRIPT> **htmlの文法チェック [#efb31c0a] html,Compact HTML(CHTML)の文法チェックをして点数をつけてくれる。オープンソース -[[Another HTML-lint>http://openlab.ring.gr.jp/k16/htmllint/index.html]] --[[ゲートウェイサービス>http://openlab.ring.gr.jp/k16/htmllint/htmllint.html]] **デフォルトスタイルの初期化 [#lb71a3c4] CSSで、デザインを整えるとして、ブラウザ毎のデフォルトスタイルを消しておく。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } **SELECTボックスに横スクロールバーを表示させる [#qd54c527] 最近のブラウザでも表示は厳しい。~ -Mozilla系限定~ ただし、option毎にスクロールバーが出るのでウザイ。。~ &attachref(SELECTタグで横スクロールバー.html); **formタグの中でグループ化 [#a394c6ef] -<fieldset>…formタグの中でグループ化~ &attachref(fieldset.html); -とほほのWWW http://www.tohoho-web.com/html/fieldset.htm **optionタグの中でグループ化 [#j576bb86] -<OPTGROUP>…セレクトボックスの選択肢をグループ化する~ &attachref(index.html); -とほほのWWW http://www.tohoho-web.com/html/optgroup.htm **単語の途中でも自動的に折り返しさせる [#l06db0da] スタイルシートで以下のように指定する。IE6で確認~ BODY { word-break: break-all; } style="word-break: break-all;" |~word-break|~説明|h |normal|通常の状態| |break-all|単語に関係なく改行| |keep-all|単語の途中では改行しないようにする| ----
