CSS課題
出来ました。 制作時間：１時間 電車の中でコーディング。桜上水駅あたりで完成。 http://felica.boy.jp/shinonome/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>東雲庵</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </link></meta></head></html>
最小３列、最大５列に並ぶ可変グリッド + Lightbox 出来ました。 http://felica.boy.jp/no3design/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>no3 DESIGN</title> <link rel="stylesheet" href="css/jquery.lightbox-0.5.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>
完成しました。昨日から、1時間半作業したので合計4時間半。 ちょっと時間かかりすぎました・・・ もう少しハイペースにコーディングできないとプロになれないと痛感します。今、そこが弱いところです。 http://felica.boy.jp/kitchenware/×つっかかったとこ…
とりあえず途中まで出来ました。あとは右下のスタイル整えて、jQueryって感じです。 制作時間3時間 http://felica.boy.jp/kitchenware/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Kitchenware Club</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>
◎fatwebstudyさんのご要望 IE対策を、短いコードで書いたらどうなるんですか？の疑問に答えてみました。短いってのをテーマにすると、ちょっと難しそうでしたがなんとかなりました。 細かなズレはキャプチャで見る分はなかったです（MacなのでIE【IEtester含…
完成しました。 制作時間30分 http://felica.boy.jp/tanosiiokazu/ 短いコードは美しい！ってことで、CSSを結構削って作成してみました。バランス調整で2行（padding: 10px 0 10px 0; overflow: hidden;）余計なもの入っているので、CSSは15行→13行で完了。 …
前の記事のコードを見返したら、CSSに無駄なコードがあったので、短縮。 11行で再現しました。これ以上は無理っぽいっす。 @charset "UTF-8"; * { margin: 0; padding: 0; } article { width: 960px; margin: 10px auto; overflow: hidden; } header,section…
擬似クラスを含むレイアウト：まとめ 作業時間：1時間10分 http://felica.boy.jp/css-kadai/0604/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSレイアウトまとめ</title> <link rel="stylesheet" href="base.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <p></p></div></div></body></html>
ケーキサイトより難しかった・・・ http://felica.boy.jp/xhtml-css/index.html HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>XXXコーポレーション</title> <link rel="stylesheet" href="style.css" media="screen,print"> </head> <body> <div id="container"> <h1>XXXコーポレーション XHTML＋CSS</h1> </div></body></html>
各ブロック同士の空きは、「10px」 幅「800px」を前提に、他の数値の変化は適宜おこなうこと作業時間15分 http://felica.boy.jp/css-kadai/0528/index2.html HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認テスト（2）</title> <link rel="stylesheet" href="index2.css" media="screen,print"> </head> <body> <div id="container"> </div></body></html>
以下の指示通りに表示するよう記述しなさい。 DTD・セレクタ名・背景色は、自由選択 ナビゲーションは、擬似クラスを設定すること 各ブロック同士の空きは、「0」 可変しないものとする 記述実践 作業時間15分 http://felica.boy.jp/css-kadai/0528/ HTML <html lang="ja"> <head> <meta charset="UTF-8"></meta></head></html>…
作業時間：5時間 ↓ http://felica.boy.jp/cakeshop/index.html ↑ html index <html lang="ja"> <head> <meta charset="UTF-8"> <title>ホーム｜Wants Cake</title> <link rel="stylesheet" href="css/base.css" media="screen,print"> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> </html>
解答（角丸は途中） http://felica.boy.jp/css-kadai/0527 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションの復習</title> <link rel="stylesheet" href="nav.css" media="screen, print"> </head> <body> <div id="tate"> <ul> <li><a href="#">HTML+CSS</a></li> <li><a href="#">JavaScript</a></li></ul></div></body></html>
上げ忘れてました。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで 記述場所はエンベッド XHTML 1.0 Transitional テキスト無し（すべて画像で、代替文字は空） <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで 記述場所はエンベッド XHTML 1.0 Transitional 背景画像は作成する（アプリケーションは自由選択） メニューは擬似クラスで指定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド フォームボタンを設定（できなければ、段落内に画像２つ） <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
サイズは適宜、調整すること 定義型リストに「float」の設定が必要 XHTML 1.0 Transitional <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> …</meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>横ナビ</meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>横ナビ</meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>横ナビ</meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>横ナビ</meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 文字の擬似クラスも設定しなさい（色は自由選択） XHTML 1.0 Transitional 記述場所はエンベッド <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
空きはリセットをせず、個別に指定する XHTML 1.0 Transitional <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 背景画像は作成する 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 マーク画像は作成する 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 現在位置とマウスーオバーの挙動と区別する 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>擬…</meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 上・左からの位置は適宜設定 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>擬…</meta></head></html>
