もしかしたら、すごく簡単なことなのかもしれませんが、ドリームウィーバーでわからないことがあります。以下のサイトの左上にある、ナビゲーションにある区切り線(点線)はどのように作るのでしょうか?
http://www.olivierpasqual.ch/
自分のホームページ上で見た目的に同じようなものをつくりたくて、区切り点線なしのナビゲーションを、テーブル機能をつかって作りました。ドリームウィーバーをつかってどのように横点線をだすのか、ご存知のかた教えていただけますか?よろしくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
サンプルサイトのようなナビゲーションとして使用するのであれば、<ul>要素を使用することをおすすめします。
<div id="menu">
<ul>
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
</ul>
</div>
などとして、
#menu ul li a{
display:block;
width:150px;
border-bottom:1px dotted #000;
}
などと指定してあげてはいかがでしょうか。
ちなみにこの点線、IEで見ると「2pxの点→2pxの空白」の連続となっていることと思います。これ、実はIEのバグでして、本当は「1pxの点→1pxの空白」となるのが正しいのです。他のブラウザではそのように表示されます。私見ですが、1pxのほうがかっこいいです。
コレをIEでも実現しようと思ったら、白1pxと黒1pxが隣り合った、2pxの背景画像を用意して、CSSで「backgrond-repeat:repeat-x;」などとしてあげると吉です。
No.2
- 回答日時:
HPを確認しました。
No.1さんの回答のとおりCSSで製作されています。まずは例に出されたHPのソースを見てください。(表示→ソースの表示) その中の<div class="menu1">~</div>がナビ部分ですが、このクラスの定義はソース上上の方にある、<link rel="StyleSheet" href="style.css" type="text/css"/>で指定されています。そこでhttp://www.olivierpasqual.ch/style.css にアクセスするとCSSの中身が見られます。その中の、 div.menu1{~} が定義部分です。なかにボーダー設定でドットを指定しているのがわかるかと思います。
CSSを勉強中ということですが、すべての列に<span class="style10">とあるのはスマートではありません。ちゃんとマークアップすると、この部分<td>CV</td>といったようにかなりシンプルに書くことができます。 また<td></td>も必要なくすことも可能かと思います。いろいろな人のソースコードを参照しながらスマートな記述ができるよう頑張ってください。
ちなみに例に出されているHPの記述はあまりカッコ良くないので参考程度にされた方が良いかと思います。(タグのほぼ一つ一つにclassを指定している。何でもかんでもdivにマークアップしているなど)
No.1
- 回答日時:
DreamWeaverには直接関係のない、単純なCSSかと思われますが。
border-bottom-style:dotted;
で良いと思います。
早速、お答えいただきありがとうございます。ドリームウィーバーを最近はじめたのでHTMLやCSSというものについては現在少しずつ勉強をしています。
現在、製作中のページなのですが、ナビゲーションにPORTFOLIO, CV, CONTACTと項目があります(下にHTMLを貼付けました)。どの部分にお答えいただいた「border-bottom-style:dotted;」を挿入すれば点線が正常に機能するのでしょうか?自分でもいろいろネットで調べておりますが、もしご面倒でなければお答えいただけますでしょうか。よろしくお願い致します。
ーーーー以下がナビゲーションぶぶんのHTMLですーーーーーーーー
<td> </td>
<td><span class="style10">PORTFOLIO </span></td>
</tr>
<tr>
<td> </td>
<td><span class="style10">CV</span></td>
</tr>
<tr>
<td> </td>
<td><span class="style10">CONTACT</span></td>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング ホームページの内容変更を無料で(自分で)したいので方法を教えてください 3 2022/07/14 13:32
- 憲法・法令通則 道交法についての質問です 3 2023/01/16 14:17
- マウス・キーボード HEIYO Surfaceぺんの使用方法を教えてください 2 2023/04/09 10:40
- 数学 数学の問題で法線ベクトルについて 5 2022/11/13 12:45
- 哲学 美大に通っている者です。哲学を履修しています。その講義で出された小テストがよく分からないので、ヒント 1 2022/07/01 16:40
- 照明・ライト どれが切れてる?全部じゃない感 3 2022/10/13 21:33
- その他(法律) 2車線以上であっても、歩行者は横断歩道がない道路を横断できますよね? 3 2022/04/19 15:58
- その他(住宅・住まい) 境界線が明確でない土地の境界線沿いに木が植えられており、その木が境界線を跨ぐ場合の対応について 4 2022/10/03 21:58
- 電気工事士 来月から電気管理技術者のお仕事を始める者です。東京電力パワーグリッドへ情報提供の依頼をする方法がTE 1 2022/06/27 06:48
- 数学 数学三 複素数平面 添付してある画像の問題において、「点Cは半直線AB上にある」という記述があります 1 2023/06/17 11:28
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
mp3の音楽ファイルの「アルバム...
-
VLCメディアプレーヤーで再生で...
-
AudacityでMP3をMIDIに変換
-
画像編集ソフト、GIMPの規約に...
-
PhotoScape という画像加工ソフ...
-
Photoshopを使って画像のような...
-
キーフレーム
-
audio CDをUSBメモリーに...
-
Gom Player 動画を再生できなく...
-
VideoProc Vlogger を使用して...
-
ただ動画と動画を結合できれば...
-
セブンのコンビニのコピー機で ...
-
Freemake Video Converter の無...
-
Filmoraの自動字幕起こしが上手...
-
Vtuberになるために自作AI生成...
-
画像の白抜きの意味
-
動画のサムネイルについて
-
動画編集ソフトについて
-
4Kテレビと2.7K or 4K動画の画...
-
自分で撮影し、DVD に動画を焼...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
見開き2ページ
-
ドリームウィーバーについての...
-
Photoshopのスライスについて。
-
accessVBA 「フォームが見つか...
-
時間は何進法なのでしょうか?
-
ListViewのサブアイテムの文字色
-
ACCESSでドル表示
-
Access-フォームの小数点以下が...
-
Accessレポート「0値」の表示に...
-
正規表現:青空文庫形式でルビ...
-
Access顧客住所録から任意のデ...
-
accessからワードへ出力したら...
-
MS-Accessでタイムテーブル(予...
-
団信の告知義務違反
-
ポケコンでドット絵を作る方法
-
スクリーンリーダーでの漢字の...
-
二次元バーコードの謎
-
入力数字の記憶機能
-
Versa Pro 型番:PC-VJ17MFC31F...
-
エクセルでの昇順での並び替え
おすすめ情報