私のサイトが出来るまで。HTMLとCSS実践編その4 : 雑記帳 : der Gegenwart
[ Web関係 ] 誰も読んでないでしょうけど、その4。そんなに細かく解説してないので、初心者には優しくないです。たぶん。 ナビゲーションをどうにかする 前回まででコンテンツ部分をどうにかしたので、今回はナビゲーション。 とりあえずナビゲーションの見出しが邪魔なので消去。この前も書いたけど、わざわざナビゲーションに見出し付けて結局消すとかいう意味が分からないことしてるのは、私の心理的な問題です。単に気持ち悪いから見出し付けてるだけ。アクセシビリティ云々は関係ないです。 h2#NAVIGATION_HEADING, h3#MAIN_NAVI_TITLE{ display: none; } 次に各リンクの表示をどうにかします。ADP: div要素なしレイアウト (4)にあるADP式ロールオーバーが基本。もっとも今回のデザインではロールオーバーさせませんけど。背景画像は以下のようなものを使います
clearfixハックは本当に必要なのか - MID [Serendipity Weblog]
いわゆるclearfixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。 こいつを綺麗に整えるためにはfloatさせた要素の後でclear:leftなどで一旦解除させる、というのがclearfixの原点のように思います。 最近またこの手のネタがはてブで盛り上がっているようです。 floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（ ）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 少し遡って 解決法は2つある。ひとつは、「原因」
私のサイトが出来るまで。HTMLとCSS実践編その3 : 雑記帳 : der Gegenwart
[ Web関係 ] それ来た、その3。 これは先に書いておくべきだったのかもしれませんけど、私がHTMLとCSS書くときの方針を列挙。 採用DTDはXHTML1.1かISO-HTML。 div、span、b、i、big、small、hrは使わない。br要素も極力使わない。小説書くとかなったら考えますけど。 可読性重視、あまり凝った装飾はしない。 見出しと本文のCSSを書く 前述の方針を踏まえて解説再開。ナビゲーションのデザインは後回しにして先に見出しと本文のデザインを確定しちゃいます。ただし、右にナビゲーション持ってくることが確定済み（唐突）なので、各要素には右マージンを指定しておきます。 まずは見出し。私は普段h3くらいまでしか使わないので、CSS書くのは3まで。4以降は使うときが来たらその時に追加。最初にh1要素。 h1{ margin-right: 170px; margin-bot
私のサイトが出来るまで。HTMLとCSS実践編その2 : 雑記帳 : der Gegenwart
[ Web関係 ] id属性とclass属性を付加 div要素は使いたくないので、必要に応じて各要素に直接idとclassを付加。私の場合、使い分けが結構適当です。全部classにしてしまった方が適切かもしれません。 どこにid振るかは勘で決定。「id="left"」みたいなことはしていないものの、結局見栄えのためのidなので一緒だと思う。ホントは好ましくありません。 <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>der
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
IE7のズーム機能でバグる - 続き | Takazudo Clipping*
*{ zoom:1; } でIE7が色々直るとか書きましたが、やっぱこれはあんまいけてないっぽい。 なぜなら、inline要素が全て、inline-blockみたいになっちゃうから。 例えば、 <a href="#">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</a>(120) とかすると ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ (120) といった感じの表示になっちまいます。 インライン要素はzoom:1したくないけど、ラジオボタンとかズームで埋まるんだけどっていうときは、 *{ m
clearfixはちゃんと考えられていた - 3ping.org
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。 こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。 モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
サイト管理者、lint厨、W3C信者etc向けブックマークレット：LogJET
サイト管理者、lint厨、W3C信者etc向けブックマークレット 暇だったので作ってみた。(右クリックからブックマークに登録してください) Another HTML-lintブックマークレットW3C HTML文法チェック ブックマークレットW3C CSS文法チェック ブックマークレット 「おおっ」と思ったサイトをクリック一発でチェックにかけることができます。 自分のサイトをチェックする時にも便利かもです。 いくら構文気にしてブログ作っても記事投稿してたら知らないうちにミスってることがよくあるので。 って、JavaScriptをほんの少しかじったら作れるような簡単なスクリプトですので、たぶん既出なブックマークレットです。何を今更な…。 そもそも、インフォアクシアのツール使って調べていたんですけど、プロセス(Firefoxなら右クリックからチェック可能)が面倒だったので…。 W3CのCSS V
font-familyの指定 - 木俣ロバート久の覚書 - Hatena Blog
CSS font-familyプロパティについて一言 すなわち「本文に異なるフォントを混在させない」という鉄則である。この場合、font-familyの指定はしないか、あるいはbodyセレクタに一回のみ記述すると良い。意味もなくpに指定して優先度を上げたりしないように注意して欲しい。この記事を読んで自分の (hatenaじゃないsiteの) 拙作CSSをチェックしてみたら、pre, tt, code, var, kbd, sampにfont-family: monospace;が指定されていた。気持ちは解らんでも無い (なにせ自分だしな)。 それはそれとして、(font-familyに限らず) CSSは所詮飾りなので、邪魔になるようなら上書きするなり、無効化して下さい、と言うのが木俣の態度。逆に言えば、木俣は読者に対してCSSの指定を上書きするなり、無効化する能力を求めている (別にユーザ
汎用CSS - tikeda's blog
先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、
日々、とんは語る。 - 画像の使用を（略）CSS大会の作品解説。
壱茉さん主催の画像の使用を（略）CSS大会に２点ほど応募したんですが、１点目はともかく２点目は友達の中村というデザイナがビジュアルを作って僕がCSSを書くという流れで参加したので、見た目的にもCSS的にも面白い事が出来たと思ったので、ちょっとだけ解説したいと思います。 タイトル gungnir ページ ギャラリー 原案はこんな感じなんですが、CSSの常識から言ってまず無理だと判断してしまうのは、本文の２カラムです。 一つのブロック要素を２カラムで表現することは、僕の知る限り現在はCSSだけで実現するのは不可能だと思ったので、シングルに変更しました。 次に目を引くのは、リストの番号がでかいことです。しかし、これは面白いし、見やすいと思ったので、考えた結果、contentプロパティの counter()を利用することで実現しました。 リストのスタイル無効にし、カウンターで番号を生成して表示した
Artistic & Creative Art Wallpapers for Android & iPhone
Owner Please provide full name, company name, address and other information of the material owner Copyrighted Work Please provide description of the copyrighted work that you claim has been infringed, including the URL (i.e., web page address) of the location where the copyrighted work exists or a copy of the copyrighted work. Unauthorized Content By checking this box, I confirm I have a good fait
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
はてなブログ | 無料ブログを作成しよう
マージンの相殺について：CSS | Tech de Go
画像の使用を極力控えてかっこいいCSSデザインをやってみよう - Gallery