floatによる固定幅+リキッドレイアウトで、HTMLと表示を逆にする。 - zz log
検証ブラウザ win：ie5.5〜8(IEtester3)、firefox3.5、opera9.6、safari3、chrome3 完成版 »floatによる固定幅+リキッドレイアウトで、HTMLと表示を逆にする <div id="wrapper"> <div id="header"> <h1>ヘッダー</h1> </div> <div id="content"> <div id="main"> <div id="body"> <h2>メイン</h2> </div> </div> <div id="sidebar"> <p>サイドバー</p> </div> <div id="footer"> <p>フッター</p> </div> </div> </div> #wrapper { width: 95%; /* センタリング用 */ text-align: left; margin: 0 au
簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life
EmacsWiki: Zen Codingより。 ZenCoding-modeというHTMLを簡単に入力できるモードがある。 これを活用する事で、Emacs上でタグを簡単な記法で書いた後、C-とする事でHTMLに展開する事が可能になる。 このメリットとして、文字入力が少なくなる上に、タグの閉じ忘れもなくなるので早くて正確にHTMLが生成できる。 このHTML化できるというのが重要。Hamlのような独自記法だと、プログラマーに取っては楽に記述、編集ができるという便利なフォーマットなのだが、デザイナーにとっては、使いなれたデザインソフトが使えないという、非常に不便なフォーマット、という事になる。 しかし、ZenCodingだと最終的にはHTMLに変換されるので、プログラマは簡単に記述できる。デザイナーはあとで楽に編集できるという、何方にもメリットとなる。 サンプル どのような入力で、どのように
Yahoo! やGoogleの検索結果の説明文を変更する方法
Yahoo!やGoogleなどの検索結果画面で表示される説明文には、いくつかのパターンがあります。 検索されたキーワードがあるページ内の前後のテキスト ページ内のmeta descriptionに記載されているテキスト 特定のディレクトリ型検索サービスに登録されているテキスト 「キーワードの前後のテキスト」と「descriptionのテキスト」は、ページ内のテキストを参照するので自由に編集が可能ですが、「ディレクトリ型検索サービスに登録されているテキスト」はサイト制作者の意図通りにできません。 このディレクトリ型検索サービスは、Yahoo!は「Yahoo!ディレクトリ」、Googleは「Open Directory Project(dmoz)」になります。 これらの説明文は、各サービスの管理者によって管理されており、申請すれば変更可能な場合もありますが、このエントリーではディレクトリ型検索
このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E
ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。 ↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。 導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。 仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。 function backToTop() { var x1 = x2 = x3
ホームページ作成 - 文字の種類を指定する（フォント）
フォントを複数指定したい場合には、各フォントを『,』（カンマ）で区切って設定する事で可能になります。 表示されるのは、指定した順番になります。 また、フォント名の中にスペース（空白）を含む場合には『"』または『'』で囲む事になっておりますが、スタイルシートの要素の中で指定する際には、フォント名を『"』で囲むとstyle="font-family:"フォント名""この様に『"』がダブってしまい、機能しない場合がありますので、『'』で囲む方が良いと思います。 フォントは指定しても、表示するパソコンにそのフォントが入っていない場合には、そのブラウザの規定値で表示されます。 Windows と Macintosh と、cssでは下記の様になってます。 【注意】 フォントの指定の場合には、特に下記cssのキーワードで指定する場合等は、ブラウザ自体の設定によって変更されている場合に、ブラウザの設定が優
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
第5回 HTMLからXHTMLへの移行方法（2）
HTMLとXHTMLの「書式の違い」の続きとして、「要素名と属性名は必ず小文字で」「属性値は必ず引用符で囲む」「空要素の書式」「タグは省略できない」「タグは整形式（well-formed）で」「属性は略記できない」「name属性とid属性」「空白文字の取り扱い」「その他の違い」について見ていこう。 6. 要素名と属性名は必ず小文字で HTMLでは要素・属性を大文字で書いても小文字で書いても（あるいは両者の混合でも）構わないが、XHTMLでは大文字と小文字は区別される。XHTMLでは文書型定義（Document Type Definition: DTD）上、要素名と属性名は小文字で定義されているため、すべて小文字で書く。 CSSのセレクタについても、たとえば「P」ではなく「p」、「DIV」ではなく「div」と小文字で書く必要がある点に注意しよう。 なお、文書型定義とは、HTMLやXHTML、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.seo-maniax.com/server-tips/sakura-html-php.php
HTML/XHTML Character Entities : HTML.SU