|
|
| Line 1: |
Line 1: |
| - | /* -------------------------------------------------------------
| |
| | | | |
| - | [1] レイアウトに関する指定
| |
| - | [2] ヘッダーブロック内に関する指定
| |
| - | [3] コンテンツブロック内に関する指定
| |
| - | [4] フッターブロック内に関する指定
| |
| - | [5] CSSデザインサンプルリンク指定
| |
| - |
| |
| - | ----------------------------------------------------------------
| |
| - | CSSデザインサンプ [ URL ] http://www.css-designsample.com
| |
| - | ------------------------------------------------------------- */
| |
| - |
| |
| - |
| |
| - | /* 一括で全ての要素の余白をゼロに指定 */
| |
| - | * {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | /* 全体的なリンク */
| |
| - |
| |
| - | a:link,
| |
| - | a:visited,
| |
| - | a:hover,
| |
| - | a:active { text-decoration: underline; }
| |
| - |
| |
| - | a:link { color: #00f; }
| |
| - |
| |
| - | a:visited { color: #90f; }
| |
| - |
| |
| - | a:hover { color: #f00; }
| |
| - |
| |
| - | a:active { color: #f00; }
| |
| - |
| |
| - | /* -------------------------------------------------------------
| |
| - | [1] レイアウトに関する指定 */
| |
| - | body {
| |
| - | font-size: 85%;
| |
| - | text-align: center;
| |
| - | padding: 0;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | /*-- 全体を囲んでいます --*/
| |
| - | #wrapper {
| |
| - | text-align: left;
| |
| - | width: 800px;
| |
| - | margin: 0 auto;
| |
| - | border-left: 1px solid #666;
| |
| - | border-right: 1px solid #666;
| |
| - | }
| |
| - |
| |
| - | /*-- ヘッダー部分 --*/
| |
| - | #header {
| |
| - | width: 100%;
| |
| - | height: 245px;
| |
| - | position: relative;
| |
| - | background: url(Tokyotech.jpg) no-repeat 0 0;
| |
| - | background-position:top right;
| |
| - | }
| |
| - |
| |
| - | /*-- コンテンツ部分 740px --*/
| |
| - | #contents { padding: 40px 30px; }
| |
| - |
| |
| - | /*-- フッター部分 --*/
| |
| - | #footer {
| |
| - | width: 802px;
| |
| - | margin: 0 auto;
| |
| - | padding: 2em 0 0.5em;
| |
| - | background-color: #333;
| |
| - | }
| |
| - |
| |
| - | /* -------------------------------------------------------------
| |
| - | [2] ヘッダーブロック内に関する指定 */
| |
| - |
| |
| - | /* 見出し */
| |
| - |
| |
| - | h1 {
| |
| - | font-size: 100%;
| |
| - | font-weight: normal;
| |
| - | text-align: right;
| |
| - | position: absolute;
| |
| - | top: 10px;
| |
| - | left: 30px;
| |
| - | color: #666;
| |
| - | }
| |
| - |
| |
| - | /* サイトタイトル */
| |
| - | .logo {
| |
| - | font-size: 160%;
| |
| - | position: absolute;
| |
| - | top: 30px;
| |
| - | left: 30px;
| |
| - | }
| |
| - |
| |
| - | .logo a {
| |
| - | font-weight: bold;
| |
| - | color: #000;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | .logo a:hover {
| |
| - | color: #f00;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | /* 概要 */
| |
| - | .description {
| |
| - | line-height: 1.5em;
| |
| - | position: absolute;
| |
| - | bottom: 45px;
| |
| - | left: 30px;
| |
| - | color: #000;
| |
| - | }
| |
| - |
| |
| - | /*---------------------------------------グローバルナビ部分*/
| |
| - | #globalnavi {
| |
| - | font-size: 95%;
| |
| - | list-style-type: none;
| |
| - | width: 800px;
| |
| - | height: 40px;
| |
| - | position: absolute;
| |
| - | bottom: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | #globalnavi li {
| |
| - | width: 200px;
| |
| - | float: left;
| |
| - | }
| |
| - |
| |
| - | #globalnavi li a {
| |
| - | text-align: center;
| |
| - | text-decoration: none;
| |
| - | width: 200px;
| |
| - | height: 28px;
| |
| - | display: block;
| |
| - | padding-top: 12px;
| |
| - | background-image: url(img/bg-globalnavi.jpg);
| |
| - | background-repeat: no-repeat;
| |
| - | color: #9f0
| |
| - | }
| |
| - |
| |
| - | #category01 a { background-position: 0 0; }
| |
| - |
| |
| - | #category02 a { background-position: -200px 0; }
| |
| - |
| |
| - | #category03 a { background-position: -400px 0; }
| |
| - |
| |
| - | #category04 a { background-position: -600px 0; }
| |
| - |
| |
| - | #globalnavi li a:hover {
| |
| - | text-decoration: none;
| |
| - | background-image: url(img/bg-globalnavi.jpg);
| |
| - | background-repeat: no-repeat;
| |
| - | color: #fff;
| |
| - | }
| |
| - |
| |
| - | #category01 a:hover { background-position: 0 -40px; }
| |
| - |
| |
| - | #category02 a:hover { background-position: -200px -40px; }
| |
| - |
| |
| - | #category03 a:hover { background-position: -400px -40px; }
| |
| - |
| |
| - | #category04 a:hover { background-position: -600px -40px; }
| |
| - |
| |
| - | /*--サブメニュー部分--*/
| |
| - |
| |
| - | #globalnavi ul {
| |
| - | list-style-type: none;
| |
| - | width: 200px;
| |
| - | height: auto;
| |
| - | position: static;
| |
| - | }
| |
| - |
| |
| - | #globalnavi ul li {
| |
| - | width: 200px;
| |
| - | float: none;
| |
| - | }
| |
| - |
| |
| - | #globalnavi ul li a {
| |
| - | text-align: left;
| |
| - | text-decoration: none;
| |
| - | width: 190px;
| |
| - | height: auto;
| |
| - | display: block;
| |
| - | padding: 4px;
| |
| - | border: 1px outset #690;
| |
| - | background-image: none;
| |
| - | background-color: #690;
| |
| - | color: #000;
| |
| - | }
| |
| - |
| |
| - | #globalnavi ul li a:hover {
| |
| - | text-decoration: none;
| |
| - | border: 1px outset #666;
| |
| - | background-image: none;
| |
| - | background-color: #666;
| |
| - | color: #fff;
| |
| - | }
| |
| - |
| |
| - | #globalnavi .menu ul { display: none; }
| |
| - |
| |
| - | #globalnavi .menuOn ul { display: block; }
| |
| - |
| |
| - | /* -------------------------------------------------------------
| |
| - | [3] コンテンツブロック内に関する指定 */
| |
| - |
| |
| - | /* 見出し */
| |
| - | h2,
| |
| - | h3,
| |
| - | h4,
| |
| - | h5,
| |
| - | h6 {
| |
| - | font-size: 140%;
| |
| - | font-weight: normal;
| |
| - | margin-bottom: 0.5em;
| |
| - | padding: 3px 0 2px;
| |
| - | color: #030;
| |
| - | border-top: 2px solid #9c0;
| |
| - | border-bottom: 1px solid #ccc;
| |
| - | }
| |
| - |
| |
| - | h3,
| |
| - | h4,
| |
| - | h5,
| |
| - | h6 { margin-top: 2em; }
| |
| - |
| |
| - | /* 文字 */
| |
| - | #contents p {
| |
| - | line-height: 1.5em;
| |
| - | margin-bottom: 1em;
| |
| - | }
| |
| - |
| |
| - | /* -------------------------------------------------------------
| |
| - | [5] フッターブロック内に関する指定 */
| |
| - |
| |
| - | #footer p {
| |
| - | text-align: center;
| |
| - | color: #fff;
| |
| - | }
| |
| - |
| |
| - | /* -------------------------------------------------------------
| |
| - | [6] CSSデザインサンプルリンク指定 */
| |
| - |
| |
| - | #cds {
| |
| - | font-size: 80%;
| |
| - | font-family: Geneva, Arial, Helvetica, sans-serif;
| |
| - | text-align: right;
| |
| - | margin: 0;
| |
| - | padding-right: 20px;
| |
| - | clear: both;
| |
| - | }
| |
| - |
| |
| - | #cds,
| |
| - | #cds a,
| |
| - | #cds a:hover {
| |
| - | text-decoration: none;
| |
| - | color: #ccc;
| |
| - | }
| |
"
