HTML Test Page for CSS Style Guide - HTML - Snipplr Social Snippet Repository HTML Test Page for CSS Style Guide - HTML - Snipplr Social Snippet Repository snipplr.com
Skip to content The content on this page lies within flow-content1. Second-level heading Main page headings are h1 elements, so further headings within this scope should start with h2, an example of which appears directly above. More than one may be used per page. Consider using an h2 unless you need a header level of less importance, or as a sub-header to an existing h2 element. Third-level headi
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
厚生労働省では、今般、インターネット上の医療機関のホームページ(以下「ホームページ」という。)全般の内容に関するガイドラインを別添のとおり作成しましたので、お知らせします。美容医療サービス等の自由診療を行う医療機関のホームページに掲載されている情報を契機として発生するトラブルを踏まえて、関係団体等による自主的な取組を促すものです。 これまで、厚生労働省は、ホームページについては、平成19年3月30日付け医政発第0330014号厚生労働省医政局長通知「医業若しくは歯科医業又は病院若しくは診療所に関して広告し得る事項等及び広告適正化のための指導等に関する指針(医療広告ガイドライン)について」により、当該医療機関の情報を得ようとする目的を有する者が検索等を行った上で閲覧するものであり、原則として、医療法の規定の対象となる広告とは見なしていません。 他方で、インターネット等を通じた情報の発信・入手
2011年12月時点でのCSSを書くときの自分内での決まりごとを書いておきます。 まあこういうのは自分(やチーム)が分かりやすければ何でもいいと思いますけどね。 基本的に自分以外は編集することがないので、結構好き勝手に書いてます。 インデント・改行・空白基本的にセレクタはインデントなし。宣言(プロパティと値)の部分はセレクタの開始位置から半角スペース2つ分インデントする。@media内など、ネストされている場合はその中のセレクタはアットマークルールの開始位置から半角スペース2つでインデントする。セレクタが複数ある場合は基本的にカンマで改行するが、擬似要素・擬似クラスが違うだけの場合は同一行でもよい。 (リセットCSSなどは除く)宣言ブロック開始の波括弧{は最後のセレクタと同じ行に書き、直後に改行を入れる。宣言ブロック終了の波括弧}の直前に改行を入れる。各宣言ごとに改行する。基本的にはセミコ
画像基本はPNG8とJPEG、必要に応じてGIFを利用画像ファイルは基本的に、イラストなどはファイル容量が軽いためPNG8、写真はJPEGファイルを利用します。ただし、IE6以前で透過PNGが利用できないため、必要に応じてGIFを使い分けます。 HTML<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="keywords" content="ホームページ制作,東京" /> <meta name="description" content="東京世田谷のホームページ制作会社。「声」をテーマに、御社の顧客満足向上に貢献するWebサイト制作をお手伝いします。" /> <title>エイチツーオー・スペース[H2O Space.] | ちゃんとWebなホームページ制作会社(東京・世田谷)</title> <link
The Days of Web Standards 2007[Web標準の日々] July 16, 2007 1/120 一緒につくろう! XHTML+CSSガイドライン 株式会社サイバーガーデン 益子貴寛 2007年7月16日 月曜日 東京・秋葉原 ダイビル7F The Days of Web Standards 2007[Web標準の日々] July 16, 2007 2/120 全米が泣いた! The Days of Web Standards 2007[Web標準の日々] July 16, 2007 3/120 XHTML+CSS ガイドライン The Days of Web Standards 2007[Web標準の日々] July 16, 2007 4/120 みたび... ※ 2006年4月の CSS Nite Vol.7 でかなり、
GitHub ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 ただし公開ファイルと公開不要なファイル(SASS や node_modules など)は明確に分ける 特に理由がなければ下記の形にする root/ ├── dist/ └── index.html └──css/ └──js/ └──images/ └── src/ └──sass/ └──style.scss └──_var.scss └──_mixin.scss └──_header-footer.scss └──_compo-list.scss └──_compo-table.scss └──_compo.scss └──_single-propery.scss └──_animation.scss 基本ルール 命名規則 ID名、クラス名、ファイル名で単語をつなぐ場合は -(ハイフン)を使用親要
セットの記述方法 { インデントは半角スペースを4つ。 閉じ カッコ のインデントは書き出し位置に合わせる。 1プロパティは1行で管理する。行の終わり必ずセミコロン ( ; ) } セレクタの記述方法 { 各IDとclassが適用されているタグを必ず明記。 継承を見やすく、かぶりが起こるのを防ぐために親セレクタも記述する。 自然とピラミッド型になるようにマークアップを行う。 } プロパティの記述順序 { ボックスモデル (Box model) 視覚整形モデル (Visual formatting model) 視覚整形モデル詳細 (Visual formatting model details) 視覚効果 (Visual effects) 生成 内容, 自動番号付け及びリスト (Generated content, automatic numbering, and lists) ページ関連
/* ---- ユーザーの想定環境 ---- */ 必須動作環境(ブラウザ/OS)は?(例:IE5.5/Firefox2/Safari2 など) 推奨動作環境(ブラウザ/OS)は?(例:IE6,7,8/Firefox3/Safari3/Chrome1 など) 最低ウィンドウサイズは?(例:1024×768 など) /* ---- ファイルの取扱いについて ---- */ フォルダの構成は? サイト内で汎用的に使用する共有ファイルをまとめるフォルダは?(例:commonフォルダ など) 各ファイル(HTML/CSS/JS)の命名規則は?(例:英文字は英単語なのかローマ字読みなのか、拡張子はhtmlなのかhtmなのか など) 画像ファイルの命名規則は?(例:分類_使用場所_名称_連番.拡張子 など) /* ---- 使用フォント ---- */ 画像内のテキストへ使用するフォント(和文/英文)
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい(X)HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
HTML/XHTMLマークアップ・CSSコーディングを代行するコーディングサービス。ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイト共通パーツ定義] │ │ └editorial/ │ │ └category-name.css [カテゴリ別構成定義] │ └img/ │ │ ├接頭辞_連番.拡張子 │ │ └category-name/ │ │ └接頭辞_連番.拡張子 │ └js/ │ └common.js ├category-name/ │ └index.html └index.
1. 適用範囲 1.1 関連文書 1.2本ガイドラインの更新方法 2. 基本事項 2.1 アクセシビリティ、ユーザビリティ 2.2 セキュリティ 2.3個人情報保護・プライバシー保護 2.4 著作権、肖像権の保護 3. 個別項目 3.1 基本事項 3.2 企画関連 3.3 ファイル関連 3.4 文章関連 3.5 マークアップ言語関連 3.6 デザイン、レイアウト関連 3.7 ナビゲーション関連 3.8 文字、フォント関連 3.9 画像関連 3.10 テーブル関連 3.11 フォーム関連 3.12 リンク関連 3.13 音声、動画、プラグイン関連 3.14 検索関連 3.15 個人情報関連 3.16 著作権、肖像権関連 3.17 その他 3.18 禁止事項一覧 4. 更新履歴 1. 適用範囲 本ガイドラインの適用範囲を以下に示します。 浜松市公式ホームページ(city.hamamatsu.s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く