by shigemk2

当面は技術的なことしか書かない

HTML

お題

後でちゃんと読む。フレームワークとかCGIとか使わないでHTMLだけで多言語対応したいきぶん。 www.nomensa.com

remarkをちょっと使ってみる

markdown + remark.js + gh-pages でプレゼン資料を公開する - Qiitaqiita.com gnab/remarkgithub.com 利点 ほぼmarkdownで書ける markdownに内容を集約させることができる ページの追加とかも楽(impress.jsに比べて) 欠点 markdownなので、画像の縮小とかサ…

altタグにスペースが入っていても大丈夫なの

imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明 サンプルにはこう書かれていて、実際にそれが大丈夫かどうか明言はされていませんが、大丈夫だと思います。 <img src="logo.gif" alt="KANZAKI INC." />

取り消し線テスト

テストしようぜ

mapとarea試し書き

HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト 画像の中に複数のリンクを貼りたいときに使うやつ。それがmapとareaの組み合わせ。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> </area></area></map>

nbspの話

ノーブレークスペース - Wikipedia HTMLのように通常のスペースの並びを1つのスペースにまとめるシステムで、行内に複数のスペースを入れるために使うこともできる。 また、 NBSPと通常のスペースの違いは、NBSPを含む文字列が行末に来て、かつ長すぎて行に…

imgタグalt属性のSEO的立ち位置について

読み上げるブラウザではalt属性にテキストを埋め込むの必須である。 画像を認識しないブラウザを使ってる人とか、視覚障害の方とか向けにね。 alt属性の正しい考え方 | SEOとその周辺 検索エンジンのロボットについては、alt属性値の扱いはかなり曖昧 img要…

objectやらiframeで読み込みが失敗したときは

表示がバグっていて、iframeやobjectより前のものが2つ表示されていたりするので、 まずそこらへんを疑ってみること

noscript

スクリプトが動作しないブラウザのために、 代わりに表示させる内容を指定。 タグの性質上、scriptタグのすぐ後ろに配置する必要がある。<NOSCRIPT>−HTMLタグリファレンス からのサンプルコード。 <script type="text/javascript"> <!-- today = new Date(); document.write(today); //--> </script> <noscript> <p>このペー</p></noscript></noscript>…

background-color: rgbaはIEでは使えない

タイトルの通りだが、 RGBaを使ったプログレッシブ・エンハンスメントと注意点 | CSS-EBLOGrgbaが使えないならopacityを使えばいいじゃん!! CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん!(Hatena)という解決法に落ちつく。

改行コード

HTMLは <br> で、XHTMLは <br /> である。HTML & XHTML - Text formatting - whitespace ( paragraphs, newlines, preset, blockquotes)

イメージマップ作成 補足

イメージマップ作成 - by shigemk2mapやareaにはそれぞれidをつけることが出来るし、また セレクタを指定することも出来る。 $('map#id area#hoge').click(function() { ... }); と書いて、イメージマップにイベントを発生させることも可能なのだ。

イメージマップ作成

イメージマップを作成する | 目的別 HTMLリファレンス | Tagland [HTML & Stylesheet解説]イメージマップを利用すると、たとえば画像のなかの円に、リンクをつけることが出来るんだ。 <img src="画像のURL" usemap="#マップ名"> <map name="マップ名"> 〜 </map> <area shape="形状" coords="座標" href="リンク先のURL" alt="代替テキスト"> 当然のことだけど、タイポに気をつけること。 coordsをcoordにし</area>…

ページ内リンク

HTML5/テキスト/a要素 ページ内リンクを設定する - TAG index Webサイトリンク元 <a href="#abc">ABCの位置へジャンプ</a> リンク先 <h2 id="abc">ここがABCの位置</h2> リンク先にはidを設定しないといけない。 <a href=".abc">ABCの位置へジャンプ</a> リンク先 <h2 class="abc">ここがABCの位置</h2> 上のようにclassだけを設定してもペ…

aタグはhrefなくちゃイカんのか?

せやな。 <html lang="ja"> <head> <meta charset="utf-8"> <title>HOGE</title> </head> <body> <a>ふああ</a> </body> </html> まあこういうことする意味あるのかなって気はしてるけど。 validatorで調べたけど、全然問題なかった。

readonly vs disabled

input要素において、書き込み不可能とするformの属性は2種類あるreadonlyとdisabledがそれだ。

