CSS・HTMKがわかりません。

質問

下記のサイトのようなメニュバー（上部）を作りたいのですが、作り方がわかりません。
できたらサンプルコードを合わせて教えてくださるとありがたいです。

各メニューの横に家のマークなどがあるのですが、あれはすべてCSSでできますでしょうか？できる場合、できたら作り方も教えてください。

それとも、image画像をつくって、その上に文字をいれこんでるのでしょうか？

質問が多くて大変申し訳ないですが、教えてくださると助かります。

http://cssslider.com/

回答No.2

noname#206842 · ベストアンサー

Windows・Mac両方に対応しているスライダーを作成するソフトですね。
まずは、Downloadを行い解凍すると、ｃcssSlider-full-setup.exeというアイコンができます。
このアイコンをダブルクリックすると、インストールが始まります。
インストールが終わると、ディスクトップ上にcssSliderアイコンができているので、これをダブルクリックする。
Add imagesをクリックし、画像を追加（有料なので、お金を払っていれば）SaveHTMLで自動的に書きでしてくれるようです。タイトルなどもこの時に設定しておけば、できるようですが、８,265円というのは、いささか高いかも？・・・モーヒングなど非常にきれいなので、初心者には価値があるかも？・・・

書き出される、csslというファイルは、xmlファイルなので、これだけを利用するのであれば、無料で利用できる。
ただし、HTMLが、書き出しできるかどうかは、あなたしだいでは？・・・
元のソースは、lightboxなので、lightbox2などを参考にすれば、ご自身でも作れるのでは？・・・

参考URL：

http://lokeshdhakar.com/projects/lightbox2/

お礼

ありがとうございます。

回答No.3

noname#206842

No.2no回答うをした者です。勘違いでSliderのことを、書きましたが、iconのことだった！
ソースを見ると<i class="icon-home"></i>となっているので、WebFontを利用しているようです。
ご自分で制作する場合は、参考URLを、ご覧下さい！
CSSで記述できますが、画像は、svgを利用した方がいいと思います。

http://fontello.com/などのWEBサービスを利用して作成されると、意外と早いかも？・・・

参考URL：

http://nelog.jp/feedly-web-iconic-font

お礼

ありがとうございます。

回答No.1

Taiyonoshizuku

chromeで開く
メニューバーのところで右クリック→要素を検証
そうするとタグの構成等出てくるから、それを参考に。

家のマークとかは
http://fontawesome.io/

これを使っていると思う。

タグを見ればわかるけど画像は使っていない。

まずはソース見てやってみて、そこでわからないことがあったら聞いてくれ。
丸投げは良くない

お礼

ありがとうございます。