/* * 2019.11.4 * VAnotherWorld * HPPC.css * サイトの基本的なcss * pc用 */ @charset "UTF-8"; /* 文字コード設定 */ @media (max-width:500px) { video { max-width: 100%; } } /*動画の幅を自動変換*/ /******************************************/ /*^^^^^^^^^^スライドショー関連^^^^^^^^^^^^*/ .slider { margin: 0 auto; width: 80%; } .slider img { width: 100%; } .slick-prev:before, .slick-next:before { color: black; } /*^^^^^^^^^^スライドショー関連^^^^^^^^^^^^*/ /**段落へマージンを適用。上下左右に余白を設ける。**/ p { margin: 30px 16px; } var { color: red; } /**リンクの下線削除**/ a { text-decoration: none; } /*リンクにカーソルを合わせると、赤く文字が光って灰色の枠を表示させる。/* a:hover { background-color: rgb(224,224,224);color: rgb(255,0,0);text-decoration: underline; } /*****************************************/ /*----------センタリング関連-------------*/ /*****************************************/ .textcenter { text-align: center; } /************************************************************************************************* * textcenterというクラスを作り、その中で画像をセンタリングする方法。 * 画像はテキストと同じ扱いなのでtext-alignでセンタリング出来る。 * ただし続けて二つ画像を挿入すると横に並んで表示される。 *
画像の説明
とhtmlに入力して機能する。 **************************************************************************************************/ /********************************************************************************************************************************************************* * html側は普通にタグを指定して画像を挿入します。 * 画像はテキストと同じ扱いだが、display: block;と指定する事で
等と同じようなボックスとして定義出来るため、marginで左右をautoにする事でセンタリング可能。 * 上下に余白を持たせたい場合は0pxの所を編集。 ***********************************************************************************************************************************************************/ .boxcenter { display: block;margin: 0px auto; } /***************************************************************************************** * 画像の説明で画像をセンタリングして表示。 * 二つ並べても縦に並ぶよ。 ******************************************************************************************/ .KaoruRogo { display: bla; width: 25opx; margin: 0px auto; } /**************************************************** * marginで画像の間の余白を自由に調整可能。 * 尚、floatを使った後は回り込みを解除するのを忘れない。 ****************************************************/ /*^^^^^^^^^^センタリング関連^^^^^^^^^^^^*/ img { border:none; } /*画像枠線を消す。*/ /****************************************/ /*画像にカーソルを乗せると透過変化する。*/ /****************************************/ a img:hover { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; } /********************************************************************************************************************** * htmlでで囲んで画像からリンクを作った時だけカーソルが乗ると半透明になり、リンクされていない場合は半透明にならない。 * a img:hover {}の間に他の定義を記載する事で半透明だけでなくmarginで位置をズラす等の設定も出来る。 *********************************************************************************************************************/ /*************************/ /*サイト全体の背景の設定 */ /*************************/ body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; background-color: rgba(150,255,255,0.5); font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",sans-serif; } /***************************************************/ * 背景、フォント等全体設定 * font-size: 90%;とかでフォントサイズかえれます。 * color: rgb(0,176,240);とかで文字色変えれます。 * font-weight: bold;で太字にできます。 **************************************************/ @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } /*フェードイン*/ /*******************************************************/ /* #を付けることで独自設定が可能。後ろの名前も任意でおk*/ /*******************************************************/ #page { border-radius: 25px; width: 952px; margin: 50px auto 50px auto; background-color: rgb(255,255,255); } /********************************************************************** * width はページ全体の幅。 * margin: 0 auto 0 auto;は上下0pxの余白、左右はセンタリングする事を示す。 * marginは余白の定義で「上 右 下 左」の順で記述。 * 上の例では左右でautoを指定しているため中央にセンタリング。 * これがないとページ全体が左に寄る。 * background-colorでpage内の背景。 ***********************************************************************/ #site_title /*タイトルロゴを表示する場所の大きさ*/ { width: 100%; margin: 0% auto 5% auto; /*マージンを下に10px余白をつけて、下と重ならないようにする。*/ } #site_title h1 { margin: 0 0 0 0; } /*h1がすでに余白を持っているため、すべて0。*/ #site_title img { border: none; } /*画像の周りに線が表示されないようにする。*/ #header /*サイトのキャッチコピーの表示*/ { border-radius: 25px; width: 50%; margin: 15px auto 15px auto; } #header h1 { margin: 10px auto 15px auto; text-shadow: rgba(0,0,0,0.5) 5px 3px 5px; text-align: center; font-size: 200% } /** サイト紹介する **/ #MainCenter { width: 85%; margin:0px auto 0px auto; padding: 10px; } /********************************** * カテゴリートップを纏めたボックス * 現状は三つのカテゴリーに分ける **********************************/ #categoriesbox { width: 900px; margin: 10px 55px 10px 55px; } /* 左のボックス */ #categories-left { width: 250px; float: left; margin: 0px 15px 0px 15px; } /*中央のボックス*/ #categories-center { width: 250px; float: left; margin: 0px 15px 0px 15px; } #categories-right { width: 250px; float: left; margin: 0px 15px 0px 15px; } .categoriestitle{ width: 15%; float: left; font-size: 150% } .categories-box { width: 80%; float: right; //background-color: rgb(255,255,255); } /*********************************** * 他のカテゴリーのコンテンツの表示 ************************************/ #anotherbox { width: 550px; margin: 10px 10px 10px 10px; float: left; } #another-center { width: 300px; float: left; margin: 0px 15px 10px 15px; } #anotehr-left { width: 200px; float: left; margin: 0px 15px 0px 0px; } #right { margin: 10px 82px 0px 0px; width: 200px; float: right; } .clear { clear:both; } /* float: right;の解除 */ #footer { padding: 10px 0px 10px 0px; border-top: 1px rgb(0,176,240) solid; text-align: center; } /**************************************************************** * marginは外側の余白。paddingは内側の余白。 * border-topは上の線。solidは実線、1pxは線の太さ。 * solid以外にもdotted(点線)、double(二重線)等が指定出来る。 * 文字通りテキストであればtext-align: center;でセンタリング可能。 *****************************************************************/ .subcontents { margin: 1px 0px 10px 0px; border: 1px rgb(82,243,41) solid; background-color: rgb(207,251,196); } /* サブコンテンツのクラス情報。枠組み*/ .subcontents h2 { margin: 0px; padding: 12px 8px 12px 8px; background-color: rgb(82,243,41); } /* サブコンテンツの表題。パディングで内側の余白を指定し、文字が箱の枠に寄りすぎないようにしている。 */ .subcontents ul { margin: 8px 0px; padding: 0px 4px; } .subcontents li { padding: 2px 0px; list-style-type: none; } /************************************************************************ * 中央と同様に左右サイドバーの項目もリスト項目を適用。 * 横に並べる必要がないためfloatは不要。 * 既に作成しているサイドバーのボックスと幅を合わせるためwidthの指定も不要。 *************************************************************************/ .news ul { margin: 8% 0%; padding: 0% 4%; } .news li { padding: 2% 0px; list-style-type: none; } .advertisement { margin: 0px 0px 10px 0px; } /******************/ /* 広告用ボックス */ /******************/ .sitedescription { margin: 10px 0px 20px 10px; border: 1px rgb(50,200,200) solid; border-radius: 10px; overflow:hidden; } .sitedescription h2 { margin: 0px; padding:12px 8px 12px 8px; background-color: rgb(150,255,255); } .maincontents { margin: 0px 0px 45px 10px; border: 2px rgb(199,213,11) solid; border-radius: 25px; background-color: rgb(250,252,216); overflow:hidden; } .maincontents h2 { margin: 0px; text-align: center; padding: 12px 8px 12px 8px; background-color: rgb(237,246,99); } .maincontents h3 { margin: 0px; padding: 12px 8px 12px 8px; text-align: center; } .maincontents h4 { writing-mode: vertical-rl; margin: 0px; text-align: center; padding: 12px 8px 12px 8px; background-color: rgb(237,246,99); } .maincontents ul { margin: 16px 0px; padding: 0px 4px; } /***************************************************************************************** * maincontentsの中で