FC2でCSSを編集する

@charset "utf-8";

Index

/* Index ++++++++++++++++++++++++++++++++
↓3カラム↓
  Layout:Fixed3-Basic
   
   Reset
   Default
       -Hyper text
       -Headline
       -Table, Form
   Layout
   Header
   Main (Common Setting)
       -Page Title
       -User Page style
       -Pager
       -Page Edit
       -History Page
       -Management (Image,Page)
       -Search Result
   View pass
   Side menu
   Footer

+++++++++++++++++++++++++++++++++++++++ */

Reset

ブラウザによってデフォルトのフォントは異なります。それを統一させる為にもCSSで一度デフォルトをかける必要がある。


/* =Reset
------------------------------------------------- */

html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
blockquote,th,td,p {
  margin:0;
   padding:0;
}

ul, ol, li, dl, dt, dd {
  list-style:none;
}

img,
a img {
  border:none;
}




Default

/* =Default
------------------------------------------------- */

body {
↓左右端の背景色↓
  background-color:#F5F5F5; 

/*「IT資格DASH」「MENU」「情報スペシャリスト」「最新の更新」 */
  color: #655646;

  text-align:center;
   font-family:Verdana, Ariel, Helvetica,'MS Pゴシック',sans-serif;

■Verdana=画面上で一番読みやすいフォント
■font-family:フォントを指定
  line-height:1.4;
■行とフォントの隙間が1.4
  word-break:break-all;
   font-size:82%;
}

html>/**/body {
  font-size:13px;
}

* html body { [#fe271b2f]
   font-family:"MS Pゴシック", sans-serif;                        /* WinIE6 */
}

*:first-child+html body { [#a05b5dc7]
   font-family:"メイリオ", Meiryo, "MS Pゴシック", sans-serif;    /* WinIE7 */
}


Hyper text

/* =Hyper text
      • ---------------------------------------------- */

a {
  text-decoration:none;
   /**/
   overflow:hidden;    /* for Fx */
   /**/
}

a:link,
a:visited {
  color:#79A7C6;
}

a:focus,
a:hover,
a:active {
  color:#3078A0;
}


Headline

ヘッドライン(シート名)のフォントの大きさ

/* =Headline
------------------------------------------------- */

h1 {
  font-size:139%;    /* 18px */
}

h2 {
  font-size:116%;    /* 15px */
}

h3,
h4 {
  font-size:108%;    /* 14px */
}

h5,h6 {
  font-size:100%;    /* 13px */
}


Table, Form

/* =Table, Form
------------------------------------------------- */


■collapse:隣接するセルのボーダーを重ねて表示します。
■separate:隣接するセルのボーダーを間隔をあけて表示します。
■border-spacing:隣接するセルのボーダーとボーダーの間隔を指定する際に使用します。 border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。
■input,textarea,select:input要素、textarea要素、select要素に対して設定すると、フォーム部品の背景色,マージン、パディングを指定することができます
■マージンは領域間のスペース、パディングは領域内のスペースです。

table {
  border-collapse:collapse;
   border-spacing:0;
}

input,textarea,select {
  padding:1px 3px;
}



Layout

/* =Layout
------------------------------------------------------------ */
■下記サイト参照
■#wrap:全体の枠
■#header:上段のカラム。ピクセルでも指定可能。
■#container:真ん中3段のカラム。例えば80%に設定すると右側のカラムが消えてしまう。
■#main:真ん中のメインのカラム。width:の数値を上げると左側に広がる。定められた値を超えると左側のカラムを上書いてしまう。
■#block:左側のカラムと真ん中のカラムを合わせたもの。数値を小さくすると真ん中のカラムが左側に寄る。

#wrap {
  width:900px;
   margin:0 auto;
}

#header {
  width: 100%;
   position: relative;
}

#vpass {
  width: 750px;
   margin: 20px auto;
}

#container {
  width: 100%;
   position: relative;
   overflow: hidden;
   padding: 20px 0;
}

#main {
  float: right;
   width: 480px;
   overflow: hidden;
}

#block {
  float: left;
   width: 690px;
}

