ドットインストール学習のHTML・CSSでつまずいたところ！＃16 アイコン付きリストを作ろう

ウェブ上で3分動画で本格的に勉強をする事が出来るドットインストールをご存知でしょうか？

初心者用ではありますが、私のようなドがつくほどのど素人でも分かりやすく勉強をする事が出来ますw

今までbloggerやホームページ・ビルダー19 などのソフトに依存する事でしかブログやホームページを作る事が出来ませんでした。

もっと基礎を学びソフトに依存する事無くホームページが作れるようになる事が最初の目標です。


現在メモ帳だけでウェブサイトが作れるようにHTMLとCSSを勉強中です。

そんな私が現在つまずいている所をご紹介です。

ドットインストール　つまずいたところ

現在勉強中の項目は『実践！ウェブサイトを作ろう(全16回)』の中の最後の『＃16　アイコン付きリストを作ろう』です。

ドットインストール　つまずいたところ

しかし↑コレがなかなかのクセ物で、指示通りにやっているのに何故か上手くいきません。

HTML

まずはメインのHTMLの2カラムのレイアウトに「submenu」という名前で3段のメニューを作ります。

ドットインストール

すると、ドットインストールさんではこんな感じになります。

HTML 2カラム

ちなみに私はこんな感じ。

ここまでは上手くいきます。

問題はこの後なのです！

このmenu1～3にアイコンを付ける為にCSSを書いていきます。

CSS　サブメニュー

黄色いマーカーのコードul.submenu>li {background: url('point.png'):}を書き込みます。

画像では;(セミコロン)を付け忘れていますがご愛嬌でw

ドットインストール　お手本

すると、ドットインストールさんではこのような感じになります。

HTML　上手くいかない

何故か私の場合はこんな感じでアイコンが左端まではみ出しています。

ここからさらにCSSにアイコンがリピートしないようにコードを書き込みます。

CSSコード

「no-repeat;padding:0 0 5px 20px;」でリピートしないようにと、空白の指定をします。

ドットインストール　お手本

ドットインストールさんはこんな感じでパーフェクトです！

レイアウトうまくいかない

私の方は...あれっ！？

とんでもない場所にアイコンがw

と、これ笑い事では無くて、何回試しても同じ結果になってしまいます(涙

解決策を発見次第、問題点や方法をご紹介していきたいと思います。