

はじめて質問させていただきます。

某スクールにてweb制作を最近勉強し始めましたが、演習課題のコーディングをしていたところ、添付の画像の左側のように画像をずらしながら表示をさせるというのが、なかなかうまくいかず、非常に困っております。  
現在は、boxタグを使用し、リストを作成した上に画像を載せていますが、boxタグを使用せずに同じものを作ることができるやり方があるならご教授いただければと思います。  
よろしくお願い致します。

**css記述**

[code]

    .box {
        margin: 10px 0;
        float: left;
        width: 100%;
        background: #ffffff ;
    }
    .box img {
        max-width: 100%;
        float: right;
        margin: 0;
    }
    .box p {
        margin: 0;
        padding: 0px;
    }
    #sidebar a {
        text-decoration: none;
        float: left;
        display:block;
        width: 255px;
        height: 60px;
        background-image :url(img/top-menu.jpg);
        background-repeat: no-repeat;
        background-position:  0 left bottom;
    }
    #sidebar ul {
        display: block;
        height: 300px;
    }
    #sidebar ul li {
        display: block;
        height: 60px;
    }
    #sidebar ul .careplan a {
        background-image: url(img/top-menu.jpg);
        background-repeat: no-repeat;
        background-position: 0px left bottom;
    }
    #sidebar ul .grouphome a {
        background-image: url(img/top-menu.jpg);
        background-repeat: no-repeat;
        background-position: -60px left bottom;
    }
    #sidebar ul .service a {
        background-image: url(img/top-menu.jpg);
        background-repeat: no-repeat;
        background-position: -120px left bottom;
    }
    #sidebar ul .homehelp a {
        background-image: url(img/top-menu.jpg) ;
        background-repeat: no-repeat;
        background-position: -180px left bottom;
    }
    #sidebar ul .daycare a {
        background-image: url(img/top-menu.jpg) ;
        background-repeat: no-repeat;
        background-position; -240px left bottom;
    }
    
[/code]

**HTML記述**

[code]

    <div class="box">
            <img src="img/icatch.png">
            <div class="left">
            <p>
            <ul id = "sidebar">
            <li class="careplan"><a href="html.html">ケアプラン</a></li>
            <li class="grouphome"><a href="html.html">グループホーム</a></li>
            <li class="service"><a href="html.html">サービス付き高齢者向け住宅</a></li>
            <li class="homehelp"><a href="html.html">ホームヘルプサービス</a></li>
            <li class="daycare"><a href="html.html">デイサービス</a></li>
            </ul>
            </p>
        </div>
    </div>
    
[/code]

![画像の説明をここに入力](https://i.stack.imgur.com/bf7VL.jpg)  
![画像の説明をここに入力](https://i.stack.imgur.com/cyvIe.jpg)


CC BY-SA 3.0
2017-08-20T06:27:30.177
37349
2017-08-21T09:49:05.933
2017-08-20T06:52:45.983
3060
24957
question
html css
画像をずらしながらメニュー形式で表示したいのですが、うまくいきません


こんな感じでしょうか？

[code]

    .box {
        margin: 10px 0;
        float: left;
        width: 100%;
        background: #ffffff;
    }
    .box img {
        max-width: 100%;
        float: right;
        margin: 0;
    }
    .box p {
        margin: 0;
        padding: 0;
    }
    #sidebar {
        width: 255px;
        list-style: none;
    }
    #sidebar a {
        display:block;
        height: 60px;
        background-image :url(img/top-menu.jpg);
        background-repeat: no-repeat;
        text-decoration: none;
    }
    #sidebar .careplan a {
        background-position: left 0;
    }
    #sidebar .grouphome a {
        background-position: left -60px;
    }
    #sidebar .service a {
        background-position: left -120px;
    }
    #sidebar .homehelp a {
        background-position: left -180px;
    }
    #sidebar .daycare a {
        background-position: left -240px;
    }
    
[/code]


CC BY-SA 3.0
2017-08-21T09:25:58.447
37376
2017-08-21T09:49:05.933
2017-08-21T09:49:05.933
19243
19243
37349
answer