#menu1 {
  float: left;
   width: 195px;
   padding: 0 15px 0 0;
   overflow: hidden;
}

#menu2 {
  float: right;
   width: 195px;
   padding: 0 0 0 15px;
   overflow: hidden;
}

#footer {
  clear: both;
   width: 100%;
   position: relative;
   overflow: hidden;
}



Header

/* =Header
      • ---------------------------------------------- */

#header {
  background:#6699FF url(/design/default_white/images/bg_header.png) repeat-x center bottom;
   border:1px solid #BABABA;
   text-align:left;
   color:#ffffff;
}

/* wiki title */
#header p {
  width:50%;
   padding:20px;
   text-align:left;
   font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
   font-weight:bold;
   font-size:180%;    /* 21px */
}

#header p a {
  color:#000000F;
}

#header ul {
  width:410px;
   height:21px;
   position:absolute;
   right:20px;
   top:0px;
}

#header ul li {
  float:right;
   margin-right:5px;
}

#header .search {
  position:absolute;
   top:30px;
   width:300px;
   right:20px;
   text-align:right;
}

#header .search .search_form {
  width:120px;
   margin:2px 2px 0 0;
   text-align:left;
   vertical-align:middle;
   font-size:85%;    /* 11px */
}

#header .search .search_btn {
  padding:0px 3px;
   vertical-align:middle;
}



Main (Common Setting)

/* =Main (Common Setting)
      • ---------------------------------------------- */

#main .section {
  margin:0 0 20px;
   padding:0 0 20px;
   border:1px solid #BABABA;
   background-color:#FFFFFF;
   text-align:left;
}

/* Disclaimer */
.style_message {
  color:#FF0000;
   font-weight:bold;
   margin:5px 0px;
   text-align:center;
}

.content {
  padding:15px 10px;
}

.content table {
  width:100% !important;    /* for Modern browser */
   width /* for IE5.5 */:80%;
   margin:0 0 10px;
   border:1px solid #BABABA;
   text-align:center;
}

.content th,
.content td {
  padding:3px;
   border:1px solid #BABABA;
   font-size:85%;    /* 11px */
}

.content th {
  background-color:#FAFAFA;
}

.content .controlpanel {
  clear:both;
   margin-bottom:10px;
   padding:10px;
   border:1px solid #BABABA;
   background-color:#FAFAFA;
   text-align:left;
}

.content .controlpanel p {
  font-weight:bold;
   margin:0px 0px 10px;
   vertical-align:middle;
}

.content .controlpanel fieldset,
.newpage_space fieldset,
.message fieldset,
.edit_space fieldset {
  border:none;
   margin-bottom:5px;
   text-align:left;
}

.content .controlpanel #pass {
  height:20px;
   margin-right:5px;
}

.controlpanel #file {
  height:20px;
   margin-right:5px;
}

#main .section .modify_date {
  text-align:right;
   color:#BABABA;
}

#main .section .modify_date ul {
  margin:10px;
}

#main .section .modify_date li {
  margin-bottom:3px;
}

#main #pagetop {
  text-align:right;
}



Page Title

/* =Page Title
      • ---------------------------------------------- */

#main .section .page_title,
#vpass .page_title {
  margin:1px;
   padding:5px 10px;
   background:#FFFFFF url(/design/default_white/images/bg_title.png) repeat-x left bottom;
   border-bottom:1px solid #BABABA;
   color:#000000;
   text-align:left;
}



User Page style (Easy Edit Style)

/* =User Page style (Easy Edit Style)
      • ---------------------------------------------- */

.user_body {
  padding:15px 10px;
   text-align:left;
}

.user_body h2 {
  margin-bottom:5px;
   padding:3px 5px 3px 12px;
   border:1px solid #BABABA;
   background-color:#EAEAEA;
   color:#000000;
}

.user_body h3 {
  margin-bottom:5px;
   padding:3px 5px 3px 5px;
   border:solid #BABABA;
   border-width:1px 1px 1px 10px;
   color:#000000;
}

