pontaのcssメモ

Web制作の基本であるhtml+cssの使い方メモです。

こんにちは、KOパソコン教室の大西です。桜咲く季節になりましたね。
4月29日(金)に、AdobeIllustratorの基本操作を1日でマスターする
「Illustrator基礎講座」開催します。デザイナー志望だけではなく、お店や会社のチラシを作りたい方、趣味の制作にもおすすめします。http://goo.gl/xdN8QO

07

<!DOCTYPE html>

<html lang="jp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>


        .menu{

        padding: 20px;

        background-color: rgba(250, 120, 120, 0.17);


        }

        .menu h1{

            margin-bottom: 5px;

            font-size: 25px;

        }

        .ul,ol,li{

            margin: 0;

            padding: 0;

            font-size: 15px;

            line-height: 1.4;

            list-style: none;

            margin-bottom: 1px;

        }

        .menu li a{

            display: block;

            padding: 10px;

            color: #000;

            text-decoration: none;

            outline: 1px red solid;

        }

        .menu li a:hover{

            background-color: yellow;

        }


        .menu img{

            float: left;

        }


        .menu p{

            margin: 0 0 0 165px;

        }


        .menu .title{

            font-weight: bold;

            color: red;

        }


        .p desc{

            color: #44ea58;

            font-size: 40px;

        }


        .menu li a:after{

            content: "";

            display: block;

            clear: both;

        }


    </style>


</head>

<body>

   <div class="menu">

       <h1>サムネイル画像の横にテキストを並べたレイアウト</h1>

       <li><a href="#">

           <img src="https://placehold.jp/150x150.png" alt="">

           <p class="title">リンク1のタイトル</p>

           <p class="desc">リンクについての説明リンクについての説明リンクについての説明リンクについての説明リンクについての説明リンクについての説明</p>

       </a></li>



          <li><a href="#">

           <img src="https://placehold.jp/150x150.png" alt="">

           <p class="title">リンク2のタイトル</p>

           <p class="desc">リンクについての説明リンクについての説明リンクについての説明リンクについての説明リンクについての説明リンクについての説明</p>

       </a></li>



   </div>

</body>

</html>


boxAB

<!DOCTYPE html>

<html lang="jp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>


        body{

            color: aliceblue;

        }


        #box-a{

        width: 600px;

        height: 300px;

        background-color: green;

            position: relative;

            top: 30px;

            left: 30px;

        }

#box-b{

        width: 300px;

        height: 150px;

        background-color: red;

        position: absolute;

        top: 30px;

        left: 30px;


        }


    </style>

</head>

<body>

    <div id="box-a">

          <div id="moji">BOX-A</div>

      <div id="box-b">

          <div id="moji">BOX-B</div>

    </div>

    </div>

</body>

</html>

【ボックスの位置決め】

ポイント1:box-aのdivの中にdox-bが入っている。(親子関係)

ポイント2:relativeは本来の位置からの移動

box-aは本来ブラウザのウインドウの左端に表示されるボックスですが、position:relative;(ポジション:レラティブ)でtop:30px、left:30pxの位置に表示させています。

ポイント3:absoluteは親ボックスを基点に移動

box-bはposition:absolute;(ポジション・アブソリュート)でbox-aの左上を基準にtop:30px、left:30pxの位置に表示させています。


↑このページのトップヘ