CSS
【CSS3】 授業でCSS3の勉強をしましたが、その流れで 小学校のHPを作ってみました。
【cssでポップアップ】
【CSS09】 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css09</title> <style type="text/css"> *{ m…</meta></head></html>
【CSS08】・以下の画像と同じように表示させるCSSを記述しなさい ・リセットは、全称セレクタで ・XHTML 1.0 Transitional ・記述場所はエンベッド <html> <head> <title>css08</title> <style type="text/css"> *{ margin:0; padding:0; border:none; list-style-type:none; font-style:normal; font-weight:no</head></html>…
【CSS07】 ・サイズは適宜、調整すること ・定義型リストに「float」の設定が必要 ・XHTML 1.0 Transitional <html> <head> <title>css07</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style-type: none; } body{ font-family:"メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-se</head></html>…
【CSS06】・以下の画像と同じように表示させるCSSを記述しなさい ・文字の擬似クラスも設定しなさい（色は自由選択） ・XHTML 1.0 Transitional ・記述場所はエンベッド <html> <head> <title>css06</title> <style type="text/css"> body{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Me</head></html>…
【CSS05】・空きはリセットをせず、個別に指定する ・XHTML 1.0 Transitional <html> <head> <title>css05</title> <style type="text/css" > body{ font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", margin:auto; width:400px; }</head></html>…
【CSS04】・空きはリセットをせず、個別に指定する <html> <head> <title>css04</title> <style type="text/css"> body{ font-family:Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro W3", Osaka, sans-serif; width:470; } h1{ color:#5A9B73; font-weight:bold; font-size:1.3em; b</head></html>…
【CSS02】・HTMLの入力に不安がある人は入力から ・CSSはエンベッド <html> <head> <title>css02</title> <style type="text/css"> body{ } h1{ color:#fff; background-color:#97CD9B; text-align:center; } p{ color:#8C939D; } adress{ color:#97CD9B; text-align:center; border-top:solid 5px; } body,adre</style></head></html>…
【CSS01】？・以下の画像と同じように表示させるCSSを記述しなさい ・記述場所はエンベッド <html> <head> <title>css16</title> <style type="text/css"> div#shopping{ width:300px; border:dotted 1px; padding:3px; } h2{ color:#fff; background-color:#006CCF; } ul{ list-style-type:none; } li{ border-</head></html>…
【CSS014】・この場合、リセットはしない <html> <head> <title>css14</title> <style type="text/css"> h2{ color:#fff; background-color:#629665; font-size:2.0em; } p{ color:#fff; background-color:#95C998; font-size:1.0em; } h2,p{ margin:0; padding:15px; width:400px; } </style> </head> <body> <h2>BOX and PADDING</h2> <p>…</p></body></html>
【CSS013】・この場合、リセットはしない <html> <head> <title>css13</title> <style type="text/css"> body{ margin-left:0; background-image: url("CSS13.jpg"); background-repeat: repeat-y; } h2{ color:#fff; width:70px; margin-left:0; background-color:#D147CE; } p{ margin-left:70px; font-size:1</head></html>…
【CSS12】・ この場合、リセットはしない ・ 左右均等空き（上下空きは指定しない） <html> <head> <title>css12</title> <style type="text/css"> p{ color:#fff; margin-top: 50px; margin-right:auto; margin-left:auto; background-color:#009EFF; font-weight:bold; line-height: 1.5; padding: 3px; width</head></html>…
【CSS011】・この場合、リセットはしない <html> <head> <title>css11</title> <style type="text/css"> p{ color:#fff; margin-top: 50px; margin-right:50px; margin-left:50px; margin-color:50px; background-color:#009EFF; font-weight:bold; line-height: 1.6; padding: 3px; width : 300px; } </style> </head> <body> <p>BOX and</p></body></html>…
【CSS10】・背景画像（繰り返さない <html> <head> <title>css10</title> <style type="text/css"> body{ background-image: url("CSS10.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1{ font-size:1.85em; font-family: serif; } p{ width: 320px; } h1,p{ margin: 40px 40px 0 160</style></head></html>…
【CSS015】・この場合、リセットはしない ・空きは、すべて50px <html> <head> <title>ccs15</title> <style type="text/css"> body{ background-color:#CCCCCC; margin:15px; } p{ color:#58A6CD; padding:50px 50px 50px 50px; font-size:1.5em; background-color:#fff; border-style: solid; } </style> </head> <body> <p>BOX and PA</p></body></html>…
【CSS08】・背景画像を設定（垂直方向に繰り返し） <html> <head> <title>背景画像を設定(水平方向に繰り返し)</title> <style type="text/css"> body{ background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415205559.jpg"); background-repeat:repeat-y;</style></head></html>…
【CSS07】・背景画像を設定（水平方向に繰り返し） <html> <head> <title>背景画像を設定(水平方向に繰り返し)</title> <style type="text/css"> body{ background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-advance/20120415/20120415205559.jpg"); background-repeat:repeat-x;</style></head></html>…
【CSS09】・背景画像と枠線 <html> <head> <title>css09</title> <style type="text/css"> body{ margin:0; background-color:#fff; background-image: url("CSS09.jpg"); background-repeat: repeat-y; } h1{ color:#860B1D; border-bottom:dashed 4px #999; } p{ color:#333 } h1,p{ padding: 5px 20px; margi</head></html>…
【CSS06】 ・背景画像を設定 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>【CSS06】</title> </meta></head></html>
【CSS05】・背景色と余白 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
【CSS04】 リンクの背景色（擬似クラス） <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
【CSS03】リンクの文字色（擬似クラス） <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
【CSS01】 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
【CSS02】 ・文字色と背景色 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
