タグ

WebとCSSに関するTakahashiMasakiのブックマーク (54)

  • いまさら聞けないHTML --- Part2:レイアウトと見栄えを固定

    今どきのWebページは,ウインドウの大きさを変えてもレイアウトが変わらない。見栄えもWebサイト全体で統一されている。このようなレイアウトや見栄えの指定にも,HTMLのタグが使われている。 3ステップでページ作成 Webページ制作者から見ると,Webページの作り方は3ステップ。この作り方の手順に沿って見ていこう(図2-1[拡大表示])。 ステップ1ではレイアウトを決める。使い勝手や見栄えを考えてレイアウトを決めて,Webページに貼り付ける要素を考えながら枠を区切るわけだ。具体的には,枠を固定して区切ることができるタグを使ってHTMLファイルを作成する。 ステップ2は,スタイルの定義だ。デザインを考えれば,ページ内の文字の大きさなどは揃えたい。しかし,今どきのWebページは,もともとは別のファイルを組み合わせて作ることが多い。部分ごとに,更新頻度が違っていたり,作成者が違ったりするからだ。こ

    いまさら聞けないHTML --- Part2:レイアウトと見栄えを固定
    TakahashiMasaki
    TakahashiMasaki 2006/03/08
    やはりテーブルレイアウトが…(まぁいろいろなブラウザにあわせるためにはしょうがないのだろうか (追記:早速コメント(はてブじゃなくて当記事内のやつ)でツッコミが入っとる
  • もうパンツはかない

    このサイトは webサイトのデザインをいろいろ考えてみようかななどとでっち上げたサイトです。ようやく7つ目のデザインとなります。 デザインにはカスケーディングスタイルシート(CSS)を使っています。21世紀の今、テーブルレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザは、CSSにきちんと対応した新しめのもの、たとえば Firefox(レンダリングエンジン Gecko を使ったもの。N9なども含む)や 、Opera9、Safari などを想定していますが、HTML的には素直なよいHTMLをめざしてますので、まともなWEBブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。 デザインノート 今回のポイントは半透明画像の重ねあわせといったところでしょうか。 一番下の背景の上に3枚の半透明画像が重なり、スクロールするとそれぞれ違う速度で動

    TakahashiMasaki
    TakahashiMasaki 2006/03/07
    背景画像のテクニック等(タイトルが……
  • 大藤幹 『世界の「最先端」事例に学ぶ CSSプロフェッショナル・スタイル』 - モジログ

    MYCOM BOOKS - 大藤幹 『世界の「最先端」事例に学ぶ CSSプロフェッショナル・スタイル』 http://book.mycom.co.jp/book/4-8399-1907-0/4-8399-1907-0.shtml 『Web Designing』誌に連載されている、大藤幹氏のCSS記事をまとめた。 これは早くになってほしいと以前から思っていたが、になってみれば、連載に加えて特集記事などのオマケもついて、予想以上に充実した素晴らしい内容になっている。 この連載(書)がいいのは、CSSの文法を教科書的に解説するのではなく、CSS界で名高いトップデザイナーが作ったサイトを題材に、そのCSSコードを実際に解析して、詳しく解説している点だ。 プログラミングでも、語学でもそうだが、文法を解説することが主眼の教科書は、「This is a pen」式の味気ない例文で学ばされることが

  • ブログの記事作りにあたっての10/20/30の法則 - ☆ 六等星 〜Second Chapter〜 ☆

    「プレゼン資料作りにあたっての10/20/30の法則」という記事がはてブで人気です。 http://davidtakeuchi.typepad.com/blog/2006/01/102030.html この記事は確かに良記事で、簡単に要約すると「10枚構成、20分で語る、30ポイント以上のフォントを使う」という事なのですが、とどのつまりは観衆に最後まで興味を持って見て貰う為のテクニックという事になります。 さて、以下から題。この記事に対抗して、「ブログの記事作りにあたっての10/20/30の法則」というのを考えてみました(笑)勿論ジョークエントリですが、ブログの書き方の法則を10、20、30で纏められないかなぁ……と思いまして。取り合えずいってみましょう。 10: ブログのフォントに10ピクセル以下の小さなフォントを使うな 元記事では「30」の部分にあたる場所。当は「12ピクセル以下」

    ブログの記事作りにあたっての10/20/30の法則 - ☆ 六等星 〜Second Chapter〜 ☆
    TakahashiMasaki
    TakahashiMasaki 2006/01/12
    ("ブログのフォントに10ピクセル以下の小さなフォントを使うな"じつにじつに同意。ほかの「20」「30」も同感
  • これで全部ブラウザテスト

    PG WALLET สล็อตออนไลน์พร้อมเงินฝากอัตโนมัติ pg slot วอเลท ผู้ให้บริการสล็อตออนไลน์ระดมทุนผ่าน True Money Wallet บริการสล็อตฟรีที่พร้อมมอบประสบการณ์การเล่นเกมสล็อตออนไลน์และบริการฝากเงินให้กับคุณ ง่ายๆ ด้วยวิธีการฝากเงินยอดนิยมในปัจจุบัน บัญชีทรูมันนี่ หรือ ทรูมันนี่วอลเล็ท PGWALLET ครบวงจร แนะนำสมาชิกใหม่ ส่วนลด 50% ข้อเสนอพิเศษสำหรับสมาชิกใหม่ โบนัสฟรี 50% ฝากครั้งแรกเพียง 100 บาท slot pg รับวอลเ

  • web-conte.com | blue | なぜみんな角丸が好きなのか?

    タイトルに惹かれ、「Why Do We Love Rounded Corners?」というこの記事を訳してみた。何が書いてあるのかと思って。われながら、あまりいい訳とも思えないけれど。 インターフェースの設計者やグラフィックデザイナーと同様、われわれも「丸みを帯びたコーナー」に取り憑かれている。Webの開発者はCSS(や、ときにJavaScript)を創造的に用い、可能なかぎり手間をかけずに角丸を表現することを目指して、そのことにどんな苦労もいとわなかったものだ。現在提案されている CSS3 の定義書には、角丸を指定するためのプロパティすら含まれている(Firefox はすでにこのプロパティをサポート済みだ)。 なぜそんなに角丸には魅力があるのか。思い切ってこれから述べようと思うのは、われわれが角丸に魅了されるこの現象が審美的なレベルを超えたものではないかということ。それともう二、三のこと

    web-conte.com | blue | なぜみんな角丸が好きなのか?
    TakahashiMasaki
    TakahashiMasaki 2005/12/11
    テーブルとか使って実現してるサイトが昔は多かったような
  • 【ブログリンク集】CSS・スタイルシート − ブログのカスタマイズ

  • 趣味のWebデザイン - テーブルレイアウト派を説得する難しさ

    テーブルレイアウトに可能なことは、全部CSSでも(仕様によれば)再現できます。だから、見栄えの指定はすべてCSSにわたして、HTMLはStrictなものにしていこうよ、という話をするわけです。しかしこれに対して、例えば角丸テーブルはStrict+CSSデザインでは真似できないじゃないか、という意見があるわけです。私はここで、ううむ、と悩んでしまいます。 テーブルレイアウトをわかりやすく使いやすいと思う方が多いのは、HTML文書としての妥当性について端っから問題としていないからです。その意味で、Strict+CSSデザインと比較して制約が非常に少ないといえます。CSSでもたしかにテーブルにできることのひとつひとつは真似できます。いざとなれば絶対配置などを駆使すればどうにかなるわけです。けれども、StrictなHTMLにこだわろうとすると、いささか話が面倒になります。はっきりいって、できないこ

    TakahashiMasaki
    TakahashiMasaki 2005/12/02
    テーブルレイアウトってソース書いてて辛くないか?と思っていたのですが、ソフト使う人が大多数なのかも
  • 趣味のWebデザイン - あなたの好きな要素(HTML)は?

    誤解の殿堂 あなたの好きなHTMLタグアンケート ネタじゃありません。調査なさった方も、回答された方も大真面目なのです。しかしながら、精神衛生上、ネタとして読むことをお勧めします。 3位がp要素、2位がbr要素、1位がa要素というあたりは、ある意味で順当。HTMLのいろはをご存知の方は、2位のbr要素にひっくり返るでしょうけれども、世間ではbr要素が大好きな方が多いのだから仕方がない。 HTMLを他人に教えたことがある人なら、みな経験するはずのことなのですけれども、正しく教えても、必ずといっていいほど生徒は誤解します。HTMLをいきなり素直に理解できる人は、ほとんどいません。マークアップという概念をガッチリ理解して、世の中にあふれるバカ解説のおかしさを自分で指摘できるレベルに到達するのはたいへん困難です。相当の素養がなければ、まず無理だといってもいい。 私が目を離した途端に、「先生はごちゃ

    TakahashiMasaki
    TakahashiMasaki 2005/12/01
    "私の説明よりも、経験的実感に基づく自己流解釈が優先され、しかもそちらの方が素人には納得がいくという悪循環。"泣いた(わかる。素人判断でHTMLを誤解する奴&トンデモ解説書……
  • アクセスアップのためのブログで使えるCSS(スタイルシート)研究 【その1】 - デンマンのブログ

    アクセスアップのための ブログで使える CSS(スタイルシート)研究 【その1】 引用文をはっきり、くっきり区別する まずサンプルとして11月3日に書いた次の記事を見てください。 僕が書いた記事に対して3つのコメントをもらいました。 そのうちの2つは同一人物の書いたものです。 次のようなものでした。

    TakahashiMasaki
    TakahashiMasaki 2005/11/27
    blockquote要素を知らないのでしょうか
  • あやしい本

    (注:199年12月19日記載:以下の日語はかなり汚いし、不正確な評価も紛れています。もともと自分用の覚え書きだったので、人に読ませるための形態にはなっていないのです。申し訳ない。) 書評を書いた時代が古いので、かの有名な岡蔵さん(秀和)も神崎さん(毎コミ)も載ってません。どちらもいいです。 リスト (注:1998年初頭に公開) HTMLに関していえば、当にあやしいが氾濫しすぎている。 ええい、ついに公開だ!「市販のHTMLの簡易評価リスト!」ただし、私家版。僕以外の人が見たら、また違う評価をするはず。 数少ないokなモノ(1998年10月03日追加) 比較的よいモノ(1999年1月24日追加) 平均的な悪さのモノ(1999年3月8日補記) あまりにも悪いモノ(1999年12月19日追加) デザインにまつわる「イヤーン」なモノ 1998年3月、C|NETHTML特集をやって

    TakahashiMasaki
    TakahashiMasaki 2005/11/05
    99年あたりまでのHTMLくそ本(内容が間違いだらけのもの)めった斬り。
  • http://www.asahi-net.or.jp/~jy3k-sm/i_net/books2005.txt

    TakahashiMasaki
    TakahashiMasaki 2005/11/05
    最近のHTML書籍へのすみけん氏の評価
  • HTML版『スタイルシートWebデザイン』

    すみけんたろう著 簡略な目次 HTML版に寄せて 詳細な目次 まえがき 1. Introduction to CSS with HTML 2. tutorial of HTML as SGML 3. some more HTML 4. CSS syntax in detail 5. CSS properties for visual media in detail 6. road to mastering CSS 7. new feature in CSS2 解説と凡例――HTML版編者より アーカイヴ版の配布 HTML版に寄せて いま私はプロの編集者として勤務しています。その目から見れば、書の記述はあまりに固く、冒頭が長すぎ、リファレンスとして使いにくく…と欠点だらけです。 ところが書は、専門家を含む一部のかたに一定以上の評価をいただいています。大変ありがたいことです。「美人は3日で

    TakahashiMasaki
    TakahashiMasaki 2005/11/05
    すみけん氏の名著のweb版。CSS書くときはこれさえあればいい
  • 訪問済みリンクを一工夫する - lucky bag

    リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no

    TakahashiMasaki
    TakahashiMasaki 2005/09/08
    いい方法だと思う……BKBK