Now is better than never

読者です 読者をやめる 読者になる 読者になる

無糖の日々

時間が経てば甘くなる, The just desserts is also desserts.

CSS基礎編-2 位置の指定

CSS

②画像の上に文字を指定を配置したい時編

html記述

<body>
<title>要素の位置を定義</title>
<div id="sample1"><img src="liona1024.jpg"alt=""></div> ←"liona~"は画像の名前です
<div id="sample2">Donuts makes us happy!</div>    ←これらはsampleで記述
<div id="sample3">そうだ、ミスドに行こう!</div>    してますがなんでもOK!

<link rel="stylesheet"href="CSSyousositei.css"type="text/css"> 
</body>          ↑これを抜かすとCSSがHTMLに反映されないです。

 

CSS記述

@charset"UTF-8";       ←今回もUnicodeです

body{
margin:Opx;
background-color:#ffffcc;

}
#sample1.{
width:150px;
height:100px;
position:relative;
top:50px;
left:30px;

}
#sample2{
position:absolute;
top:60px;            ←文字の位置は試行錯誤💦
left:70px; 
color:red;            ←ちなみにを抜かすとこれまた反映されず…
font-size:600%;

font:bolder 18px"Comic Sans MS",Arial,sans-serif;
}
#sample3{
position:absolute;
top:300px;
left:400px;
color:black;
font-size:350%;
font-style:italic;
}

 

出力結果  (※使用画像はミスタードーナツのフリー壁紙です)

f:id:Detsch:20160828011306j:plain

                  

 

f:id:Detsch:20160828013116p:plain

今回の通して、CSSで企画の際にどう見せるかという点の勉強にも使えるのではと個人的に思いました。(絵が下手なだけなんですけどね)

 

<