日記ログ 日々のこと、創作作品に関する話、またバトン回答や感想文（ネタバレ注意）など、とりあえず諸々綴り。 ※掲載する自作漫画については出血等の描写がありますのでご注意ください。 ソースの変遷昔、私の中で「タグ＝デザインを指定するもの」というイメージでした。よくある（今もよくあるのかは知らないが）「初心者向け サイトの作り方」を読むと、だいたい一番最初に「<html> <head> <title>テストページ</title> </head> <body>ナツビのページです＼(＾o＾)／</body> </html>」って感じになります。次いで「<font size="*">で文字サイズを変えるよ！」とくれば、もう「タグ＝見た目を指定するもの」で刷り込みされてしまうわけです。ここで「<p>ナツビのページです＼(＾o＾)／</p>」で「pは文章のまとまりに使います」だったら、何かが変わっていた
W3G について 当サイトは、初学者を対象とする World Wide Web（ワールド・ワイド・ウェブ）における情報技術の解説サイトです。ウェブサイトの作り方などの基本・基礎から応用のウェブサイトの品質を高める方法など SEO対策（検索エンジン最適化・ウェブページ最適化）と Web標準（Web Standards）にフォーカスしたウェブサイトの作成情報を中心に扱っています。ただし、作者の知識が偏っているため扱っている内容も偏っています。 免責事項 w3g.jp 配下で公開しているリソースは、その正確性に万全を期すよう努力しておりますが、その内容の正確性、有用性、安全性等については、いかなる保証を行うものでもありません。また、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いかなる結果が発生した場合においても、作者（上田 遼）はその責を負いませんのであらかじめご了承
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例：15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
CSS で簡単にメニューの上下中央揃えを実現する ネタ元：CSS で簡単に上下中央揃えを実現する IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。 haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。 hasLayoutに関してはコリスさんが詳しく説明されています。 参考：IEでのCSSのバグを回避するhasLayout 以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。 × display:inline-block; × height:any valu
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
ここにはWindows版Opera6.0以降（Opera）のCSS/DOM実装のバグ一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 OperaのCSS実装 Opear6にDOCTYPEスイッチはなく、単一のルール（標準モード相当）に従ってCSSの解析・描画が行われます。 Opera7.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUA実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Stric
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
絶対配置でこんな風にすると <div class="Container"> <div class="InsideBox">x</div> </div> .Container{ width:200px; height:101px; background:blue; position:relative; } .InsideBox{ width:30px; height:30px; background:yellow; position:absolute; left:0; bottom:0; } 絶対配置で下付けボックスサンプル IE6ではこんな感じになってしまいます。 何故か下に1px空いてしまうのです。どーやらIE6は、絶対配置をしてbottomを指定すると、親ボックスの高さが奇数の時、1pxあいてしまうという現象があるっぽいです。この場合は、div.Containerが101pxということ
下にメニュー固定で出したい。 しかしIE6だとposition:fixedできないので、下メニュー以外のコンテンツをdivで囲って、html,body,そのdivにheight:100%で、viewportの高さ100%にあわせ、overflow-y:scrollをそのdivにつけて、html,bodyのoverflow-y:hiddenで本来のスクロールバーを出さない。 bottom:0にするときには表示領域の高さが奇数の時、bottom:0pxが1pxずれるのを注意。 奇数bottomバグ - IE6 <body> <div class="main">main</div> <div class="bottom">bottom</div> </body> html,body{ height:100%; } html{ overflow-y:scroll; } div.main{ col
Blog 開設 3周年を記念して過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。 早いもので、今月でこの Blog も開設から丸 3年が経過 （2005年2月スタート） しました。 そこで今回は、過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。たまには過去のエントリーを見直してみるのも面白いかもしれません。 ちなみに、このエントリーで 446件目のエントリーでした。3年間で 446件っていうのは多くはないと思いますが、平均すると年間で約 148件、大体 2、3日に 1エントリーくらいのペースで書いてることになりますね。チリも積もれば山となる、継続することは大切です。 (X)HTML、CSS 関連 まずは (X)HTML とか CSS 関連のエントリー。このサイトでメインの話題…… と思われている分野です
CDPで用いられているHTML 4.01は最新のバージョンの仕様ではなく、2018年には「Superseded Recommendation（古いもの）」のステータスになっています。 直ちにCDPがブラウザで表示できなくなるということはないですが、 現在CDPを使っている方やこれから導入を考えている方は、より新しい仕様に書き換えての使用を強く推奨します。 2019年6月追記 基礎HTMLをダウンロードしたい方は基礎HTML配布にアクセスしてください なぜこういった形態の配布法をしているのか知るためにはユーザーMENUにアクセスしてください 配布されているCDPを探したい方はCSS配布サイトリンクを利用してください CDPのCSSを自身で作成し配布したい方は制作者MENUにアクセスしてください 疑問点があったり理解を深めたい方はFAQにアクセスしてください このサイトについて CSS着せ替え
height: n%;の正しい仕様 CSSでは例えばheight: 100%;と書いた場合、実際にどういった高さとなるかご存じでしょうか? この算出値は親要素に左右されるのですが、 よく勘違いされている方がいるので正しい仕様を紹介しておこうと思います。 なおここでは話を分かりやすくするために通常フローの場合であることを前提に記述しています。 通常フローでは無い要素の場合、親要素を包含ブロックに読み替えてください。 親要素の高さが明らかな場合 多くの方はこの場合の仕様のみをご存じのはずです。 説明する間でもなく、親要素の高さのn%がその要素の高さとなります。 例えばheight: 300px;の要素の子要素が height: 50%;だった場合、その算出値は150pxになります。 親要素の高さが'auto'の場合 heightプロパティの初期値はautoです。 つまり、明示的にheight:
Home Archive エラスティックレイアウトは採用しない方がいいのでは エラスティックレイアウトは採用しない方がいいのでは 2008年02月25日 category:Design Comment(6) Trackback(0) エラスティックレイアウトとは エラスティックレイアウトとはコンテンツの幅をemで指定することで、文字の拡大、縮小に合わせてコンテンツの幅も変化するレイアウトのことです。例えばこのブログも現在のデザインはエラスティックレイアウトになってますし、Yahoo!も先日のリニューアルでエラスティックレイアウトになってますね。（2008/5/19追記：現在このブログはエラスティックレイアウトではありません。） 試しに、このブログやYahoo!で文字サイズを変更すると、コンテンツの幅が変わるのがわかると思います。（Yahoo!は拡大では幅が変わるけど、縮
「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日本は大丈夫だろうか？」「国家破たんもあるの？」「日本に資産を置いても全然増えない！」でも海外投資は怖いし
BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し（h1タグ）は下記のように表示されます。 従来の見出しの例 BJKi
2007年にCSSやWeb標準に関するどんなテクニックや議論があったのかを書き出しておくのも一興かなと思いまとめてみると大変なことになってしまいました。 筆者より一言 CSSな人たちは「懐かしいなー」と振り返ってもらえればいいですし、今年こそCSSやるぞ！と思っている人は参考に、また違う言語の人たちは「へえー」とでも思ってもらえれば。 このリスト自体は、個人的に運営していたCSS Engine in Japanから引っ張ってきたものです。そのため本来なら入れるべきなのに抜け落ちている記事もかなりあります。カテゴリーや順序は適当です。また、2007年と言っておきながら、たまに今年のものとかも入っていることはご愛嬌。その上、ベストエントリーと書いておきながら、良質なエントリーが抜け落ちていることも認めます。 ただ、CSSの議論も一段落しているので、そろそろこの検索も役目を終えたなーと思い、その
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く