text型のinput要素で複数行を表示したかった

結論から言うと、無理。

定義型リストの注意

定義型リスト DL について、RFC1866には以下のように書いてある。 \‘¢•ªÍ‚Ì—á

HTMLを作成しつつ、CSSを書くための手順

HTMLを書くにあたっての大まかな注意 HTMLがあって、CSSがあたり、webページになる そのため、まずHTMLから書く。本来レイアウトはどうでもよくて、HTMLが本当に正しいものになっているかが重要である。 CSSのあたっていないHTMLを上から読んで意味が通じる…

b vs strong vs em

4.6.3 The strong element — HTML5b と strong と emってどう違うのだろうか。 コード <html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> </head> <body> <em>今日でブログの毎日連続投稿がまる1年</em> <strong>完全に日刊になってしまいました</strong> <b>Nice Boatから5年</b> </body> </html> 表示結果 上を見ていただけたら分かるように、emは斜体になりstro…

ABBR

<ABBR>−HTMLタグリファレンス Abbreviationの略で、このタグで囲まれた語句が略語であることを表します。 とのこと。 <html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> </head> <body> <abbr title="Extensible Markup Language">XML</abbr>では、タグを自分で作ることができます。簡単にいうと<abbr title="Hypertext Markup Language">HTML</abbr> </body></html></abbr>

フォームにおけるINPUT type="submit" と type="button"の違い

ボタンを押すとフォームの内容がPHPファイルに送信されて、 POSTデータを出力させるHTMLを作成してみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Hoge</title> </head> <body> <form method="POST" action="./hoge.php"> <p> 名前:<input type="text" name="namae"> </p> <p> <input type="submit" value="送信する"> </p></form></body></html>

list-style-type マーカー文字の種類を指定する

list-style-type−スタイルシートリファレンス黒丸 <ul style="list-style-type: disc"> <li>いちご</li> <li>人参</li> <li>サンダル</li> </ul> 小文字のローマ数字 <ol style="list-style-type: lower-roman"> <li>いちご</li> <li>人参</li> <li>サンダル</li> </ol> カタカナのアイウエオ順 <ol style="list-style-type: katakana"> <li>いちご</li> <li>人参</li> <li>サンダル</li> <…</ol>

ページ内リンクを使うときの注意点

必ずidやnameが定義された要素を指定しないといけない。classだけ指定された要素にページ内リンクを貼ることは出来ないので注意。ページ内ジャンプ HTML <a></a>

wrapper

wrapperは必須?:CSS 3分コーディングbody以下の全てをdivで囲み、wrapperやcontainerという名前をつけておくケースはよくある。 1つのセレクタでページ全体の幅や色、配置などを一括指定できる点がメリットである。 <div id="wrapper"> <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> </div> こんな風にして…

bodyの一般属性

<body> - 本文 属性 意味 class=class H4+/e3+/N4+。クラスを指定します。 dir=dir H4+/e5+/N6+。文字の表示方向を指定します。 id=id H4+/e3+/N4+。ID を指定します。 lang=lang H4+/e4+/N4+。言語を指定します。 style=style H4+/e3+/N4+。スタイルシートを指定</body>…

id と class その2

その1 id と class - by shigemk2idは1つのページに1つしか存在してはいけない。 Ajaxなどで複数生成されてもダメなので、 idのタグを作成する場合は注意すること。なお、複数のHTMLページに同じ名前のidがあるのは問題ない。 (同じページに同じ名前のidがつ…

span

<SPAN>−HTMLタグリファレンスタグはそれ自身は特に意味を持っていませんが、 〜で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 インライン要素。 <p> <span style="background-color: #0099FF">青色</span>と <span style="background-color: #FFFF00">黄色</span>を混ぜると <span style="background-color: #33CC33">緑色</span>になります。 </p></span>

divのなかにdiv

一応divのなかにdivを入れることも可能だが、 floatを使うとぐじゃぐじゃになることがあるので注意。div内でfloatを使うときの注意点 - CSSブログ

画像ファイルをアップロードするときに気をつけること

画像ファイルをアップロードするときは、 画像のサイズに気をつけること。特にでheightとwidthを指定しているとき、 画像ファイルがそれより小さいときは、画像ファイルが imgで指定したサイズに強制的にリサイズされる。もしリサイズを嫌うなら、 SmillaEnl…