.user_body h4 {
  margin-bottom:5px;
   padding:3px 5px 3px 6px;
   border-bottom:1px solid #BABABA;
   border-left:6px solid #BABABA;
   color:#000000;
}

.user_body .ulist1 {
  margin:1px 0 1px 2em;
   list-style-position:outside;
   list-style-type:disc;
}

.user_body .ulist2 {
  margin:1px 0 1px 3em;
   list-style-position:outside;
   list-style-type:circle;
}

.user_body .ulist3 {
  margin:1px 0 1px 4em;
   list-style-position:outside;
   list-style-type:square;
}

.user_body .olist1 {
  margin:1px 0 1px 3em;
   list-style-position:outside;
   list-style-type:decimal;
}

.user_body .olist2 {
  margin:1px 0 1px 4em;
   list-style-position:outside;
   list-style-type:lower-alpha;
}

.user_body .olist3 {
  margin:1px 0 1px 5em;
   list-style-position:outside;
   list-style-type:lower-roman;
}

.user_body hr {
  border-top:1px solid #EAEAEA;    /*for Fx*/
   border-right:none;
   border-bottom:none;
   border-left:none;
   margin:5px 0px;
   color:#EAEAEA;                    /*for IE*/
}

.user_body .table {
  border:1px solid #BABABA;
   width:80%;
}

.user_body th,
.user_body td {
  border:1px solid #BABABA;
   padding:5px 10px;
}

.user_body th {
  background-color:#FAFAFA;
}

.user_body p {
  margin:1em;
}

.user_body blockquote {
  margin:0.5em 1em;
   padding:1em;
   color:#000000;
   background-color:#FAFAFA;
   border-left:1px solid #BABABA;
}

.user_body img {
  padding:5px;
   background-color:#FFFFFF;
   border:1px solid #EAEAEA;
   margin:0 5px 5px 0;
}



Pager

/* =Pager
      • ---------------------------------------------- */

.pager {
  margin-bottom:10px;
   margin-top:10px;
   padding:2px 0px;
   text-align:center;
   width:100%;
   font-size:78%;        /* 10px */
}

.pager strong {
  margin-right:3px;
   padding:1px 5px;
   position:relative;
   left:1px;
   top:1px;
   border:1px solid #3078A0;
   background-color:#79A7C6;
   color:#FFFFFF;
}

.pager a {
  left:1px;
   margin-right:3px;
   padding:1px 5px;
   position:relative;
   top:1px;
   border:1px solid #3078A0;
}

.pager a:link,
.pager a:visited {
  color:#3078A0;
}

.pager a:focus,
.pager a:hover,
.pager a:active {
  background-color:#3078A0;
   color:#FFFFFF;
}



Page Edit

/* =Page Edit
      • ---------------------------------------------- */

.edit_space fieldset input {
  vertical-align:middle;
}

.edit_space fieldset label {
  display:block;
   padding-bottom:5px;
}

.edit_space .edit_area {
  margin-bottom:15px;
}

.edit_space #toolbar {
  margin:0 0 5px;
   padding:5px;
   background-color:#FAFAFA;
   border:1px solid #EAEAEA;
}

/* Restoration link */
.edit_space .history a {
  display:block;
   width:6em;
   height:2em;
   line-height:2em;
   text-align:center;
   border:2px solid #EAEAEA;
   background-color:#79A7C6;
   color:#FFFFFF;
}

.edit_space .history a:hover {
  background-color:#3078A0;
}

.edit_space .edit_message {
  border: 1px solid #FF0000;
   background-color: #FFFFFF;
   padding: 10px;
   margin-bottom: 20px;
}

.edit_space .edit_message_title {
  color: #FF0000;
}

.edit_space .edit_title {
  padding-bottom: 20px;
}



/* =History Page
      • ---------------------------------------------- */

/* List page */
.history_space .restoration_list {
  margin-bottom:10px;
}

.history_space #pass {
  margin-right:5px;
}

.history_space .returnpage {
  margin:0 0 10px;
}

/* Restoration */
.message {
  margin:5px 5px 20px;
   background-color:#FAFAFA;
   border:1px solid #EAEAEA;
}

