CSS
基本 http://web-study.lolipop.jp/felica/issues/0527test_1.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>0527確認テスト：基本</title> <style type="text/css"> * { margin: 0; padding: 0; } #container { margin: 10px; width: 800px; height: 600px; background-color: gray; margin: 10px au…</meta></head></html>
バックアップ用に、トップページをアップします。 http://web-study.lolipop.jp/felica/0525_Cake/index1.html メモ スペルミス、指定の間違いが多い codaのバグ？に注意 footer→containerに入れずに,margin: 0 auto; , width:700px指定 新着情報の上に空き…
floatの崩れを防ぐ方法 floatの回りこみで詰まってしまいました。 が、epikhighさんの「overflow: auto;」をつけろ！で解決しました。正直なぜ解決できるのか、理解できていないのですが・・・ 同じ様な壁にあたった時の為に、忘れないようにします。参考 [C…
【CSS09】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド フォームボタンを設定（できなければ、段落内に画像２つ） http://d.hatena.ne.jp/web-design-advance/20120507/p1
【CSS08】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド http://d.hatena.ne.jp/web-design-advance/20120507/p1
【CSS07】 サイズは適宜、調整すること 定義型リストに「float」の設定が必要 XHTML 1.0 Transitional http://d.hatena.ne.jp/web-design-advance/20120506/p1
【CSS05】 空きはリセットをせず、個別に指定する XHTML 1.0 Transitional http://d.hatena.ne.jp/web-design-advance/20120505/p1
【CSS06】 以下の画像と同じように表示させるCSSを記述しなさい 文字の擬似クラスも設定しなさい（色は自由選択） XHTML 1.0 Transitional 記述場所はエンベッド http://d.hatena.ne.jp/web-design-advance/20120506/p1
【CSS19】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 http://d.hatena.ne.jp/web-design-advance/ CSS 横ナビ02 - jsdo.it - share JavaScript, HTML5 and CSS
【CSS15】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 http://d.hatena.ne.jp/web-design-advance/20120509/p1 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
【CSS14】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 http://d.hatena.ne.jp/web-design-advance/20120509/p1 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
【CSS18】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 http://d.hatena.ne.jp/web-design-advance/ CSS 横ナビ01 - jsdo.it - share JavaScript, HTML5 and CSS
【CSS17】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 画像は作成すること http://d.hatena.ne.jp/web-design-advance/20120509/p1
【CSS16】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 画像は作成すること http://d.hatena.ne.jp/web-design-advance/20120509/p1
【CSS03】空きはリセットをせず、個別に指定する XHTML 1.0 Transitional リストマークは、作成すること 構造主義の四銃士言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の４人です。 ミシェル・フ…
【CSS13】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 上・左からの位置は適宜設定 http://d.hatena.ne.jp/web-design-advance/20120509/p1 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
【CSS12】 以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> …</meta></head></html>
【CSS02】 HTMLの入力に不安がある人は入力から CSSはエンベッド <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS01】 以下の画像と同じように表示させるCSSを記述しなさい 記述場所はエンベッド <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
【CSS15】 この場合、リセットはしない 空きは、すべて50px <p>BOX and PADDING<br> この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p> </body> http://d.hatena.ne.jp/web-design-adva…
【CSS14】 この場合、リセットはしない <h2>BOX and PADDING</h2> <p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p> </body> http://d.hatena.ne.jp/web-design-advance/20120502/p1 h2{…
【CSS13】この場合、リセットはしない <body> <h2>BOX</h2> <p>この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p> </body> http://d.hatena.ne.jp/web-design-advance/20120502/p1 body{ margin:0px; b…
【CSS12】 この場合、リセットはしない 左右均等空き（上下空きは指定しない） http://d.hatena.ne.jp/web-design-advance/20120502/p1 p{ color:white; background-color:#3399FF; font-size:0.5em; margin: 0px 50px; display: block; border: 5px solid #…
【CSS11】この場合、リセットはしない <p>BOX and margin<br> この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。マージンはこのボックスの余白のことをいいます。</p> </body> http://d.hatena.ne.jp/web-design-advance/20120502/p1 p{ color:…
CSS05 背景色と余白 <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><style type="text/css"> body{ padding:3em; margin:0px; } h2{ font-size:1.1em; color:white; background-color:#3914af; margin:0px; padding:1em; } p{ background-color:#dccbff; margin:0px; padding:1em; } </style> </meta></head>
リンクの背景色（擬似クラス） <html xmlms="http://www.w3.org/1999/xhml" lang="ja" xml:lang="ja"> <head> </head></html>
CSS課題：文字の修飾 画像のような表示になるよう指定しなさい 色・文字サイズは自由設定（バランスは考慮すること） 解答は、エンベッド DTDは各自選択 CSS01「文字色と背景色」 <DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS01</title> <style> h1{ font-size:36px; color:#FF8856; } h3{ font-size:px; backgr</meta></head></html></doctype>…
