ナビゲーションメニュー作成 - CSSなしで作成 -
CSSなしでナビゲーションメニューに画像を貼付けて作成する方法
- ソース -
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>ナビゲーション</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divid="nav"> <ul> <li><ahref="#"><imgsrc="img/01.jpg"width="160"height="40"alt="ホーム"onmouseover="this.src='img/01_o.jpg'"onmouseout="this.src='img/01.jpg'"></a></li> <li><ahref="#"><imgsrc="img/02.jpg"width="160"height="40"alt="カフェフード"onmouseover="this.src='img/02_o.jpg'"onmouseout="this.src='img/02.jpg'"></a></li> <li><ahref="#"><imgsrc="img/03.jpg"width="160"height="40"alt="カフェドリンク"onmouseover="this.src='img/03_o.jpg'"onmouseout="this.src='img/03.jpg'"></a></li> <li><ahref="#"><imgsrc="img/04.jpg"width="160"height="40"alt="インフォメーション"onmouseover="this.src='img/04_o.jpg'"onmouseout="this.src='img/04.jpg'"></a></li> <li><ahref="#"><imgsrc="img/05.jpg"width="160"height="40"alt="お問い合わせ"onmouseover="this.src='img/05_o.jpg'"onmouseout="this.src='img/05.jpg'"></a></li> </ul> </div> </body> </html>
- CSS -
@charset "UTF-8"; body, div, ul, li { margin: 0; padding: 0; } ul { list-style: none; overflow: hidden; } img { border: none; vertical-align: bottom; } a { text-decoration: none; } #nav { width: 800px; margin: 50px; } li { float: left; }
※補足
onmouseover="this.src='画像'" は、マウスをボタンの上に置いた時の画像設定
onmouseout="this.src='画像'" は、マウスをボタンの上からはなれた時の画像設定
参考ページ
JavaScript Reference : onMouseOver
CSSは必要なし！onmouse属性を使った簡単なロールオーバーの作り方
ナビゲーションメニュー作成 - CSS Spritesで設定 -
CSSを使ってナビゲーションメニューに画像を貼付けて作成する方法
- ソース -
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>CSS Sprites</title> <linkhref="css/style.css"rel="stylesheet"> </head> <body> <divid="nav"> <ul> <liid="home"><ahref="#"><em>ホーム</em></a></li> <liid="food"><ahref="#"><em>カフェフード</em></a></li> <liid="drink"><ahref="#"><em>カフェドリンク</em></a></li> <liid="info"><ahref="#"><em>インフォメーション</em></a></li> <liid="contact"><ahref="#"><em>お問い合わせ</em></a></li> </ul> </div> </body> </html>
- CSS -
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } em { visibility: hidden; } /* nav */ #nav { width: 800px; height: 60px; margin: 50px 0 0 50px; } #nav ul { overflow: hidden; } #nav li { float: left; } #nav li a { display: block; width: 160px; height: 60px; background-image: url(../images/btn1013.jpg); background-repeat: no-repeat; } /* individual */ #nav li#home a { background-position: left 0; } #nav li#home a:hover, #nav li#home a:active { background-position: left -80px; } #nav li#food a { background-position: -160px 0; } #nav li#food a:hover, #nav li#food a:active { background-position: -160px -80px; } #nav li#drink a { background-position: -320px 0; } #nav li#drink a:hover, #nav li#drink a:active { background-position: -320px -80px; } #nav li#info a { background-position: -480px 0; } #nav li#info a:hover, #nav li#info a:active { background-position: -480px -80px; } #nav li#contact a { background-position: right 0; } #nav li#contact a:hover, #nav li#contact a:active { background-position: right -80px; }
参考ブログ
6/27(金) 授業メモ
今日もグラフィックデザインでした。
作成した作品はこちらです。
文字変形
※文字の変形は、文字をアウトライン化し変形したいパスをダイレクト選択ツールで選択し変形。
日本地図
使用ツール等：長方形ツール、ペンツール、パスファインダ、角を丸くする、シアーツール、グラデーションツール
参考ページ：Adobe Illustrator Help
※シアーツールを使う事で日本列島を斜めに変形出来る。
Green
使用ツール等：ペンツール、多角形ツール、文字ツール、移動、透明、メッシュツール
参考ページ：MdN Design Interactive
※背景の丸はメッシュツールを使ってグラデーションをつけました。
コーヒーカップ
使用ツール等：楕円形ツール、ペンツール、パスファインダ、グラデーションツール
〜先生からの指摘〜
画像はリンクさせない！→ 解決方法は、画像を配置する時にリンクのチャックを外す事。今日、気がつきました。
コーヒーカップが立体的に見えない！→ グラデーションの付け方はホントに難しいです。陰影の付け方を工夫する。
6/26(木) 授業メモ
今日はグラフィックデザインでスイーツ書籍のチラシのデザインをカラー.ver と モノクロ.ver の２種類をしました。
〜授業メモ〜
紙媒体(AIで)に切り抜き写真を使うためにphotoshopで切り抜く時は、クリッピングパスを使う。
「Web用に保存」でPNG形式で保存は使わない方が良い。
クリッピングパスを使う時は、平滑度の設定はせずに保存する。
保存形式は、EPSで。
PS設定で紙媒体に使う画像作成時は、モード→CMYK, 8bit に。
epsは改行を取り除いている
Illustratorで画像を貼付ける時は、画像はリンクではなくて埋め込みにする方がいい。
PS, AI はプログラム的に考えて作成だとGood!
イメージセッターはps3
Illustratarでテキストの読み込み
文字セットはShiftJISを使わないと文字化けする
金赤の設定は c:0% m:100% y:100%
文字を連結するためには、スレッドテキストオプションを使う
文字等、紙媒体のときの黒の設定はオーバープリントブラック
編集→カラーを編集→オーバープリントブラック
リッチブラック
-グラフィックデザイン（スイーツの本）の指摘-
レイヤーはあまり作らないほうがいい 理由）重くなる。どのレイヤーに入れたか忘れるから
グループもあまり作らないほうがいい 理由）作業中イラッとする
課題に対して先生は何を取得してほしいのかを悟って作るとGood!だよ
いかに早く作るかが重要
ガイドをなるべく多く使うようにする←なぜこのレイアウトなのかを知ってもらえる
編集されることも考えて作る
同じレイアウトがあったらコピペする←写真も貼り付けちゃってコピペしていいよ！
写真は、あとで置き換えすればいい
置き換え方は、置き換える画像を選択して、配置で置き換えにチェックをつけて配置する。
デザインは文字を美しく見せられるかが重要です。
美しくみせる工夫は難しいです！
6/25(水) 授業メモ
今日の授業で、問合せフォームの作成確認をしました。
先生が作成で使用していたタグの意味をメモしました。
<th scope="col">見出しセル</th>
scope属性を指定すると、そのセルがどちらの方向に対する見出しであるかを明示することができます。
値
row … そのセルが、横列に対する見出しであることを示します。
col … そのセルが、縦列に対する見出しであることを示します。
rowgroup … そのセルが、行グループ（thead、tfoot、tbody）に対する見出しであることを示します。
colgroup … そのセルが、列グループ（colgroup）に対する見出しであることを示します。
<EM>タグはEmphasisの略で、テキストを強調する際に使用します。
<LABEL>タグはフォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素です。これによりチェックボックスやラジオボタンでは、関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。
<LABEL>タグの使用方法は2通りあります。 1つは<LABEL>タグのfor属性の値と、フォーム部品のid属性の値を同じものにすることで両者を関連付ける方法です。 もう1つは<LABEL>～</LABEL>内にフォーム部品とテキストを含める方法です。後者の方法は、Internet Explorer5や6には対応していないようなので、できるだけ前者を用いた方が良いでしょう。
<OPTGROUP>は、セレクトボックスの選択肢（<OPTION>～<OPTION>）をグループ化するタグです。
<OPTGROUP>タグに対応したブラウザでは、セレクトボックスの選択肢が階層化されて表示されます。<OPTGROUP>のlabel属性の値が第一階層となり、 <OPTGROUP>～</OPTGROUP>内にある <OPTION>のlabel属性の値がその下の階層となります。
参照サイト：HTMLクイックリファレンス
私が記述したHTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム確認テスト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<table border="1">
<tr class="indispensable"><th>お名前<span>（必須）</span></th><td><input type="text" name="name" size="22" placeholder="東京太郎" autofocus required></td></tr>
<tr><th>郵便番号</th><td><input name="zip" id="zip" size="6" placeholder="123">-<input name="zip1" id="zip1" size="8" placeholder="4567"></td></tr>
<tr><th>都道府県</th>
<td><select name="Prefectural">
<option value="" selected>選択して下さい
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</select></td></tr>
<tr><th>市町村・番地</th><td><input type="text" name="Address" id="Address" size="56" placeholder="例）品川区南大井1-2-3" required></td></tr>
<tr><th>アパート・マンション名</th><td><input type="text" name="" id="" size="56" ></td></tr>
<tr class="indispensable"><th>E-Mailアドレス<span>（必須）</span></th><td><input type="email" name="email" id="email" size="56" requied></td></tr>
<tr class="indispensable"><th>お問い合わせの種類<span>（必須）</span></th><td><input type="radio" name="inquiry_type" id="inquiry_type">このサイトについての問い合わせ<br>
<input type="radio" name="inquiry_type" id="inquiry_type">弊社の業務内容についてのお問い合わせ<br>
<input type="radio" name="inquiry_type" id="inquiry_type">その他のお問い合わせ</td></tr>
<tr class="indispensable"><th>お問い合わせ内容<span>（必須）</span></th><td><textarea name="note" id="note" cols="50" rows="20"></textarea></td></tr>
</table>
<input type="submit" value="確認画面へ">
</div><!-- /#container -->
</body>
</html>
style.css
@charset "utf-8";
/* reset */
html, body, div, table, tr, th, td {
margin: 0;
padding:0;
}
/* layout */
#container {
margin: 50px;
}
table {
margin-bottom: 10px;
border-collapse: collapse;
border-left: solid 5px gray;
}
th {
background-color:lightgray;
width: 250px;
}
th span {
color: red;
}
.indispensable {
border-left: solid 5px red;
}
td {
width: 380px;
background-color: aliceblue;
}
<span>を<em>に変更して使おうと思いました。
<LABEL>と<OPTGROUP>はとても使えるな〜と思いました。
先生記述例
index.html
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>フォームのスタイルを設定する</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <formaction="check.php"method="post"id="inquiry"> <table> <tr> <thscope="row"class="must"><labelfor="name">お名前<em>（必須）</em></label></th> <td><inputtype="text"name="name"id="name"size="30"class="text1" placeholder="例：鈴木一郎" autofocus required></td> </tr> <tr> <thscope="row"><labelfor="postcode1">郵便番号</label></th> <td> <inputtype="text"name="postcode1"id="postcode1"size="3"maxlength="3"class="text2" placeholder="123"> - <inputtype="text"name="postcode2"id="postcode2"size="4"maxlength="4"class="text2" placeholder="4567"> </td> </tr> <tr> <thscope="row"><labelfor="prefecture">都道府県</label></th> <td> <selectname="prefecture"id="prefecture"> <optionvalue=""selected="selected">選択してください</option> <optgrouplabel="北海道・東北地方"> <optionvalue="北海道">北海道</option> <optionvalue="青森県">青森県</option> <optionvalue="岩手県">岩手県</option> <optionvalue="宮城県">宮城県</option> <optionvalue="秋田県">秋田県</option> <optionvalue="山形県">山形県</option> <optionvalue="福島県">福島県</option> </optgroup> <optgrouplabel="関東地方"> <optionvalue="茨城県">茨城県</option> <optionvalue="栃木県">栃木県</option> <optionvalue="群馬県">群馬県</option> <optionvalue="埼玉県">埼玉県</option> <optionvalue="千葉県">千葉県</option> <optionvalue="東京都">東京都</option> <optionvalue="神奈川県">神奈川県</option> </optgroup> <optgrouplabel="中部地方"> <optionvalue="新潟県">新潟県</option> <optionvalue="富山県">富山県</option> <optionvalue="石川県">石川県</option> <optionvalue="福井県">福井県</option> <optionvalue="山梨県">山梨県</option> <optionvalue="長野県">長野県</option> <optionvalue="岐阜県">岐阜県</option> <optionvalue="静岡県">静岡県</option> <optionvalue="愛知県">愛知県</option> </optgroup> <optgrouplabel="近畿地方"> <optionvalue="三重県">三重県</option> <optionvalue="滋賀県">滋賀県</option> <optionvalue="京都府">京都府</option> <optionvalue="大阪府">大阪府</option> <optionvalue="兵庫県">兵庫県</option> <optionvalue="奈良県">奈良県</option> <optionvalue="和歌山県">和歌山県</option> </optgroup> <optgrouplabel="中国地方"> <optionvalue="鳥取県">鳥取県</option> <optionvalue="島根県">島根県</option> <optionvalue="岡山県">岡山県</option> <optionvalue="広島県">広島県</option> <optionvalue="山口県">山口県</option> </optgroup> <optgrouplabel="四国地方"> <optionvalue="徳島県">徳島県</option> <optionvalue="香川県">香川県</option> <optionvalue="愛媛県">愛媛県</option> <optionvalue="高知県">高知県</option> </optgroup> <optgrouplabel="九州地方"> <optionvalue="福岡県">福岡県</option> <optionvalue="佐賀県">佐賀県</option> <optionvalue="長崎県">長崎県</option> <optionvalue="熊本県">熊本県</option> <optionvalue="大分県">大分県</option> <optionvalue="宮崎県">宮崎県</option> <optionvalue="鹿児島県">鹿児島県</option> <optionvalue="沖縄県">沖縄県</option> </optgroup> <optionvalue="日本国外">日本国外</option> </select> </td> </tr> <tr> <thscope="row"><labelfor="address1">市区町村・番地</label></th> <td><inputtype="text"name="address1"id="address1"size="56"class="text3" placeholder="例：豊島区池袋南池袋３－７－９"></td> </tr> <tr> <thscope="row"><labelfor="address2">アパート・マンション名</label></th> <td><inputtype="text"name="address2"id="address2"size="56"class="text3" placeholder="例：スカイマンション101号"></td> </tr> <tr> <thscope="row"class="must"><labelfor="email">E-Mailアドレス<em>（必須）</em></label></th> <td><inputtype="email"name="email"id="email"size="56"class="text3" placeholder="例：xxx@xxx.com" required></td> </tr> <tr> <tr> <thscope="row"class="must">お問い合わせの種類<em>（必須）</em></th> <td> <inputname="category"id="category1"type="radio"value="このサイトについてのお問い合わせ" required> <labelfor="category1">このサイトについてのお問い合わせ</label><br> <inputname="category"id="category2"type="radio"value="弊社の業務内容についてのお問い合わせ"> <labelfor="category2">弊社の業務内容についてのお問い合わせ</label><br> <inputname="category"id="category3"type="radio"value="その他のお問い合わせ"> <labelfor="category3">その他のお問い合わせ</label> </td> </tr> <tr> <thscope="row"class="must"><labelfor="content">お問い合わせ内容<em>（必須）</em></label></th> <td><textareaname="content"id="content"cols="40"rows="15"class="text4" placeholder="お問い合わせ内容を入力してください。" required></textarea></td> </tr> </table> <divclass="submit"><inputtype="submit"value="確認画面へ"></div> </table> </form> </body> </html>
style.css
@charset "UTF-8"; /* reset */ html, body, div, table, tr, th, td, form { margin: 0; padding: 0; line-height: 1.0; } a { text-decoration: none; } table { border: none; border-collapse: collapse; } /* body */ body { font-size: 14px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.5; color: #333; background-color: #FFF; } /* table */ #inquiry { width: 600px; margin: 50px auto; } #inquiry table { border-top: 1px solid #CCC; border-right: 1px solid #CCC; font-size: 100%; width: 100%; } #inquiry td { border-top: none; border-bottom: 1px solid #CCC; border-left: none; border-right: none; padding: 10px; } #inquiry th { border-top: none; border-bottom: 1px solid #CCC; border-left: 6px solid #CCC; border-right: none; background-color: #F3F3F3; font-weight: normal; padding: 10px; width: 200px; } #inquiry th.must { border-left-color: #D90000; } #inquiry th em { font-style: normal; color: #FF0000; padding-left: 5px; } .text1,.text2,.text3,.text4 { border: 1px solid #CCC; background-color: #F3F3F3; padding: 2px; } .text1 { width: 100px; } .text2 { width: 4em; } .text3 { width: 98%; } .text4 { width: 98%; } #inquiry select { border: 1px solid #CCC; background-color: #F3F3F3; } #inquiry .submit { text-align: center; margin-top: 30px; }
6/24(火) 授業メモ
今日の授業の流れは、
①CSS3の演習テスト実施
②Webフォント
③svg画像を作成
④シンタックスハイライターについて
⑤zen-codingについて
〜メモ〜
①GoogleFonts
i ) GoogleFontsを開く
ii ) 使いたいフォントを探す
iii ) 選んだら 矢印マーク（Quick Use）を押す
iv ) 必要なフォントの太さにチェックを付ける
v ) 3. Add this code to your website: のURLをコピーし、ソース(HTML)のheadに貼付ける。
vi ) 4. Integrate the fonts into your CSS: にフォント設定のCSSが表示されているのでコピーして、CSSにペーストする。
②rogoをsvg形式で作成する。
i ) rogoをイラストレーターで作りsvg形式で保存する。
ii ) svgは画像が拡大縮小しても崩れない(ぼけない)
iii ) svgで保存するときに「svgコードを表示...」が表示されるのでクリックするとコードが表示される。
iv ) イラストレーターで描いた rogo の覆う大きさの四角を描き最背面に
v ) iv )で描いた四角を選択する
vi ) オブジェクト→アートボード→アートボードに変換
vii) スマホなどのデバイスの画質が高精細になってきているので、pngまたはsvgで保存する。jpgはぼけてしまう。
viii) pngは基本的に圧縮する。
iv) macでpngを圧縮するには imagealpa を使う。
〜その他〜
AIで文字を斜めに編集するにはシアーツールを使う。
ただし文字をアウトライン化しないとダメ。
CSS3 演習問題
CSS3 演習問題 の解答
【問１】CSS3で影をつける場合の、プロパティ名を２つ書きなさい
※ 答えをクリックすると詳しい内容がわかります。
【問２】CSS3で影をつける場合、プロパティに設定する4つのパラメータ
のうち、1つ目のパラメータは何を設定するか書きなさい
【答２】X軸方向（横方向）のずれの距離
※ 参照サイトへ
【問３】CSS3で角を丸くする場合の、プロパティ名を書きなさい
【答３】border-radius
※ 参考ページ
【問４】CSS3で角を丸くする場合の、値は何を設定しているかを書きなさい
【答４】角を丸くする円の半径
※ 参考ページ
【問５】Chromeとサファリのベンダープレフィックスを書きなさい
【答５】-webkit-
※ -moz- は Firefox
※ -ms- は Internet Explorer
【問６】CSS3で直線的なグラデーションをつける場合の、プロパティを
書きなさい（ベンダープレフィックスは、記述しない）
【答６】background-image: linear-gradient( )
※ 参考ページ
【問７】半透明の表現をするには、対象の要素に対してどの関数を設定すれば
よいか書きなさい
【答７】rgba( )
※ a はアルファの意
※ 参考ページ
【問８】CSS3で要素を回転したり、拡大縮小したり、歪曲させること設定する
プロパティは何か書きなさい
【答８】transform
※ 参考ページ
【問９】Webの通常フォント以外のフォントを使用したい場合、どの
ディレクティブで使用するフォントを定義する必要があるか書きなさい
【答９】@font-face
【問10 】次のスタイルは、どのような設定か説明しなさい
td:nth-child(n+2) { text-align: right; }
【答10】最初の td をのぞく2番目以降の td のセル内容を右寄せに設定
※ 参考ページ
【問11 】次のスタイルは、どのような設定か説明しなさい
tr:nth-of-type(even) { background-color: #F3F3F3; }
【答11】偶数番目のtrの行の背景色をカラーコード#F3F3F3に設定
※ even は偶数の意
※ 参考ページ
【問12 】CSS3で要素を回転して表示する設定を書きなさい
（ベンダープレフィックスは、記述しない）
【答12】transform: rotate( )
※ 参考ページ
【問13 】:first-childセレクタは、どのようにスタイルを設定しているか
書きなさい
【答13】:first-childは最初の子要素のスタイルを指定します
※ 参考ページ
