No.1ベストアンサー
- 回答日時:
Illustratorはビットマップ(ラスター)画像を扱うソフトですからこの質問には関係ないでしょう。
Dreanweaverで出来ますが、HTMLやCSSの知識があるほうが、断然早く簡単です。
普通に
<div class="nav">
<ol>
<li><a href="./1">1</a></li>
<li><a href="./2">2</a></li>
<li><a href="./3">3</a></li>
<li><a href="./4">4</a></li>
</ol>
</div>
とマークアップされていたとして
div.nav ol,div.nav ol li{
list-style-type:none; /* リストマークを消す */
margin:0;padding:0;/* margin,paddinをリセット */
text-align:center;/* 中央配置 */
line-height:2em;
}
div.nav ol li{
display:inline-block;/* 行内ブロックに */
width:2em;height:2em;
position:relative;/* 以下の位置基準にするため */
margin:0 5px;
}
div.nav ol li a{text-decoration:none;}/* 下線を消す */
div.nav ol li a:after{
content:"□";/* 画像ならurl() */
position:absolute;/* 位置の指定 */
top:2em;left:0.5em;
}
div.nav ol li:hover:after{
content:"■";
}
div.nav ol li a[href="./4"]:after{
content:"☆";/* 他の図形でもOK */
}
div.nav ol li a[href="./4"]:hover:after{
content:"★";
}
とスタイルシートを書きます。
★どのような優れたWebオーサリングツールであっても、HTMLやCSSの知識は必要、というか、テキストエディタで作成する以上に必要です。
★HTMLがきちんと書けていたら、どのようにもデザインできます。
参考→ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )は、ブラウザの表示メニューから「スタイル」を選択するとデザインが変わります。
★Dreamweaberに限らず、スタイルシートのセレクタをHTML(の構造)を読み取って提案してくれる機能はありません。
[例]
★HTML4.01strict + CSS2.1 のウェブ標準
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
のDATAで検証済み
★タブは_に置換してあるので戻す。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
div.nav ol,div.nav ol li{
list-style-type:none;
margin:0;padding:0;
text-align:center;
line-height:2em;
}
div.nav ol li{
display:inline-block;
width:2em;height:2em;
position:relative;
margin:0 5px;
}
div.nav ol li a{text-decoration:none;}
div.nav ol li a:after{
content:"□";/* 画像ならurl() */
position:absolute;
top:2em;left:0.5em;
}
div.nav ol li a:hover:after{
content:"■";
}
div.nav ol li a[href="./4"]:after{
content:"☆";/* 他の図形でも */
}
div.nav ol li a[href="./4"]:hover:after{
content:"★";
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<div class="nav">
___<ol>
____<li><a href="./1">1</a></li>
____<li><a href="./2">2</a></li>
____<li><a href="./3">3</a></li>
____<li><a href="./4">4</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Mac OS Macか Windowsか?悩んでいます。 6 2023/04/07 09:35
- モニター・ディスプレイ フルHDで作成の動画、画像加工を4Kモニターで見た場合 2 2023/01/03 04:53
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- 写真 写真(画像)編集スキルを質問する時 1 2022/12/07 14:14
- モニター・ディスプレイ パソコンのモニター選び 10 2022/11/30 12:19
- 画像編集・動画編集・音楽編集 簡単な画像処理ソフトを探しています 5 2023/02/20 17:53
- デスクトップパソコン google chrome、イラストレーター、フォトショップの同時作業におすすめのPC構成 1 2022/10/19 14:23
- その他(法律) Wikipediaの著作権について 2 2022/08/14 07:14
- Amazon Amazonの商品画像に詳しい方に質問があります。 1 2022/09/14 12:18
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HP 画像の一部にリンクでその...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
smallにtext-allignが効かない
-
widthやheightの数値に単位(px...
-
NからZへの全単射を具体的に構...
-
emとstrongの反対
-
画像イメージの上下左右、欲し...
-
VBAでの素数の求め方
-
CSSでボックスのheightが0になる
-
親要素・子要素
-
min-heightとheightの違いについて
-
htmlのolやulなどlistにtitleや...
-
画像にリンクを張ると画像がず...
-
【ヒトの神秘】美男美女から何...
-
imgタグをそのまま使うことは正...
-
番号付きリスト(<Ol><Li>・・...
-
HTML要素のid/class名の長さに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一度で20MBくらい送信できて共...
-
HP 画像の一部にリンクでその...
-
jQuery カーソルを乗せるとタブ...
-
初心者 ロールオーバー及びイ...
-
HPビルダー16 リストの増やし方
-
ブラウザ別のマージン解消は?
-
サクラエディタの使い方について
-
多数の画像で商品説明する方法
-
(CSS)table-cellをIEで表示さ...
-
ウェブサイトの作り方
-
HTMLやcssに詳しい方教えてくだ...
-
webのナビメニューで、どうして...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
おすすめ情報