.message .history_link {
  color:#999999;
   margin:15px;
   text-align:center;
}

.message .history_link a {
  padding:0 5px;
}

.message p {
  margin-bottom:10px;
}

.message fieldset #pass {
  width:100px;
}



/* =Management (Image,Page)
      • ---------------------------------------------- */

/* Table style */
.pmanage_space table .lock,
.imanage_space table .lock {
  width:20px;
}

.pmanage_space table .check,
.imanage_space table .check {
  width:20px;
}

.pmanage_space table th.ptitle,
.imanage_space table th.ititle {
  line-height:1.3;
   text-align:center;
   width:auto;
}

.pmanage_space table td.ptitle,
.imanage_space table td.ititle {
  line-height:1.3;
   text-align:left;
   width:auto;
}

.pmanage_space table .ititle p,
.imanage_space table .ititle p {
  margin:0 0 3px
}

.pmanage_space table .ititle input,
.imanage_space table .ititle input {
  width:200px;
}

.pmanage_space table .edit,
.imanage_space table .edit {
  width:30px;
}

.pmanage_space table .copy,
.imanage_space table .copy {
  width:30px;
}

.imanage_space table .size {
  width:65px;
}

.pmanage_space table .day,
.imanage_space table .day {
  width:80px;
}

.imanage_space table .thumb {
  padding:5px 0px;
   width:55px;
}

.imanage_space .thumb img {
  width:50px;
}

/* File upload */
.imanage_space .controlpanel .file_upload {
  margin:10px;
}

.imanage_space .controlpanel .file_upload ul li input {
  margin-right:5px;
}

.imanage_space .controlpanel .file_upload #upload_form {
  margin:10px 0;
}

.imanage_space .controlpanel .file_upload #upload_form a {
  display:block;
   padding-left:15px;
}

.imanage_space .controlpanel .file_upload #upload_form .close {
  background-image:url(/img/btn_plus.png);
   background-position:left center;
   background-repeat:no-repeat;
}

.imanage_space .controlpanel .file_upload #upload_form .open {
  background-image:url(/img/btn_minus.png);
   background-position:left center;
   background-repeat:no-repeat;
}

.imanage_space .controlpanel .file_upload #multi_upload {
  margin:0 0 10px;
}

.imanage_space .controlpanel .file_upload #multi_upload li {
  margin:0 0 5px;
}



Search Result

/* =Search Result
      • ---------------------------------------------- */

.search_result .searchlist dt a {
  font-weight:bold;
   font-size:116%;    /* 15px */
}

.search_result .searchlist .words {
  padding:0 1px;
   background-color:#79A7C6;
   color:#FFFFFF;
   font-weight:bold;
}

.search_result .searchlist .modify_date {
  margin:0 0 1em;
   padding-bottom:5px;
   border-bottom:1px dotted #BABABA;
}



View password

/* =View password
      • ---------------------------------------------- */

#vpass {
  background-color:#FFFFFF;
   border:1px solid #BABABA;
}

#vpass .content {
  padding:20px;
}

#vpass .content h2 {
  margin-bottom:5px;
   padding:3px 5px 3px 12px;
   border:1px solid #BABABA;
   background-color:#EAEAEA;
   color:#000000;
   text-align:left;
}

#vpass .content dl {
  margin:0px 20px 10px;
   text-align:left;
}

#vpass .content dt {
  font-weight:bold;
}

#vpass .content dd {
  margin-bottom:15px;
}

#vpass .content input {
  font-size:108%;    /* 14px */
}



Side menu

/* =Side menu
      • ---------------------------------------------- */

.menubox {
  text-align:left;
}

.menubox .section {
  margin:0 0 15px;
   border:1px solid #BABABA;
   background-color:#FFFFFF;
   text-align:left;
}

.menubox .section .side_title {
  margin:1px;
   padding:5px 10px;
   background:#FFFFFF url(/design/default_white/images/bg_title.png) repeat-x left bottom;
   border-bottom:1px solid #BABABA;
   color:#000000;
   text-align:left;
}

