css2.1
http://www.hyper-portfolio.com/article/?id=96こちらを参考にさせていただきましたところ、そのままというわけにはいきませんでしたが、 なんとかできました。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
ブラウザの大きさを変えても両端に常に背景画像を表示したかった。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *…</meta></head></html>
http://schipperke.hotcom-land.com/hw0720/一応いけるとこまで行きました。 <html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" lang="ja"><head> <head> </head></head></html>
あえてhtml5のタグは使わずやってみた（dtdは面倒なのでhtml5のまま） <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <script src="../js/jquery-1.7.2.min.js"></script> <script src="js/common.js"></script> </link></meta></head></html>
http://okazu.bowls-cafe.jp/これをリメイクする
http://d.hatena.ne.jp/schipperke0614/20120623/p1この部分。 やっと解決。。。。 ミスってた。。。というより認識不足。<a href="xxxxx"><em>リンクテキスト</a>に対してem{ visibility:hidden; }をかけておけば問題ないと思っていたが。。。。 アンカータグにtext-decoration:none…
いや、、、点じゃない線が・・・ 該当部分ＨＴＭＬ <div id="sidemenu"> <h2 id="search"><em>名刺を探す</em></h2> <ul> <li id="l1"><a href="simple.html"><em>シンプルな名刺</em></a></li> <li id="l2"><a href="cool.html"><em>かっこいい名刺</em></a></li> <li id="l3"><a href="pretty.html"><em>かわいい名刺</em></a></li> <li id="l4"><a href="pics.html"><em>写…</em></a></li></ul></div>
本日・・・といっても日が過ぎてますが、授業の中での先生の言葉からのヒントといいイメージのサイトを見つけたため即帰って作業してました。 参考にした元のサイトは既にデザイン変更されていましたが緑基調ということで サイトデザイン変遷 ボックスくみ上…
LightBoxのイメージ つまり単純に言えば、ブラウザの上にposition:absolute指定のdivが二つ乗っているだけです。 LightBox背景 ここに書いてあるものはあくまでも初期設定です。 実は不可視にしてあるだけで存在しています。 ここではposition:fixになってい…
LightBoxとは 授業でもありましたが、そもそもはしたからライトアップして展示するボックスのこと。 Webではブラウザ表示の一番上に表示して写真などを見せる手法 LightBoxをよく見てみる 下の画面は切り替わっていない。 半透明の背景の上にさらに表示部が…
一応下記サイトを少し参考にさせていただきまして、自作しました。 まだスタイルは整っていないのでちょっと恥ずかしいですが、一応成果として載せないと土日に何をしていたんだって話になってしまうので＾＾； 参考にさせていただきましたサイト http://asc…
index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Wants Cake</title> <link type="text/css" rel="stylesheet" href="css/common.css" /> </link></meta></head></html>
header部のレイアウト container幅：800px <html lang="ja"> <head>/> <meta charset="UTF-8"> <title>header（1）</title> </head> <body> <div id="container"> <div id="header"> <h1>Information World</h1> <h2>Technical Information</h2> </div> </div> </body> </html> 作ったソース /* CSS Document */ *{margin:0;…
タイトル画像 タイトル画像はフリー素材のページ http://footage3.openspc2.org/sozai/fullsize/でいただいたものをタイトル画像の大きさ（920×180）にトリミングして使用 背景 背景はイラストレーターで作成した 楕円ツールペンツール、グラデーションのみ…
absoluteの親要素にrelativeを適用しておくことで自由なレイアウトにしやすくなる。 メニューをpositionを使ってレイアウトする この画面を作る
static デフォルト。指定しなければstaticと同意 relative 親要素からの相対位置で場所を決める。cssを指定しなかった場合relative指定しなかった場合の領域も確保される。 absolute ウィンドウの左上からの絶対位置。親要素の位置は無視。cssを指定を指定し…
先生の解答 .nav { font-size: 0.75em; width: 760px; height: 30px; background-color: #393; } .nav ul { margin: 0; padding: 0; list-style-type: none; } .nav li { float: left; } .nav li a:link { color: #FFF; text-align: center; text-decoration…
⇒特になし
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 .nav { margin: 50px; } .nav ul { margin: 0; padding: 0; list-style-type: none; } .nav li { font-size: 0.875em; display: inline; margin: 0 0 0 10px; padding:5px…
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 ＞以下解答（色は合わせていません） <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" xml:lang="ja" lang="ja"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 幅は適宜設定 ＞以下解答 <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" xml:lang="ja" lang="ja"> <head> </head></html>
下記の要素を作る floatのオブジェクトを抱えるブロック要素を作る wrapperの幅700px containerの幅500px sidebarの幅200px #wrapper{ margin:20px auto; width:700px; height:auto; background-color:#0000CD; overflow:auto; } #content{ float:left; widt…
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 画像は作成すること ＞以下解答 <html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>
キーとなるCSSプロパティ background-image:url(画像URL); background-repeat:リピート方向また、背景画像の高さを確認し、a li のline-heightを設定する。 今回自分でうまくいかなかったこと a:visitedの際にbackground-imageを変えようとしたがうまくいか…
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 画像は作成すること ＞以下解答 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </meta></head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 ＞visitedだけ効かない。。。。CSSチェックは通ってるのに。 <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" xml:lang="ja" lang="ja"> <head> </head></html>
以下の画像と同じように表示させるCSSを記述しなさい 擬似クラスで指定 上・左からの位置は適宜設定 ＞以下解答 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
