CSS練習課題：縦ナビ

授業

以下の画像と同じように表示させるCSSを記述しなさい <html lang="ja"> <head> <meta charset="UTF-8"> <title>正しく構造化されたHTMLの例（CSSが適用されている場合）</title> <link rel="stylesheet" href="css/style.css" media="screen, print"> </head> <body> <div id="shopping"> <h2>今日買った物</h2> <ul> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> …</ul></div></body></html>

2012-11-29

色々なセレクタ

授業

セレクタidセレクタサイトをレイアウトするためのdiv要素など、ページ内で１回しか出てこない部分を指定するようにする。 <h1 id="colorgreen">大見出し要素</h1> .クラスセレクタ同じ要素の中で特定の部分にだけスタイルを適用させたい場合に使う。同じページ内で複数の場所に指定が…

2012-11-29

CSS

授業

リンクの文字色（擬似クラス）【以下のような表示を作りなさい】 <body> <ul> <li><a href="#">LINK-link-coral</a></li> <li><a href="#">LINK-visited-turquoise</a></li> <li><a href="#">LINK-hover-skyblue</a></li> <li><a href="#">LINK-active-lawngreen</a></li> </ul> </body> </html> <html lang="ja"> <head> </head></html>

2012-11-28

レンガからでもいい。少しずつ前へ。

授業

スタイルシート line-height(ラインハイト）行の高さ。（×→行間ではないので注意。）ラインハイトをうまく使うことで、paddingのように四方を設定せずにも使える。*大きさは％、em、pxがあるが、基本【％】か【em】。 photoshop Ctrl+Rキーでルーラーを出…

2012-11-27

ボックス

授業

ボックスボックスはWebブラウザでは長方形の領域で表示される領域 border（境界線）：ボックスの外枠となる部分 pading（余白）：ボーダー辺に対し、コンテントの読みやすさを確保するために空ける空間を指す margin（マージン）：ブロックとブロックの間の…

2012-11-26

より見栄えの良いものにするために

授業

table内のセルを統合しよう rowspan＝上下に統合 colspan＝左右に統合３×３のtableをつくって、１と４を上下に、５と６を左右につなぐ記述↓ <table border="1" width="500"> <tr> <td rowspan="2">14</td> <td>2</td><td>3</td> </tr> <tr> <td colspan="2">56</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> リンクをつけようリンクをつけたい文字の前後につける。【 _blank】は別ウィンドウで開く…

2012-11-25

月例テスト第1回

メモ

（1）URLとはURLとは［ Uniform Resource Locator ］の略で［ Webサイトのアドレス］を示す場所です。URLには、［絶対パス］と［相対パス］の２通りの指定方法があります。「http://」は、［ Hypertext Transfer Protocol ］と呼びます。「www.」は、［…

2012-11-23

スタイルシート

授業

色や文字の大きさなど、styleを変えることをエンベッドという。 (例）h1{ color: #ff0000; } 適用先のことをセレクタと呼ぶ。色は０〜９とA〜Fを組み合わせた６つの要素でできている。０が最小、fが最大。 (例）＃ff0000 ６つの数字のうち、２桁ずつでＲ・…

2012-11-21

illustrator、HTML

授業

illustrator リフレクトツール回転ツール拡大・縮小ツールグループ＆整列ツール Shift,Alt,Ctrlキーなどを組み合わせた左手の操作が作業効率をUPさせるので習得しよう。HTML <p> <html lang="ja"> <head> <meta charset="UTF-8"> </head> </html> </p> ul：unordered list＝リスト順序無し。黒丸。 ol：ordered list＝順序…