.menubox .section ul,
.menubox .section ol {
  margin-left:5px;
}

.menubox .section ul li {
  margin-left:15px;
   list-style-position:outside;
   list-style-type:disc;
}

.menubox .section ol li {
  margin-left:20px;
   list-style-position:outside;
   list-style-type:decimal;
}

.menubox .menubody {
  padding:10px 5px;
}

/* Recent update */
#plg_recent .menubody .modify_date {
  margin:0px;
   list-style:none;
}

#plg_recent .menubody ul {
  margin-bottom:5px;
}

/* User menu */
#plg_menu .menubody h2 {
  margin-bottom:5px;
   padding:3px 5px 3px 12px;
   border:1px solid #BABABA;
   background-color:#EAEAEA;
   color:#000000;
   font-size:100%;    /* 13px */
}

#plg_menu .menubody h3 {
  margin-bottom:5px;
   padding:3px 5px 3px 5px;
   border:solid #BABABA;
   border-width:1px 1px 1px 10px;
   color:#000000;
   font-size:100%;    /* 13px */
}

#plg_menu .menubody h4 {
  margin-bottom:5px;
   padding:3px 5px 3px 6px;
   border-bottom:1px solid #BABABA;
   border-left:6px solid #BABABA;
   color:#000000;
   font-size:100%;    /* 13px */
}

#plg_menu .menubody .ulist1 {
  margin:1px 0 1px 1em;
   list-style-position:outside;
   list-style-type:disc;
}

#plg_menu .menubody .ulist2 {
  margin:1px 0 1px 1.5em;
   list-style-position:outside;
   list-style-type:circle;
}

#plg_menu .menubody .ulist3 {
  margin:1px 0 1px 2em;
   list-style-position:outside;
   list-style-type:square;
}

#plg_menu .menubody .olist1 {
  margin:1px 0 1px 2em;
   list-style-position:outside;
   list-style-type:decimal;
}

#plg_menu .menubody .olist2 {
  margin:1px 0 1px 2.5em;
   list-style-position:outside;
   list-style-type:lower-alpha;
}

#plg_menu .menubody .olist3 {
  margin:1px 0 1px 3em;
   list-style-position:outside;
   list-style-type:lower-roman;
}

#plg_menu .menubody hr {
  border-top:1px solid #EAEAEA;    /*for Fx*/
   border-right:none;
   border-bottom:none;
   border-left:none;
   margin:5px 0px;
   color:#EAEAEA;                    /*for IE*/
}

#plg_menu .menubody .table {
  border:1px solid #BABABA;
   width:80%;
}

#plg_menu .menubody td,
#plg_menu .menubody th {
  border:1px solid #BABABA;
   padding:5px 10px;
}

#plg_menu .menubody th {
  background-color:#FAFAFA;
}

#plg_menu .menubody p {
  margin:0.5em 1em;
}

#plg_menu .menubody blockquote {
  margin:0.5em 1em;
   padding:1em;
   color:#000000;
   background-color:#FAFAFA;
   border-left:1px solid #BABABA;
}

#plg_menu .menubody img {
  padding:5px;
   background-color:#FFFFFF;
   border:1px solid #EAEAEA;
   margin:0 5px 5px 0;
}



Footer

/* =Footer
      • ---------------------------------------------- */

#footer {
  background:#FFFFFF url(/design/default_white/images/bg_footer.png) repeat-x left top;
   border:1px solid #BABABA;
   text-align:left;
   color:#000000;
   font-size:85%;
}

#footer ul {
  position:relative;
   width:100%;
   padding:10px 0 0;
   overflow:hidden;
}

#footer li {
  float:right;
   margin-right:15px;
   margin-top:2px;
}

#footer .ad {
  float:left;
   width:300px;
   padding:10px 0px 10px 20px;
   text-align:left;
}

#footer .copyright {
  float:right;
   width:450px;
   padding:10px 20px 10px 0px;
   text-align:right;
}


  • 最終更新:2011-02-25 09:16:49

このWIKIを編集するにはパスワード入力が必要です

認証パスワード