ホームページのプルダウンについて
自分のホームページにプルダウンのようなもので表示させてたいのですが、どうすれば出来るのでしょうか。
サイトなどがございましたら、教えて下さい。
因みに自分が理想のプルダウンは以下のURLのイベントカレンダーみたいな形にしたいです。
幕張メッセ http://www.m-messe.co.jp/
No.2ベストアンサー
- 回答日時:
連投失礼します。
実際のスタイルは行頭記号付リストでスタイルを作っていましたので、サンプルを改編します。
<!-- イベントカレンダーのコンテンツ部分 -->
<div class="eventbox">
<ul>
<li class="event1">
<a href="リンク先">
<span>●年●月●日(●)-●年●月●日(●)</span>
<br>イベント名
</a>
</li>
<li class="event2">
<a href="リンク先">
<span>●年●月●日(●)-●年●月●日(●)</span>
<br>イベント名
</a>
</li>
<!-- 必要な数だけ、li class="event~"を作る -->
</ul>
</div>
参考URL先では
・<li>~</li> は4パターン
・行頭記号はイメージを使い表示させている
…という状態でした。
<div class="event1">~</div>でも似たイメージになりますが、divで分けるよりは上記のようにリスト形式にした方が、方法としては宜しいかと思います。
(リンクメニューのように同じスタイルでリンクを並べる場合、リストを使う事がデフォルトになっているので)
どちらの方法を使うにしても、CSSでうまく見せる工夫をすれば、「らしく」なるはずです。
頑張って作ってみて下さい。
No.3
- 回答日時:
プルダウンではなくJavaScriptのツリーリンクの応用でそれらしいものが出来ますよ。
http://plusone.jpn.org/javascript/sample/acc/tre …
http://himajin.moo.jp/menu/menu6_1.html
リンクを入れるところに表を入れればいいだけです。
幕張メッセのサイトでは隠し部分を外部呼出しになっていて、ちょっと複雑になっていますが・・・
No.1
- 回答日時:
「プルダウン」というものがお解りではないのか、それとも理想像として挙げられたURLが間違っておられるか…かな、という感じがします。
理想像として挙げられたURL先、3段組みカラムスタイルの真ん中、「お知らせ」の下にある「イベントカレンダー」の欄のように、タイトルが一番上にあって、その下に似たような感じでコンテンツを並べていきたい、という事でしょうか。
この「イベントカレンダー」の箇所のスタイルだと…
・段組みスタイルが理解できること
・DIV分け、idやclassの意味が解ること
・ul li という、行頭文字付リスト表示の仕方が解ること
…という条件で、スタイルを作る事ができます。
・マウスカーソルを重ねた時に背景の色を変えたい
…というのは、CSSまたはJavaScriptが解れば可能です。
・中の色をランダムに配置したり、記事を自動的に変化させたい
…というのは、PHPが解れば可能です。
このため、スタイルを作る事ができる条件3つをご理解されている、という前提で記載します。
(解らなければ、例えテンプレートがあっても「何処をどう変えればいいの?」という所で止まりますから、理解してなきゃいじれません)。
Firebugsでスタイルを覗き見してみたら、案外と単純なスタイルで作られていました。
JavaScriptも入っているのですが、この部分は抜いて考えます。
<!-- イベントカレンダーのタイトル画像部分 -->
<div>
<a href="リンク先"><img width="390" height="30" alt="イベントカレンダー" src="画像.gif"></a>
</div>
<!-- イベントカレンダーのコンテンツ部分 -->
<div class="eventbox">
<div class="event1">
<a href="リンク先">
<span>●年●月●日(●)-●年●月●日(●)</span>
<br>イベント名
</a>
</div>
<div class="event2">
<a href="リンク先">
<span>●年●月●日(●)-●年●月●日(●)</span>
<br>イベント名
</a>
</div>
<!-- 必要な数だけ、div class="event~"を作る -->
</div>
.eventbox のスタイルは、幅指定くらいでしょうか。
.event1 .event2 …(参考URLではevent4まで作ってランダム配置しています)のスタイルは、高さと背景の色。
spanタグのスタイルで、文字サイズを下げています。
また、クラスごとに行頭記号を画像に変更させて色を変えた同じ形の画像を当てはめているようです。
.event1 .event2 …のCSSで:hover時に背景の色を変えれば、それらしくなりますね。
どこかからスタイルだけもらうにしても、これと同じものはかなりじっくり探さないとないかもしれません。
表示としてはあまり一般的ではないので…。
JavaScriptやPHPの部分を除き、それらしく作る事はWebページ制作の中級者くらいならば自前でサクサクッと組めます。
文字以外の範囲部分にマウスカーソルを置いた時もリンクに反応させたい、ということも、display:block;で出来る事も、中級者ならばお手の物のハズです。
そこまでの知識がない、というのであれば、身の丈に合うスタイルと方法で作るしかないですね。
テーブルを使うなどで代用する、とか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excelで質問です。 詳細(写真) ①黄色の部分を全てプルダウンを設定する。 ②リストはG列 ③リ 1 2023/06/16 21:54
- Excel(エクセル) ユーザー定義について質問です。 2 2023/06/28 13:21
- Excel(エクセル) Excel VBAプルダウンの値を変えながら2枚ずつ印刷する方法? 4 2022/05/27 13:04
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2022/04/01 12:11
- Excel(エクセル) Excelのプルダウンメニューの内容を人によって可変する方法 2 2023/03/28 14:52
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- Excel(エクセル) エクセルを活用した受注表作成の中で関数・数式を教えてください。 3 2022/07/23 08:14
- Excel(エクセル) エクセルの書式設定について教えてください。 2 2023/02/03 09:59
- Excel(エクセル) エクセルの数式について教えてください。 1 2023/02/11 15:17
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2022/06/10 11:06
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページ作成
-
既存画像(gif または png)の背...
-
ログインしないとみることがで...
-
ホームページビルダー15で作っ...
-
今さらですがHPを作成するに当...
-
XREA使用で作成したHTMLファイ...
-
ドリでテンプレートが反応しな...
-
FFFTPでサーバに新規フォルダが...
-
HTMLで、ホームページが作れる...
-
CGIが実行可能なHP領域又はレン...
-
FC2ホームページの変更に仕方
-
ホームページビルダー19文字化け
-
ホームページ制作で教えてくだ...
-
サイト改修にあたり、各ページ...
-
ホームページの画面文字を濃く...
-
ページの内容コピペ 範囲が広い...
-
ホームページビルダーおすすめ?
-
GASについて
-
無料でホームページを作成した...
-
ホームぺージの検索
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Pythonのスクレイピングの質問...
-
vb2019でHTMLの取得
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
パワーポイント:テキストボッ...
-
URLが青くならない
-
Google Keepで数字に勝手に下線...
-
エクセル:セル内の文字列の下...
-
AppleのNumbersというアプリで...
-
抗菌ウェットティッシュに発が...
-
アンダースコア(下線)のあるメ...
-
フランス語の質問です。 J'aime...
-
エクセルのセルの下線が消えない
-
Wordでレイアウトを変えないで...
-
ワードの表で下線と文字の入力
-
AUTOCAD文字の下に同じ長さの線...
-
HTMLのbody内に<style>~</styl...
-
PivotTableのデータソースを一...
-
outlook2003にて新規メッセージ...
-
【excelの下線(会計)とは】
おすすめ情報