/* 既定のcssを使用、必要最低限の設定のみ */ /******************************************************************************/ /* 基本設定 */ /******************************************************************************/ /* メインコンテンツ大枠 */ /* この枠内にオブジェクトを収めれば、とりあえずは構造的な破綻は起きないと思われます */ /* 但し、メディアクエリ等を用いたレスポンシブデザインは、既存のブレークポイントが分からない場合は、レイアウトの破綻の恐れがあります */ #outerbox{ max-width:1080px;/* 最大幅を決めています。ブラウザウィンドウをフルスクリーンにした際に、コンテンツが広がりすぎるのを防いでいます */ margin:0 auto; word-break: break-all;/*たとえURL記述であれ、改行を許可*/ } /*↑URL等は空白が無いため、一つの英単語としてブラウザに認識され、自動で改行されません。そのような場合のために予め一切の禁則なしに改行を許可します*/ a:link, a:visited, a:hover, a:active{ text-decoration:none;/*下線なし*/ } /* ↑リンクの設定については、注意が必要です。ここを編集するとレイアウトが不具合を起こす場合があります。 */ /******************************************************************************/ .innerbox{ max-width:1080px; margin:0 auto;/* 中央寄せ */ padding-left:15px; padding-right:15px; } #title{ color:#fff; background-color:#7aa9e8; text-align:center; padding-top:15px;/* h1の上下位置調整 */ padding-bottom:5px; } #title h1{ font-size:21px; margin-top:10px;/* h1の上下位置調整 */ } /* flexbox親要素 */ .fxouter{ margin:0 auto; display:flex;/* flexbox宣言 */ flex-direction:row; flex-wrap:wrap; justify-content:space-around; } /* flaxbox子要素 */ /* タイトルリボン */ .ribbon01{ width:100%; margin-top:15px; margin-bottom:30px; padding-top:15px; padding-bottom:15px; background-color:#03c; color:#fff; /* border-radius:5px; */ text-align:center; } h3{ position:relative; margin:0 auto; font-size:18px; } /* 非分割ボックス */ .singlebox{ width:100%; text-align:center; } .button01{ margin:0 auto; width:360px; padding-top:15px; padding-bottom:15px; background-color:#ffdbc9; color:#333; border-radius:5px; text-align:center; text-shadow: 1px 1px #ffffff;/* 文字エンボス表現 */ } /* ボタンのツヤ・立体表現 */ .soft-gloss{ background-image: linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%); box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset; border: 1px solid rgba(0,0,0,.2); } h4{ margin:0 auto;/* H4には大き目の上下マージンがとられていたので修正 */ font-size:14px; } p{ font-size:14px; margin-top:10px; margin-bottom:10px; } .cent{ margin:0 auto; text-align:center; } .space{ margin-bottom:30px; } /* 2分割ボックス */ .twinbox{ width:360px; } .ribbon02{ width:100%; padding-top:10px; padding-bottom:10px; background-color:#ccc; color:#333; /* border-radius:5px; */ text-align:center; } .bl{ color:blue; } .bl a:hover { text-decoration:underline; } .ribbon01br{ width:100%; padding-top:10px; padding-bottom:10px; background-color:#f63; color:#fff; /* border-radius:5px; */ text-align:center; margin-bottom:5px; } /* お知らせボックスをflexboxで実装しレスポンシブ化 */ .announcebox{ display:flex; flex-direction:column; flex-wrap:nowrap; height:100px; border-style:inset;/* 表示部分をへこんでいるように見せる */ border-width:3px; border-color:brown; /* border-radius:5px; */ background-color:#eee; overflow-y:scroll; } .announce{ width:100%; font-size:14px; } .announce th{ vertical-align:top; padding:2px; } .announce td{ padding:2px; } /******************************************************************************/ /******************************************************************************/ .innerbox{ max-width:1080px; margin:0 auto;/* 中央寄せ */ padding-left:15px; padding-right:15px; } #title{ color:#fff; background-color:#7aa9e8; text-align:center; padding-top:15px;/* h1の上下位置調整 */ padding-bottom:5px; } #title h1{ font-size:21px; margin-top:10px;/* h1の上下位置調整 */ } /* flexbox親要素 */ .fxouter{ margin:0 auto; display:flex;/* flexbox宣言 */ flex-direction:row; flex-wrap:wrap; justify-content:space-around; } /* flaxbox子要素 */ /* タイトルリボン */ .ribbon01b{ width:100%; margin-top:15px; margin-bottom:30px; padding-top:15px; padding-bottom:15px; background-color:#03c; color:#fff; border-radius:5px; text-align:center; } .stmt { margin-top:10px; margin-left:180px; margin-right:180px; } h3{ position:relative; margin:0 auto; font-size:18px; } /* 非分割ボックス */ .singlebox{ width:100%; text-align:center; } .button01{ margin:0 auto; width:360px; padding-top:15px; padding-bottom:15px; background-color:#ffdbc9; color:#333; border-radius:5px; text-align:center; text-shadow: 1px 1px #ffffff;/* 文字エンボス表現 */ } /* ボタンのツヤ・立体表現 */ .soft-gloss{ background-image: linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%); box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset; border: 1px solid rgba(0,0,0,.2); } h4{ margin:0 auto;/* H4には大き目の上下マージンがとられていたので修正 */ font-size:14px; } p{ margin-top:10px; margin-bottom:10px; font-size:14px; } .cent{ margin:0 auto; text-align:center; } .space{ margin-bottom:30px; } /* 2分割ボックス */ .twinbox{ width:420px; } .ribbon02b{ width:100%; padding-top:10px; padding-bottom:10px; background-color:#ccc; color:#333; border-radius:5px; text-align:center; } .bl{ color:blue; } .grn{ background-color:#0c0; } .ribbon01brb{ width:100%; padding-top:10px; padding-bottom:10px; background-color:#f63; color:#fff; border-radius:5px; text-align:center; margin-bottom:5px; } /* お知らせボックスをflexboxで実装しレスポンシブ化 */ .announceboxb{ display:flex; flex-direction:column; flex-wrap:nowrap; height:100px; border-style:inset;/* 表示部分をへこんでいるように見せる */ border-width:3px; border-color:brown; border-radius:5px; background-color:#eee; overflow-y:scroll } .announce{ width:100%; } .announce th{ vertical-align:top; padding:2px; } .announce td{ padding:2px; } .rd{ color:#f00; } .bld{ font-weight:bold; } /* リボンのツヤ表現 */ .soft-gloss{ background-image: linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%); box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset; border: 1px solid rgba(0,0,0,.2); } /******************************************************************************/