@charset "utf-8" ; /* ============================================================================================================================== */ /* */ /* 茨城県県北生涯学習センター　令和2年　前期の講座案内 */ /* */ /* */ /* 参照　 P.201以降で学習した「シングルカラムレイアウト」を実践するために、P.29の練習用記事を */ /* 元に、CSSで修飾した課題の例 */ /* */ /* 　シングルカラムレイアウトの練習課題提供　2020-02-25 山崎勝敬 Ver.00-00 */ /* */ /* ============================================================================================================================== */ /* ------------------------------------------------------------------------------------------------------------------------------ */ /* ヘッダー部やメイン部などの各パーツが、ウィンドウの端にくっつかないように、からみて２階層下の要素にパディングを */ /* 設定する */ /* ------------------------------------------------------------------------------------------------------------------------------ */ body { margin : 0 ; background : beige ; } .container { padding : 0 16px 0 16px ; } /* ------------------------------------------------------------------------------------------------------------------------------ */ /* 各パートにパディング、背景、テキスト色などを指定する */ /*

の子要素に指定する */ /* ------------------------------------------------------------------------------------------------------------------------------ */ .header-inner { padding : 5px 10px 5px 10px ; background : darkolivegreen ; color : ivory ; text-align : left ; } .nav-inner { padding : 5px 10px 5px 10px ; background : yellowgreen ; text-align : right ; } .main-header { margin : 1.5em auto 0.5em auto ; border : 2px solid maroon ; padding : 10px 20px ; background : darkgreen ; max-width : 700px ; text-align : center ; border-radius : 10px ; color : floralwhite ; } .main-inner { padding : 5px 10px 5px 10px ; max-width : 700px ; margin : 0.5em auto 0.5em auto ; padding : 10px 20px ; } .main-placedate { background : honeydew ; max-width : 600px ; margin : 0 auto 0.5em auto ; padding : 2px 20px 5px 20px ; color : mediumblue ; border-radius : 20px ; } .main-caution { background : snow ; max-width : 600px ; margin : 1em auto 0.5em auto ; padding : 2px 20px 5px 20px ; color : orangered ; border-radius : 20px ; } .main-profile { background : snow ; max-width : 600px ; margin : 0 auto 0.5em auto ; padding : 2px 20px 5px 20px ; color : black ; border-radius : 20px ; } .main-profile-ex { padding : 5px 10px 5px 10px ; max-width : 700px ; margin : 0.5em auto 0.5em auto ; padding : 2px 20px 5px 20px ; color : orangered ; } .sidebar-inner { } .footer-inner { padding : 5px 10px 5px 10px ; background : darkolivegreen ; color : ivory ; text-align : center ; } .placedate-h { font-size : 1.2rem ; font-weight : bold ; text-decoration : underline ; } .caution-h { font-size : 1.2rem ; font-weight : bold ; text-decoration : underline ; } .profile-h { font-size : 1.2rem ; font-weight : bold ; text-decoration : underline ; } .copyright { margin : 0 ; } a { color : midnightblue ; text-decoration : none ; } a:hover { color : crimson ; text-decoration : underline ; } a:active { color : indigo ; } .wrapper { overflow : hidden ; max-width : 660px ; text-align : center ; margin : 0 auto 0 auto ; } .item { float : left ; margin : 8px 0 8px 8px ; border : 1px solid #ccc ; padding : 8px ; width : 300px ; } /* ======================================================================================================================= end == */