
下記サイトの最下部に出てくるツールバーのようなものはどのように作るのでしょうか?
http://mozilla-remix.seesaa.net/
参考になるサイトなどがあれば教えて下さい。
No.3ベストアンサー
- 回答日時:
> ツールバーをクリックで出したり引っ込めたりする部分
このカテゴリがデザイン・CSSなので、そこに注視してお答えしますと、CSS3のtransitionsを使用すれば要素をアニメーションさせることは可能です。ただし、主要ブラウザであるIEの8以下ではこの機能を使えないので、一般的な手法としては、CSSではなく、javascriptを用いて実装されると思います。
CSS3で実装する場合は、「Transitions css3」で検索すれば、情報は大量に出てきます。
JavaScriptで実装する場合は、カテゴリを変えて質問されてみてはどうでしょうか。
No.2
- 回答日時:
Webプログラマで、この手の物を作るのが趣味の人なら自分で作ればよいと思いますが、もしお示しのサイトのようなものを自分のサイトに設置したいというだけであれば、第三者が作ったものを利用するのが吉です。
示されたサイトでは、「Wibiyaツールバー」というものを使っています。
公式サイトや設置方法などは
http://www.google.co.jp/search?q=wibiya+toolbar
より適宜参照してください。
No.1
- 回答日時:
単純にその部分のソースを見ればわかるのでは?
ただ、そのサイトの方法は決して薦められる方法ではありません。
HTMLとしては、ナビゲーションリンクですから
<div class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
とナビゲーションリンクリストとしてマークアップしておいて、スタイルシートで、好きなようにデザインしていきます。
横並び
div.nav ol,div.nav ol li{list-style:none;display:block;}
div.nav ol li{width:20%;float:left;}
div.nav ol li:before{content:"|";}
とか・・
縦に並べる
div.nav ol,div.nav ol li{list-style:none;display:block;}
div.nav ol li{width:20%;}
とか・・
ナビゲーションリスト 横並び float( http://www.google.co.jp/search?q=%0A%0A%E3%83%8A … )などで探せばたくさんでてきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Illustrator(イラストレーター) クリップスタジオペイントについて。 1 2022/11/15 11:38
- フリーソフト libreoffice drawのツールバーのチェックが外れてしまう 1 2022/10/04 22:02
- その他(IT・Webサービス) 動画が多い(容量が多い)Webサイト作成 1 2023/04/08 17:42
- その他(メールソフト・メールサービス) thunderbirdの設定で3点 1 2022/04/23 11:02
- Word(ワード) windows8.1。 3 2022/11/07 17:54
- その他(IT・Webサービス) WEBサイト内のファイルを探す方法は? 1 2022/11/11 16:38
- その他(プログラミング・Web制作) Windowsのマクロプログラムで、こんなことできますか? 3 2022/06/28 14:30
- 大学・短大 webサイトの参考資料:サイト名 リンク名 最後に何年何月何日取得と書かれているんですが、この取得と 1 2023/07/13 05:55
- サーバー (童顔♀です)webサイト納品後,記事更新をこちらでする場合どうやりますか....? 3 2023/08/09 04:44
- 作詞・作曲 この曲のジャンルを教えてください! 3 2022/05/05 02:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
複数行にまたがる括弧を表示し...
-
li 長さ指定
-
css リストを右揃えにできませ...
-
番号付きリスト(<Ol><Li>・・...
-
サイズの違うフォントの下位置...
-
ol li の回り込みの避け方について
-
CSSで外部ファイルのスタイルが...
-
箇条書きがずれて表示されてし...
-
リンク文字同士の間隔を開ける...
-
文字の先頭につけるアイコン
-
HTMLで組織図を作成する方法
-
【CSS】メニュー上部に固定させ...
-
html <ul></ul>の並びで一行空...
-
HTMLで語の先頭をそろえるには?
-
リストマーカーをボックス内に...
-
クリッカブルマップ(イメージマ...
-
html リンク文字の背景色について
-
html/cssの、navを2段にする...
-
excel vba で ulタグのなかのse...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
html <ul></ul>の並びで一行空...
-
htmlの<ol>タグで、数字などを...
-
divタグ内のコンテンツが重なっ...
-
ページを開いているときのリン...
-
ドロップダウンメニューが隠れ...
-
【CSS】メニュー上部に固定させ...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
list-style-type部分だけ大きく...
-
<li>の中の<h>だから!ルール違...
おすすめ情報