[新規ロールオーバーボタンのページを作成して公開]
次に、前回の授業で準備した↓のボタン素材(ジェネレータまたはPhotoshop or Illustrator)を使って作成したものを使って
オンラインジェネレーター
kadaisiteの一つ上の階層にrollover.htmlファイルを新規作成し、
下記の条件にあわせて編集し完成させましょう。
(下記の条件はすべて今までに教科書にでてきたもので、
※P.101〜P.102でかなり省略された中でやったことになっています。)
1.alpha内のパーツの配置は中央配置にする(セレクタ alphaのプロパティーtext-alignのバリューをcenterにする)
まず、alphaの中身を選択し、CSSをクリックし
プロパティのパネルをHTMLからCSSに切り替える
プロパティのパネルの右の方に
中央揃えボタンがあるのでそれをクリック
2.alpha内にロールオーバーボタンを設置し ＝P.112〜P.115
ロールオーバーボタンのリンクをkadaisiteの中のindex.htmlに設定する。
＝P.112〜P.115
3.ボタン下に「↑ボタンクリックでkadaisiteのトップページへ」のテキストを挿入し、
4.フォントファミリーを「ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif」に設定。＝P.98-(６)
5.文字サイズを10pxに設定。=P.98-(7) 文字の色を#53C09Bに設定。=P.99-(9)
6.contentの横幅を500pxにし、
新規CSSボタンを押す(CSSスタイルのパネルの右下)
IDを選択し、contentという名前のセレクタ名を入れてOK
左の「カテゴリ」から「ボックス」を選択
ボックスの横幅(width)を500pxにする。
7.境界線の線種を点線、境界線の色を#09Fにする(border: 1px dotted #09F;)
すべて同一のチェックを外し、styleの項目をdotted(点線)にする。
