約 5,796,074 件
https://w.atwiki.jp/comneko/pages/5.html
set.css 各種CSSを読み込むためのCSS。 基本CSS群をまとめて読み込みます。 @charset "Shift-JIS"; @import "common.css"; @import "base.css"; @import "object.css"; @import "parts_header.css"; @import "parts_footer.css"; @import "parts_menu.css"; @import "layout.css";
https://w.atwiki.jp/comneko/pages/4.html
基本CSSセット あらゆるサイトに共通で使えるCSSセット。 構成 set.css ├base.css ├common.css ├object.css ├layout.css ├parts_fotter.css ├parts_header.css] ├parts_menu.css ├・・・・
https://w.atwiki.jp/comneko/pages/6.html
base.css サイト全体の基本設定。 文字色、背景、フォントサイズ、タグ規定スタイルの変更等。 SAMPLE * { margin 0; padding 0;} img { vertical-align bottom; border 0; } map { visibility hidden; } /* 基本文字サイズ */ body { font-size 80%; } th,td { font-size 100% !important; font-size /**/ 80%; } /* 各種タイトルの文字サイズ */ h1,h2,h3,h4,h5,h6 { font-size 100%; } /** body **/ body { color #333; background-color #FFF; text-align center; } /** form **/ input, select { vertical-align middle; }
https://w.atwiki.jp/comneko/pages/9.html
layout.css サイト全体の大まかなレイアウトブロックのレイアウトのみを設定。 デザイン、ブロック内部のコンテンツレイアウトは別CSSにて設定する。 SAMPLE /*** 大外枠 ***/ #outline { position relative; margin 0 auto; text-align left; background-color #FFF; z-index 0; width 732px; } /*** ヘッダー ***/ #header { position relative; width 732px; height 36px; background-color #Fc9; z-index 10; } /*** フッター ***/ #footer { width 732px; margin 0 auto; text-align left; z-index 10; } /*** メニューその１(ヘッダメニュー) ***/ /** デザイン詳細は parts_menu.css **/ #menuCont1 { width 732px; height 20px; overflow hidden; z-index 20; } /*** コンテンツ ***/ /** サイト内容記述領域。詳細は object.css で規定 **/ #contents { width 732px; min-height 360px; _hight 360px; z-index 1; }
https://w.atwiki.jp/wiki15_css/pages/18.html
CSS system NWN標準から変更されたCSS独自のシステムのページです。 大幅なシステム変更はありませんが、世界観に基づくルール変更や、アイテム等の使い勝手の変更等が盛り込まれています。 更新時にはアナウンスされますが、とりあえず一通りは目を通しておいてください。 CSS system新規PC HCR 死亡ルール AI アイテムの仕様変更 新規PC 支給物 服１着、ワンド３つ、１０００GP HCR 瀕死システムHP-10まで死亡しません。 休息休息者の上限HPに対して、軽傷が完治する回復量に調整しています。また、休息に食料、時間等の制限は入れていません。 死亡ルール PC、NPCが死亡した場合、蘇生自体は可能ですが、安易に蘇生することはできません。 多額な金銭が要求され、高度な施設が必要になります。 AI 戦闘修正AIファクションが「敵対」のものに指定します。カスタムNPC、モンスターを作成時に、AIスクリプトを標準のものからj_ai_XXXXに置き換えてください。 修正標準AIファクションが「敵対」以外のものに指定します。カスタムNPC、モンスターを作成時に、AIスクリプトを標準のものからxnw_c2_defaultXXに置き換えてください。 アイテムの仕様変更 宝物小額のみ、アイテムなし修正してます。宝箱を設置する際はカスタム＞宝物＞普通にある４つを使ってください。違いはロック、トラップの有無です。 回復道具治療道具は、回復割合に応じてレベルが１～４まであります。使用者の治療技能により、僅かながら回復量、効果発生までの時間、成功・失敗が変化します。効果発生まで使用対象者の体が青く点滅します。なお、治療道具、治療道具+1は５個単位で売られています。以下が治療道具に関する計算式です。 治療道具所要時間＝６ - 治療技能 / ２０ * ３ 治療道具回復量＝対象者のMAXHP * 治療道具レベル / (４ - 治療技能 / ２０） 一方、ポーションは成功・失敗がなく、効果発生までに時間を要しません。 回復割合に応じてレベルが１～５まであります。 以下がポーションに関する計算式です。 ポーション回復量＝対象者のMAXHP * ポーションレベル / (５ - ランダム２０ / ２０） 毒になると、毎ラウンド解毒されるまで体力の４％のダメージを受けます。 解毒には、毒消し草を使用。 治療技能により、僅かながら効果発生までの時間、成功・失敗が変化します。 以下が毒消し草に関する計算式です。 治療道具所要時間＝６ - 治療技能 / ２０ * ３ たいまつ約2時間で燃え尽きるよう修正が入っています。
https://w.atwiki.jp/comneko/pages/8.html
object.css 当該サイト特有でサイト全体に共通なスタイルを設定。 色・タイトルスタイル・テーブルスタイルなどなど。 （特定のページ/コンテンツのスタイルは別に cont_xxx.css 内に記述する） SAMPLE /*** 色 ***/ .bgclr01 { background-color #03C; color #FFF; } .bgclr02 { background-color #CD3636; color #FFF; } .bgclr03 { background-color #EED8A9; } .bgclr04 { background-color #FBF3E2; } .bgclr05 { background-color #FFFFE9; } .bgclr06 { background-color #F0F0F0; } /*** タイトルデザイン ***/ .ttline_lft_btm { padding 2px 0 3px 6px; border-bottom solid 1px #C9C9C9; border-left solid 8px #999; margin-bottom 1em; } .ttline_btm { padding 0 6px 4px; border-bottom solid 1px #C9C9C9; margin-bottom .6em; } .ttline_lft { padding 1px 6px; border-left solid 6px #999; margin-bottom .6em; }
https://w.atwiki.jp/htmlcss/pages/17.html
cssの記述方法 cssファレンスABC順 記事 2カラムレイアウト
https://w.atwiki.jp/comneko/pages/7.html
common.css 一般的なサイトデザインで共通して使用可能なクラス設定など /* フロート画像(右) */ img.flright { display block; line-height normal; float right; margin 0 0 5px 10px; } /* フロート画像(左) */ img.flleft { display block; line-height normal; float left; margin 0 10px 5px 0; } /* フロートクリア */ .clear { clear both; font-size 1px; height 1px; } /* よく使う文字色 */ .fc_FCC { color #FCC; } .fc_F99 { color #F99; } .fc_F66 { color #F66; } .fc_F33 { color #F33; } .fc_F00 { color #F00; } .fc_96F { color #96F; } .fc_F60 { color #F60; } .fc_3C9 { color #3C9; } .fc_C00 { color #C00; } .fc_00C { color #00C; } /* 文字サイズ */ .fsxxlarge { font-size 160%; } .fsxlarge { font-size 140%; } .fslarge { font-size 120%; } .fssmall { font-size 84%; } /* 行間 */ .txtheight { line-height 1.6; } /* テキストコンテンツエリアの行間 */ .txtcont p, .txtcont li, .txtcont dl { line-height 1.6; } /* 文字種 */ .ffmono { font-family "ＭＳ ゴシック", "Osaka－等幅", mono; } /* 水平線 */ .solidline { font-size 1px; line-height 1px; height 1px; border-bottom solid 1px #C9C9C9; } .dashedline { font-size 1px; line-height 1px; height 1px; border-bottom dashed 1px #C9C9C9; } .dottedline { font-size 1px; line-height 1px; height 1px; border-bottom dotted 1px #C9C9C9; } /* テーブル */ .tbl_clear { background none; padding 0; border-style none; } .tbl_type01 { margin 3px 0; width 100%; border-top solid 1px #C9C9C9; border-left solid 1px #C9C9C9; } .tbl_type01 th, .tbl_type01 td { padding 3px 3px 3px 6px; line-height 1.6; border-right solid 1px #C9C9C9; border-bottom solid 1px #C9C9C9; text-align left; vertical-align top; } .tbl_type01 th { font-weight normal; background-color #FBF3E2; } .tbl_type01 td table { margin 0px; border-top none; border-left none; } .tbl_type01 td table td { padding 0px; border-right none; border-bottom none; } /* 各種リスト */ ul.txtlistnone { list-style-type none; line-height 1.6; } ul.txtlistnone ul { list-style-type none; margin-left 2em; margin-bottom .6em; } ul.jisage1 { list-style-type none; line-height 1.6; } ul.jisage1 li { padding-left 1.1em; text-indent -1em; } dl.dllistnone { line-height 1.6; } dl.dllistnone dd { margin-left 2em; margin-bottom .6em; } ul.normalul { margin-left 2.2em; line-height 1.6; } ul.normalul ul { margin-left 2.2em; line-height 1.6; } ol.normalol { margin-left 2.8em; line-height 1.6; } ol.normalol ol { margin-left 2.8em; list-style-type decimal-leading-zero; } /* マージン */ .mgb05 { margin-bottom 0.5em; } .mgb10 { margin-bottom 1em; } .mgb15 { margin-bottom 1.5em; } .mgb20 { margin-bottom 2em; } .mgb30 { margin-bottom 3em; } .mlb05 { margin-left 0.5em; } .mlb10 { margin-left 1em; } .mlb15 { margin-left 1.5em; } .mlb20 { margin-left 2em; } .mlb30 { margin-left 3em; } .mtb05 { margin-top 0.5em; } .mtb10 { margin-top 1em; } .mtb15 { margin-top 1.5em; } .mtb20 { margin-top 2em; } .mtb30 { margin-top 3em; }
https://w.atwiki.jp/0x0b/pages/35.html
css2, css3から新要素含め復習 cssファイルの呼び出し方@import link rel="stylesheet" type="tex/css" href=" " style type="text/css" /style style="" シンタックス全称セレクタ 文脈セレクタ css2から拡張(木構造から子孫、兄弟関係からの指定が可能)子孫セレクタ 子供セレクタ 隣接(兄弟)セレクタ 疑似クラスリンク関連の疑似クラス css2で追加 p first-child疑似要素 first-letter, first-line 疑似要素 before, after 疑似要素 一意セレクタ 属性セレクタ ＠規則@import url("http //~"), url('http //~'), "http //~", 'http //~' @charset @media @page @font-face cssファイルの呼び出し方 文書間で共有される外部スタイルシートは特定文書内の style 要素に上書きされ、文書内の要素間に共有される style 要素は特定要素内の style 属性に上書きされます。この順序の中に @import 声明で導入されるスタイルシートが割り込みます @import 規則は外部スタイル・シートの中に記述して構いませんが必ずファイルの冒頭に無ければなりません スタイル宣言よりも後ろの行に記述すると無視されなければなりませんがブラウザ (UA) によってサポートのばらつきがあります cool.css （外部スタイルシート） atomic.css （@import 規則） head 要素内の style 要素 開始タグ中での style 属性 @import 外部入力スタイルシート コンポーネント化（部品化） @import 規則は style 要素内または外部スタイルシートの冒頭に書かれなくてはならない link rel="stylesheet" type="tex/css" href=" " 外部スタイルシート html meta http-equiv="content-style-type" content="text/css" link rel="stylesheet" href="./atomic.css" type="text/css" xhtml meta http-equiv="content-style-type" content="text/css" / link rel="stylesheet" href="./atomic.css" type="text/css" / ?xml-stylesheet href="./atomic.css" type="text/css" ? exe) !-- 固定スタイルシート； -- link rel="stylesheet" href="atomic.css" type="text/css" / !-- 優先スタイルシート； -- link rel="stylesheet" title="cool" href="cool.css" type="text/css" / !-- 代替スタイルシート； -- link rel="alternate stylesheet" title="modern" href="modern.css" type="text/css" / link rel="alternate stylesheet" title="classic" href="classic.css" type="text/css" / 固定スタイルシート：rel 属性の値stylesheet title属性は指定しない 優先スタイルシート：rel 属性の値stylesheet title属性を指定する 代替スタイルシート：rel 属性の値 alternate stylesheet title属性を指定する UAに指定がなければ 固定スタイルシートと優先スタイルシートが選択される title属性を同じ名前にすることでグループ化できる ?xml-stylesheet href="./atomic.css" type="text/css" ? style type="text/css" /style ?xml version="1.0" encoding="Shift_JIS" standalone="no"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http //www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" html xmlns="http //www.w3.org/1999/xhtml" xml lang="ja" head meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" / title XHTML 1.1 とはなんだろうか /title !-- CSS を使う宣言 -- meta http-equiv="content-style-type" content="text/css" / !-- style 要素 -- style type="text/css" xhtml meta http-equiv="content-style-type" content="text/css" / style type="text/css" 埋込みスタイルシート style="" インラインスタイル 要素内スタイル属性を個別に割り当てる シンタックス CSS書式、構文 セレクタ { プロパティ：値； プロパティ：値； } a {} グループ化 a, b, c { } タイプセレクタ：HTMLﾆ用意されている要素がセレクタ(拡張可能) 全称セレクタ * { } 文脈セレクタ a a-b { } a.class { } .class { } a.class1.class2 { } 優先度は等価 最後に記述されたものが適用される a.class=a.[class~=class] css2から拡張(木構造から子孫、兄弟関係からの指定が可能) 子孫セレクタ ul * li [ } 子供セレクタ body a 隣接(兄弟)セレクタ h1 + h2 { } 疑似クラス リンク関連の疑似クラス link a[href] link { color maroon } a link { color maroon } link { color maroon } 全て等価 visited active css2では任意の要素に適用 link, visitedは排他的だがactive は他の疑似クラスと共存可能 hover カーソルが上に乗っている＆アクティブでない要素 focus テキスト入力にフォーカスされている要素 a hover が link, active よりも前に記述されていると、 a hover のスタイルは link, active のスタイルに上書きされてしまいます exe) link { color red } /* 未訪のリンク */ visited { color blue } /* 訪問済みのリンク */ a active { color lime } /* アクティブ中のリンク */ a hover { color yellow } /* カーソルが上に乗っているリンク */ css2で追加 first-child 疑似クラス first-child exe)body p first-child { } 或る要素が親要素の中で最初に現れる子供要素である場合にだけマッチする 擬似クラスですが、文書の木構造に依存して決定可能なこともある セレクタの中で、任意の場所に記述可能 p first-child p first-child は等価 lang 疑似クラス lang exe) lang(jp) { } p lang(en) { } lang属性を疑似クラスとしてセレクタに用いることができる 属性セレクタと同価 p lang(ja) p[lang="ja"] 疑似要素 first-letter, first-line 疑似要素 指定可能なプロパティ制限 first-line ブロック要素の一行目に整形された文字列 font properties、color properties、background properties、 word-spacing 、 letter-spacing 、 text-decoration 、 vertical-align 、 text-transform 、 line-height 、 text-shadow 、 clear first-letter 一部のブロック要素の一文字目 font properties、color properties、background properties、margin, padding, border, text-decoration 、 vertical-align 、 text-transform 、 line-height 、 text-shadow 、 float 、 clear first-letter 疑似要素は一文字目に引用符などの区切り文字だと二文字目も含むと規定 before, after 疑似要素 プロパティ display の指定可能な値に制約を受ける ブロックレベル要素 before, after の display に指定可能な値は、 none , inline , block , marker その他の値は、 block と等価 インラインレベル要素 before, after の display に指定可能な値は、 none , inline その他の値は、 inline と等価 exe)p.note before { content "Note " } 一意セレクタ a#idname { } #idname { } 優先度は一位セレクタが上 p#URI ＞ p[id="URI"] 属性セレクタ a[href] { } a[target="_blank"] { } a[rel~="copyright] { } *[lang|="en"] { } ＠規則 @import url("http //~"), url( http //~ ), "http //~", http //~ screen tty tv print projection handheld print braille embossed(emboss) speech aural all メディアグループ interactive、static grid、bitmap visual、aural、tactile continuous、paged @charset @media @page @font-face
https://w.atwiki.jp/sevenlives/pages/96.html
CSS【スタイルシート】 読み：しーえすえす 英語：Cascading Style Sheets 別名：スタイルシート 意味： CSSとはHTMLに対してレイアウトやデザインを提供するスタイルシート言語のこと。 文書と構造の体裁を分離という本来の目的を実現するためW3Cが提唱した仕様のひとつ。 拡張子は「.css」。 インターネット勃興期にはwebサイトのデザインに対する要求は多くブラウザメーカーが独自にHTMLの要素や属性を拡張してしまい文書と構造の区別のつきにくい文書が乱立してしまった。 それ危機を感じたW3CはCSSの策定を急ぎ1996年にCSS1、1998年にCSS2の仕様を公開した。 しかしそれに対応するブラウザが登場するまで待つこととなり、実際に広まるのは2002年頃からとなる。 現在ではweb標準の認識が浸透しCSSでデザインを決めることはSEO的にも有利となり一般的になっている。 ブラウザ間の問題はいまだ残っており、CSSの仕様の問題もあり嫌うデザイナーもいる。 またそういったブラウザ間の問題を解決するためにCSSハックなる臨時的な手法も編み出された。 2018年07月14日 CSS 1? CSS 2? CSS 2.1 CSS 3 CSS標準 CSS Validator? BEM HTML SCSS Sass Webブラウザ カスケーディング? セレクタ(CSS) シンプルセレクタ? プロパティ(CSS) 値【value】(CSS)? 宣言(CSS) 宣言ブロック 規則集合? 擬似クラス? 擬似要素? インライン要素 ブロック要素? ハンドリング 継承(CSS) selector s specificity? リニアライズ? ■ 記述法 外部スタイルシート? エンベデッド・スタイルシート? インライン・スタイルシート 全称セレクタ ロールオーバー インデント 作成者定義スタイルシート? ユーザ定義スタイルシート? デフォルト・スタイルシート? レイアウト?固定レイアウト? リキッドレイアウト エラスティックレイアウト? コンポジション・ワーク ロングハンド? ショートハンド CSS Sprites 画像置換 条件付コメント? リセットCSS OOCSS? CSSハック ドロップキャップ スタイルガイド? CSS Expressions reset.css? プログレッシブ・エンハンスメント? グレースフル・デグラデーション? ベンダー・プリフィックス ■ CSSフレームワーク? Bootstrap BlueTrip? YAML?