タグ

WebDesignとガイドラインに関するtintoyのブックマーク (12)

  • コーディングガイドライン

    構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を使っていても設計ミスの建物では使い物になりません。文書でも同じことが言えるもので、プレーンに理解しやすい文

  • HTML/XHTMLマークアップ・CSSコーディングガイドライン | enoq(エノーク)

    HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie(シクリエ)では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。 案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。 ディレクトリ構成 命名規則 HTMLマークアップ CSSコーディング アクセシビリティ ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイ

  • プロパティの指定順序 | かたつむりくんのWWW

    CSSの記述順序をまとめてみました。 おおまかなところはMozillaの順序をベースにし、それにW3Cの仕様書(CSS2 Specification)と僕のバイブルである『Web標準の教科書―XHTMLCSSでつくる"正しい"Webサイト』での出現順序をミックスさせて、少し自分好みに並べ替えました。 使用頻度の低いプロパティは隠してありますので「**」のついている項目をクリックすれば表示されるようになっています。 ちなみにこのアコーディオンは、タブ形式で切り換えることにも対応できるように「よくある質問っぽいののjQueryを使ったサンプル」で紹介されているライブラリを使用させていただきました。 なお、qaTab.js の以下の部分の2行目と8行目に「.accord」を加えて、dt.accordだけがアコーディオンするように変えています。そうすれば、<dt>要素の次に<dd>がない場合でも

    プロパティの指定順序 | かたつむりくんのWWW
  • [J] CSSガイドライン メモ編 - Jamz (Design)

    上ノ郷谷氏のスタイルシートを書く時のガイドライン - 2xupというエントリーにコメントしたのですが連休中に時間が取れず... 有言不実行は最低... なので、追加コメントと今後のためのメモを残しておきます。 利用者インターフェイス (User Interface) ビジュアルフォーマットモデル (Visual Formatting model) ビジュアルエフェクト (Visual effects) : というような書き方がされており、こういう正式名称があったことを知ったわけですが、念のため関連ページをメモ。 Cascading Style Sheets, Level 2 Cascading Style Sheets, Level 2 (日語訳) CSS のガイドラインに関しては以前から情報収集していて、こうした資料を公開していただけるのは非常にありがたい。と同

  • class名やid名を付ける際の一般的な名前集:phpspot開発日誌

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife class名やid名って付ける時悩みませんか?今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 class名やid名を付ける際の一般的な名前集を紹介されてます。 全体のラッパー wrap wrapper top-wrapper wrapperAll ヘッダー head header headerArea headline ナビゲーション部分 navi navigation navbar gnav メインコンテンツ部分 area main maincontent center フッター foot footer footnavi footerArea 他の名前一覧も読む場合はこちら なるほど、あらかじめCSS名を決めてメモっておくことで

  • With-D

    Copyright © 2007-2018 With-D - http://with-d.net All Rights Reserved.

  • hxxk.jp - CSS の記述ルール記事のまとめ

    いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お

  • (x)html css ガイドライン beta

    バージョン情報(ナンバー,日付,編集者,編集したドキュメント) ver0.4.1 2008/10/9 azuma Add Cardinal rule。 ver0.4 2008/8/11 azuma default.cssをreset.cssに名称変更。 ver0.4 2008/8/11 azuma Templateを廃止。DesignModuleに統一。 ver0.4 2008/8/11 azuma cssの設計を変更(common.cssとpages_layout.cssをskin.cssに統合) ver0.4 2008/8/11 azuma Add Microformats reference(Micorformatsの記述に合わせてid class名を大文字区切りから“-”区切りに変更) ver0.3 2008/5/2 azuma Add XSLT reference ver0.2.

  • id属性とclass属性 | Web標準Blog | ミツエーリンクス

    iwaimさまよりCSS Nite Vol.3に寄せていただいたご質問にお答えしたいと思います。 id 属性と class 属性はまったく別の性質を持つ属性なので使い分けが必要です。木達さんが考える使い分けの指針のようなものがあれば教えてください。 使い分けを行う前提として、id属性とclass属性のどちらも利用できる場面、すなわちスタイルシートのセレクタとしてid属性とclass属性のいずれかが必要な場面を想定します。なぜなら、たとえばハイパーリンクを生成するという目的に限定してしまうと、選択の余地なくid属性を使うことになるからです。 仕様書に示されているように、id属性はある要素に固有の識別子を付与する一方、class属性は複数の値を付与することができます。これを活かすよう、あるプレゼンテーションを一括して指定するのではなく、モジュール化して実装していた場合には、必然的にclass属

  • XHTML・CSSコーディングガイドライン | d-spica

    文書の構造を示すことを目的とする。見た目の装飾に関わることを記述しない。 宣言 特に事情がない場合は,文字コードをUFT-8にして,XML宣言を省略する。 DOCTYPEは原則的にXHTML 1.0 Strict 。 ただし,更新スタッフの事情に合わせてXHTML 1.0 Transitional,HTML 4.01 Strict,HTML 4.01 Transitionalにする場合もある。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> head ページの性質を示し,UAに読ませることを目的とする。 最初に <meta http-equiv="Content-Type" content="text/html; ch

  • Shopify Tester

    コンテンツに進む Shopify Tester パスワードを入力してアクセスする パスワードを入力してストアにアクセスする。 あなたのパスワード ストアに入る あなたはストアオーナーですか?こちらからログインする Opening soonBe the first to know when we launch. メール

  • (X)HTML+CSSのマークアップガイドライン - フリーフォーム フリークアウト

    移転しました http://please-sleep.cou929.nu/20090223.html

    (X)HTML+CSSのマークアップガイドライン - フリーフォーム フリークアウト
  • 1