タグ

(X)HTMLとCSSに関するs-e-iのブックマーク (32)

  • 第9回 ValidなHTML、ValidなCSS | gihyo.jp

    W3Cが(X)HTMLCSSについての勧告を出していることにより、Web制作者は仕様に沿って「正しい」(X)HTMLCSSを書くことを求められています。 Validな(X)HTMLの基準として挙げられるポイント まず、 仕様のとおりに書かれている HTMLバリデータ[1]で減点されない ことが挙げられます。 DTD(文書型定義)に沿った(X)HTMLを書けば、このようなバリデータの検証でエラーがでないようにすることが可能です。 validだと何が良いのか XHTMLをXMLアプリケーションとして考えると、パースエラーの出ることのない利用価値のある文書となる(validではないものではパースエラーが出てしまう) 正しい(X)HTML文書に対してでないと、CSSが意図した通りに機能しない 点数が満点になることによる制作者の満足感が高まる 何回かこの連載で取り上げましたが(X)HTMLは文書

    第9回 ValidなHTML、ValidなCSS | gihyo.jp
    s-e-i
    s-e-i 2008/04/14
    Validなのがいいけれど、Validatorの点数に縛られすぎてはいけません
  • Free Layouts.com | Websites

    s-e-i
    s-e-i 2007/11/02
    CSSベースのフリーなレイアウトセット群
  • HTMLの質の追求は、モバイルがきっかけでブレイクする。

    Web標準を考えるというエントリーで、フルCSSが受託案件で堂々と使えるようになったのは、SEOという言葉が出てきたから、という言葉を書いたら、はてブに微妙な反論があった。 しかし、それは現場では間違いではなかった。 2002~2003年頃は、ネスケ4を切るための理由がなかったのだ。 ネスケ4を切るということは、少なからずユーザーを失うというビジネスマターの決断になるので、制作者の論理、HTMLの論理などという瑣末(あえて言ってみる)なことで、ビジネスの機会損失になることは許されない。 もし捨てさせたければ、ビジネスニーズvsビジネスニーズの取捨選択の決断が必要。 そこにハマったのが、MovableType(blog)とSEOだった。blogは、なんだかんだとUTF-8であることが求められるし、SEO対策のためにテーブルレイアウトが悪者とされることとなった。 ずばり、この二つのキーワードが

    s-e-i
    s-e-i 2007/08/30
    えふしんさん風にいえば「ユーザビリティの高い構造のHTML」ってのでちゃんと書かれてると、(仮にそう意識していなくても)よっぽどの例外を除いてほぼすべてのブラウザ(PC以外の端末含む)で閲覧可能、というのはメリッ
  • SaaS型Webオーサリングツール--JavaScriptの実行・テストも可能

    印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます ブラウザ上でHTMLCSSJavaScriptのオーサリングが可能なオープンソースソフトウェア「rainbow9」が公開されている。JavaScriptコードのテストが可能なシェルを備えるなど、非常に高機能だ。既に、実際に試すことのできるサイトやデモムービーも用意されている。 rainbow9は、ウェブサイトの作成に必要な機能をオンラインで提供している。いわば、SaaS型のウェブオーサリングツールだ。アカウントを登録して、ウェブサイトプロジェクトを作成、HTMLCSSJavaScriptなどをプレビューまたは実行/テストしながら作成することができる。 特に、JavaScriptについては、エディタだけでなく実行シェルも用意され、

    SaaS型Webオーサリングツール--JavaScriptの実行・テストも可能
    s-e-i
    s-e-i 2007/06/19
    ちょっとおもしろいなこれ
  • CSS SPICE » より良いマークアップをするためのガイドライン(Guidelines for creating better markup)

    456 Berea StreetのRoger Johansson氏が、Garrett Dimon氏のMarkup as a Craftというエントリーを読んで、沢山のガイドラインが多すぎると感じて(?)6つの最も重要なガイドラインをエントリーであげていました。 Guidelines for creating better markup Keep it simple. (シンプルにしてください) No layout tables. (レイアウトテーブルは使わない) Avoid classitis. (classの多様は避けて下さい) Structure and meaning first, presentation later.(構造と意味を最初に考えて下さい。見た目は後です) Know all HTML elements and attributes. (全てのHTMLの要素と属性を知って

    s-e-i
    s-e-i 2007/05/04
    いいねえ、シンプルでいい
  • CSSNite in Nagoya 2007 極力ハックしない CSS by 山田あかね(purprin)

    去る2007年3月10日に開催された CSS Nite in Nagoya 2007 にて「極力ハックしない CSS」というテーマのプレゼンをさせていただきました。 その時の動画をプレゼン資料と連動してお届けします。

  • [CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました - pur*log

    [CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました 2007-03-12T11:29:48+09:00  Tag: CSS, CSSNite, event, hack, presentation, seminar 去る2007年3月10日、CSS Nite in Nagoya 2007にて、「極力ハックしない CSS」というテーマでスピーカーとして参加させていただきました。 総勢282名という多くの方にご参加いただき、プレゼンターとしてだけではなく、参加者としても有意義に勉強させていただくことができました。 回想や反省を含めて、またあとで追記するか別エントリで書こうと思います。取り急ぎ pdf 版の資料を公開いたします。音声版は後日 CSS Nite 公式ページで公開される予定ですので、興味のある方はご覧ください。(追記)PDF 版に加え

    s-e-i
    s-e-i 2007/05/04
    ベースがきれいならアイシャドウもチークもきれいにのるのだ
  • CSSに見惚れてばかりじゃなくて、もっと私(HTML)を見てよっ!

    と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。 ウチのサイトの一番の目的は「CSSって面白い!」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である(X)HTMLの正しい記述方法。 もちろん、CSSの勉強の前に(X)HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。 何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。 ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。 楽しんでナンボっす。 で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、(X)HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅

    CSSに見惚れてばかりじゃなくて、もっと私(HTML)を見てよっ!
    s-e-i
    s-e-i 2007/05/04
    CSSに嫉妬してるHTMLさんに萌える
  • hxxk.jp - 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips が発売となります

    記事データ 投稿者 望月真琴 投稿日時 2007-02-20T23:01+09:00 タグ CSS HTML XHTML お知らせ アソシエイト 出版 実践 Web Standards Design 概要 拙著「実践 Web Standards Design - Web 標準の基CSS レイアウト &Tips 」の発売に関する情報のページです。 リプライ 14 件のリプライがあります。 hxxk.jp ( のごく一部 ) が書籍化されます ! ブログ 書籍化で Google 検索すると何十万件もヒットするという昨今、時流に乗ってか乗らずか、お誘いを受けて書籍を出すこととなりました ! ......とは言え取り扱う話題がまとまっておらず、また純粋な文章としての完成度も低い hxxk.jp の記事を丸々書籍にパッケージングしたものではありません。 というか単著ではありませんし、あくまで

    s-e-i
    s-e-i 2007/05/04
    ちょうかいます
  • 「実践 Web Standards Design」という本を書きました - lucky bag

    お知らせというか宣伝。九天社より出版される「実践 Web Standards Design - Web 標準の基CSS レイアウト &Tips」の執筆をさせて頂きました。3ping.org の wu さんと hxxk.jp の真琴さんとの共著です。2007 年 2 月 23 日頃 から書店に並び始めるみたいです。Amazon にはまだ載っていないようです。ちなみに、カバーデザインを見せて頂いた瞬間から執筆者の間では通称「ホップ」(真琴さん命名)ということになってます。たぶん。 書籍名 : 実践 Web Standards Design - Web 標準の基CSS レイアウト &Tips ページ数 : 436 ページ 定価 : 3,200 円 最初に wu さんから共著のお誘いを頂いたのが 2006 年の 5 月頃。6 月に行った打ち合わせ後の著者 3 人での飲みは、気のせいか

    s-e-i
    s-e-i 2007/05/04
    Amazonさんマダー?
  • XHTML CSSの書籍を執筆しました - 3ping.org

    (Amazonから買えるようになったもようです) 九天社より出版される「実践 Web Standards Design - Web 標準の基CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。 書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります) XHTML, CSSの基礎知識と管理方法 レイアウト編 Tips&Tecnique ずっと作りたかった構成ができた! CSSはまず『(X)HTMLありき』であり、(X)HTMLの正しい知識を覚えた上で学ぶものです。そこで、まずレイアウトや実線編となるまえに、Web Standardsの考え方や(X)HTMLの基、プレ

    s-e-i
    s-e-i 2007/05/04
    これはよさそうな予感です。買おう。
  • モジュール化で変わる XHTML1.1 と CSS3

    去る 2月1日に開催された 「XHTML+CSS (r)evolution, 2nd」 。残念ながら私は参加できなかったのですが、どうやらサイバーガーデン益子さんのプレゼン内 (スライド資料 / 音声データが公開されています) で、当サイトの 「CSS3 セレクタ チートシート」 を参考資料として取り上げてくださったようで恐縮至極な今日この頃。 公開されているスライド等は CSS3 に関してとても勉強になる内容が詰まっていますので、ぜひアクセスしてみることをオススメしますよ。 で、プレゼンの中で益子さんもおっしゃってますが、CSS3、及び XHTML1.1 からの変更点として最も大きいのが、モジュール化という概念を取り入れ、各構成要素が細分化される形で定義されているということ。 XHTML にしても CSS にしても様々な機能を盛り込んでいった結果、その仕様はかなり重たい仕様となっています

    モジュール化で変わる XHTML1.1 と CSS3
    s-e-i
    s-e-i 2007/05/04
    XHTML1.1とCSS3とそれに関するスライドなどへのリンク
  • CSSでよく使う装飾定義をclass名でまとめることについて - 徒書

    2xup.orgのCSS でよく使う装飾定義をコンポーネントとしてまとめるという記事を読んだのですが、挙げられているHTMLの例を見てみて、「いやいやその方向性は無しでしょう」と思ったのでした。何故かといえば、 リストをインラインで表示するために <ul class="inline"> ナビゲーションリストをタブのように表示するために <ul class="tab"> という書き方をしていたので。それはつまり「文字を赤くしたいので <span class="red">文字</span>」というのと同じなのでは。 ADP: class=red スタイルシートの基 -- ごく簡単なHTMLの説明 (「クラス名の考え方」参照) 記事では、 見た目を意識しすぎてしまっているのが気になるので class の名前を変更したり、 とも書かれているのですが、単にclass名を変更するだけでは状況は大差な

    s-e-i
    s-e-i 2007/05/04
    なるほど
  • 我的春秋 コード共有のためのネーミングルール

    最近、CSS の使いまわしなどを視野に入れ、一部で class名や id名の共有というテーマへの関心が徐々に高まりつつあるような印象です。microformats なんかも、その流れのひとつといえるでしょう。 Naming conventions table(And all that Malarkey) もう、class名やid名で悩まないんだからっ!!(CSS HappyLife) (X)HTML の id/class における命名規則(purprin さん CSS Flight プレゼンスライド) 名前の共有はコードの共有のための(複数人で同一コードを編集・転用する)重要なファクターのひとつですし、非常にいい傾向だとは思うんですけど、実際につけられている名前を見てみると、シブい顔をせざるを得ない事例が結構あるようです。 コード共有のためには避けたい命名事例 構造ではなく見栄えで命名して

    我的春秋 コード共有のためのネーミングルール
    s-e-i
    s-e-i 2007/05/04
    命名規約について。こういうのは徹底していきたいね。
  • 2xupで実装されているエラスティックレイアウトを調べてみた。 - Trans

    2xupさんのところで実装されているエラステックレイアウト(Elastic Layout)、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。 と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。 でも、456 Berea Streetでよい感じに、自分のサイト

    2xupで実装されているエラスティックレイアウトを調べてみた。 - Trans
    s-e-i
    s-e-i 2007/05/04
    Elastic Design/Elastic Layout
  • Web デザイナーが知っておくと良いかもしれない DTP 脳

    2006-12-16T04:05:56+09:00 よく聞く意見として、Web デザイナーは DTP 的感覚を捨てるべきだ。といったものがありますが、僕は一概にそうは言えないと思っています。もちろん Web は紙媒体と違う点が多く、表示が環境に依存する部分があるので考え方に変化の必要な部分もありますが、それらは脱するというよりは、むしろ理解を深めていくべき点なのかもしれません。 ならば、どういった意識を持つのかというと、Web も DTP と同じように、文書に意味付け、構造化を行うという共通点があります。 HTML は文書に意味付けを行う言語 そもそも HTML とはなんぞや。という質問に『文書に意味付けを行う言語』という解答をすることがあります。例えばその文書の中で一番大きい見出しには h1 を。その一番大きい見出しの次に大きい見出しには h2 を。という風に単なるテキストに意味付けを行

    s-e-i
    s-e-i 2007/05/04
    DTP脳を捨てないといけないとは一概には言えない
  • Web デザイナーに求めたい 5つのこと | WWW WATCH

    趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。 個人的にスキルが 「デザイン」 よりも 「コーディング」 に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。 自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので

    Web デザイナーに求めたい 5つのこと | WWW WATCH
    s-e-i
    s-e-i 2007/05/04
    XHTML(or XML)+XSLTになっていくというのはちょっと疑問が。まあデカイプロジェクトならあるかもしれないけど。
  • 我的春秋: タグクラウドのマークアップ

    最近 巡回しているサイトで、ちょっと面白いエントリーがあったので、紹介がてら、自分でも考えてみようかと。 Marking Up a Tag Cloud (24 Ways) del.icio.us, Flickr, Technorati の (X)HTML ソースを比較しながら、タグクラウドの適切なマークアップについて考察しているエントリーです。といっても、著者の Mark Norman Francis は、これらにいきなりダメ出しをしています。いわく、「問題は、みんな間違っていることだ」(The problem is, everyone's doing it wrong.)と。

    我的春秋: タグクラウドのマークアップ
    s-e-i
    s-e-i 2007/05/04
    タグクラウドのセマンティックな記述方法の考察
  • Kong lor 888: เล่นสล็อตเว็บตรงที่ดีที่สุด!

    Kong lor 888 เว็บไซต์ของเราเป็นที่ยอมรับและได้รับการรับรองว่าเป็นเว็บพนันที่มีมาตรฐานและคุณภาพที่ดีที่สุดในประเทศไทย. การพนันออนไลน์ที่มั่นคงและปลอดภัยจริง ๆ สำหรับผู้เล่นทุกคนที่ต้องการความเชื่อถือในระบบการเงินและความเป็นส่วนตัวของตัวเอง. เมื่อมาเข้าร่วมการพนันออนไลน์กับทางเรา คุณจะได้รับประสบการณ์ที่ไม่เหมือนใครและสนุกสนานที่สุดค่ะ! kong lor 8888 ท่านสามารถมั่นใจได้เต็มใจว่าการเล่นพนันออนไลน์อย่

    s-e-i
    s-e-i 2007/05/04
    小手先のテクニックの多くは昔のTABLEレイアウトテクニックに近いものを感じるのは確かかも
  • CSS Nite in OSAKA ザ・ルールズ・オブ・スタイルシート by 益子貴寛 - to-R

    ついにCSS Nite が大阪に上陸しちゃいました。 以下のような内容でした。 まずは益子貴寛さんのセッションから (もうすぐCSS Nite公式ブログで当日の資料/セミナー内容のポッドキャスティングを公開するらしいので興味がある方、詳しい内容が知りたい方はそちらをご覧ください。) CSS NiteなんでCSSネタをと始まった『カニの貴公子』のセッションです。 「プログラムとはコンピュータへの命令ではなく、コンピューターに何をしてほしいか、人に説明することだ」という有名なプログラマの言葉を引用し「CSSもそうあるべきではないか」と始まりました。 まずはCSSの基ルールの再確認。 スタイルの特殊性がカスケーディングより優先されるます ボックスタイプの領域について再確認 要素間の上下マージンの相殺 min-/max-width/heightの矛盾 font-sizeとline-heightに

    CSS Nite in OSAKA ザ・ルールズ・オブ・スタイルシート by 益子貴寛 - to-R
    s-e-i
    s-e-i 2007/05/04
    CSS Nite in OSAKAのレポート