10月4日の学習

授業

学習内容

10/3学習のwrapperについて
  1. wrapperを設定し、下にmarginをかけ、sidebarとcontentを押し下げた場合、footerの「clear：both」は入力不要（wrapperのmarginおよびoverflowがclear：bothと同じ働きをする）
  2. wrapperでwidthのみ設定し、sidebarおよびcontentにmarginを下にかけ、footerでclear：bothを設定しても良い。
注意
  • clearは上余白の指定ができない。
  • wrapperのbackground-colorが『白』の際は1.の方が良いが、background-colorに色をつける際は2.で設定をする 　※テキスト P48〜51参照
疑似クラス
  • 『"#"』　Nullリンク・・・値を持たないリンク
    ブラウザでリンクの指マークにする必要はあるが、リンクさせない時に使用（エラーにならない）
  • 疑似クラスの種類（入力順）
    1. link・・・通常リンク（未アクセス）のスタイル
    2. visited・・・アクセス済みリンクのスタイル
    3. hover・・・ポイント時のスタイル
    4. active・・・アクティブ時のスタイル（NET環境の改善により最近はあまり使用されない）
  • リンクボタン（アンカー内容）に適用
    • a:link { プロパティ : 値 ; }　
    • a:visited { プロパティ : 値 ; }　
    • a:hover { プロパティ : 値 ; }　
    • a:active { プロパティ : 値 ; }　
  • スタイルシート入力
    • div,ul,li,a{margin:0; padding:0;}を必ず入力する
    • 子孫セレクタによりリストに適用
      • 例）#nav li a:list{color: #0000FF; text-decoration: none;}
    • #nav ul{list-style-type:none}を入力し、ul,liの「●」を未表示にする
  • 縦並びの場合
    • #nav liにmargin-bottomとline-heightを設定する
  • 横並びの場合
    • #nav liにdisplay:inlineとmargin-rightを設定する
      • ※displai:inlineは縦のものを横に並べる。よって、navの幅指定をしないと、ブラウザの幅を変えた場合、勝手に改行されてしまう。
    • ページ下のフッター等の記載に良いが、少し弱い。メインメニューには不向き。
  • html入力方法
 <div id="nav>
 <ul>
 <li><a href="#">リンク1</li></a>
 <li><a href="#">リンク2</li></a>
 <li><a href="#">リンク3</li></a>
 </ul>
 </div>

【イラストレータ−】

  • 複合パス
    • 重なっているものをひとつのオブジェクトにする機能
    • ※ペンツールで文字を作成した場合、複合パスでひとつにする必要がある
  • 線のバリエーション
    • 線端…線の形を変更
    • 破線…線の間隔をあける
      線端を丸で設定の場合は「線分」を０，「間隔」を線幅の2倍以上にする（以下だと重なる）
    • ショートカットキー　CTRL+F 前面ペースト，　CTRL+B　後面ペースト
      （レイヤーをまたがって同じ位置にペーストの場合は、「同じ位置にペースト」を使用）
  • 文字ツール
    • 「テキストツール」を選択し画面上クリックしてから入力
    • 「字体」はビットマップ
    • トラッキング・・・文字と文字の間を調整
    • 欧文の時は「カーニング」で文字間を調整する
    • WEBで使用の際は文字詰めをしない（DTPと異なる）