SlideShare a Scribd company logo
1 of 22
div, span, img があればいい
div (display: block)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div>aaa</div>
        <div>bbb</div>
        <div>ccc</div>
        <div>ddd</div>
        <div>eee</div>
    </body>
</html>
span (display: inline)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
        <span>ddd</span>
        <span>eee</span>
    </body>
</html>
img (display: inline-block)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
        <img src="https://graph.facebook.com/4/picture?type=large">
    </body>
</html>
width, height
        (block and inline-block only)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="width: 200px; height: 200px;
background: red"></div>
    </body>
</html>
margin, padding, border
          (block and inline-block only)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="
            width: 200px;
            height: 200px;
            margin: 200px;
            padding: 200px;
            border: black solid 200px;
            background: red;
        "></div>
    </body>
</html>
margin 相殺 1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="
           height: 10px;
           margin: 200px;
           background: red;
        "></div>
        <div style="
           height: 10px;
           margin: 200px;
           background: red;
        "></div>
   </body>
</html>
margin 相殺 2
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="background: red; height: 10px"></div>
        <div style="
            height: 10px;
            margin: 200px;
            background: red;
        ">
             <div style="
                height: 10px;
                margin: 200px;
                background: red;
             ">
             </div>
        </div>
   </body>
</html>
margin 相殺 3
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="background: red; height: 10px"></div>
        <div style="
            height: 10px;
            margin: 200px;
            padding: 1px;
            background: red;
        ">
             <div style="
                height: 10px;
                margin: 200px;
                background: red;
             ">
             </div>
        </div>
   </body>
</html>
margin 相殺 4
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="background: red; height: 10px"></div>
        <div style="
            height: 10px;
            margin: 200px;
            background: red;
        ">
             a
             <div style="
                height: 10px;
                margin: 200px;
                background: red;
             ">
             </div>
        </div>
   </body>
</html>
float
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="
           float: left;
           width: 100px;
           height: 100px;
           margin: 10px;
           background: red
        "></div>
        <div style="
           float: left;
           width: 100px;
           height: 100px;
           margin: 10px;
           background: blue
        "></div>
    </body>
</html>
float
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="background:   pink;">
            aaa aaa aaa aaa aaa   aaa aaa aaa aaa aaa
            aaa aaa aaa aaa aaa   aaa aaa aaa aaa aaa
            <div style="
              float: left;
              width: 100px;
              height: 100px;
              margin: 10px;
              background: red
            "></div>
            <div style="
              float: left;
              width: 100px;
              height: 100px;
              margin: 10px;
              background: blue
            "></div>
            aaa aaa aaa aaa aaa   aaa aaa aaa aaa aaa
            aaa aaa aaa aaa aaa   aaa aaa aaa aaa aaa
        </div>
    </body>
</html>
clear
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="background: pink;">
            aaa aaa aaa aaa aaa aaa aaa   aaa aaa aaa
            aaa aaa aaa aaa aaa aaa aaa   aaa aaa aaa
            <div style="
              float: left;
              width: 100px;
              height: 100px;
              margin: 10px;
              background: red
            "></div>
            <div style="
              float: left;
              width: 100px;
              height: 100px;
              margin: 10px;
              background: blue
            "></div>
            aaa aaa aaa aaa aaa aaa aaa   aaa aaa aaa
            aaa aaa aaa aaa aaa aaa aaa   aaa aaa aaa
        </div>
        <div style="clear: left"></div>
    </body>
</html>
clear
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="background: pink;">
            aaa aaa aaa aaa aaa aaa aaa aaa   aaa aaa
            aaa aaa aaa aaa aaa aaa aaa aaa   aaa aaa
            <div style="
              float: left;
              width: 100px;
              height: 100px;
              margin: 10px;
              background: red
            "></div>
            <div style="
              float: left;
              width: 100px;
              height: 100px;
              margin: 10px;
              background: blue
            "></div>
            aaa aaa aaa aaa aaa aaa aaa aaa   aaa aaa
            aaa aaa aaa aaa aaa aaa aaa aaa   aaa aaa
            <div style="clear: left"></div>
        </div>
    </body>
</html>
position: relative
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="
            position: relative;
            background: red;
            margin: 20px;
            padding: 20px;
            border: black solid 20px;
            width: 100px;
            height: 100px;
            top: 100px;
            left: 100px;
        ">
        </div>
        aaa
   </body>
</html>
position: relative
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="
            position: relative;
            background: red;
            margin: 20px;
            padding: 20px;
            border: black solid 20px;
            width: 100px;
            height: 100px;
            bottom: 100px;
            right: 100px;
        ">
        </div>
        aaa
   </body>
</html>
position: absolute
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="
            position: absolute;
            background: red;
            margin: 20px;
            padding: 20px;
            border: black solid 20px;
            width: 100px;
            height: 100px;
            top: 100px;
            left: 100px;
        ">
        </div>
        aaa
   </body>
</html>
position: fixed
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <div style="height: 10000px; width: 10000px"></div>
        <div style="
            position: fixed;
            background: red;
            margin: 20px;
            padding: 20px;
            border: black solid 20px;
            width: 100px;
            height: 100px;
            top: 100px;
            left: 100px;
        ">
        </div>
    </body>
</html>
stylesheet
<style>
* { background: red }
div { background: blue }
</style>



<link rel="stylesheet" href="style.css">
セレクタ
•   div > div
•   div + div
•   div ~ div
•   div div
•   div.hoge
•   div#hoge
•   div[alt=hoge]
cascading
<style>
* { background: red }
div { background: blue }
#hoge { background: pink }
div#hoge { background: gray }
</style>

詳細度
div: (0, 0, 1)
div#hoge: (1, 0, 1)
div.hoge div#hoge: (1, 1, 2)
他よく使うプロパティ
•   font-size
•   overflow
•   line-height
•   background-image
•   background-position
•   outline

More Related Content

What's hot

Web Technology Lab files with practical
Web Technology Lab  files with practicalWeb Technology Lab  files with practical
Web Technology Lab files with practicalNitesh Dubey
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 
Css, CaseCading Style Sheet
Css, CaseCading Style SheetCss, CaseCading Style Sheet
Css, CaseCading Style SheetIshaq Shinwari
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It TodayDoris Chen
 
CSS Selector
CSS SelectorCSS Selector
CSS SelectorCalos Kao
 
Nanoformats
NanoformatsNanoformats
Nanoformatsrozario
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshowsblackman
 
Espacios en-tu-vida
Espacios en-tu-vidaEspacios en-tu-vida
Espacios en-tu-vidaepacheco1
 
Los Estados De La Materia
Los Estados De La MateriaLos Estados De La Materia
Los Estados De La MateriaMayritalinda
 
El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392guestc65f09
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmMaria S Rivera
 
Ôn tập KTTMDT
Ôn tập KTTMDTÔn tập KTTMDT
Ôn tập KTTMDTmrcoffee282
 
How to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-BooksHow to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-Booksbisg
 
Makanan halal-haram-2970785
Makanan halal-haram-2970785Makanan halal-haram-2970785
Makanan halal-haram-2970785khairulamar
 

What's hot (20)

Web Technology Lab files with practical
Web Technology Lab  files with practicalWeb Technology Lab  files with practical
Web Technology Lab files with practical
 
Dfdf
DfdfDfdf
Dfdf
 
Lecture 03 HTML&CSS Part 2
Lecture 03   HTML&CSS Part 2Lecture 03   HTML&CSS Part 2
Lecture 03 HTML&CSS Part 2
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 
Css, CaseCading Style Sheet
Css, CaseCading Style SheetCss, CaseCading Style Sheet
Css, CaseCading Style Sheet
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
CSS Selector
CSS SelectorCSS Selector
CSS Selector
 
Nanoformats
NanoformatsNanoformats
Nanoformats
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
Eclampsia 4-real-presentation
Eclampsia 4-real-presentationEclampsia 4-real-presentation
Eclampsia 4-real-presentation
 
Espacios en-tu-vida
Espacios en-tu-vidaEspacios en-tu-vida
Espacios en-tu-vida
 
Los Estados De La Materia
Los Estados De La MateriaLos Estados De La Materia
Los Estados De La Materia
 
El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392El Tiempo Nos Ensea 214392
El Tiempo Nos Ensea 214392
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
 
Ôn tập KTTMDT
Ôn tập KTTMDTÔn tập KTTMDT
Ôn tập KTTMDT
 
前端概述
前端概述前端概述
前端概述
 
How to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-BooksHow to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-Books
 
Makanan halal-haram-2970785
Makanan halal-haram-2970785Makanan halal-haram-2970785
Makanan halal-haram-2970785
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 

Viewers also liked

ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかたShuhei Iitsuka
 
UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表 UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表 Shuhei Iitsuka
 
Git をはじめよう
Git をはじめようGit をはじめよう
Git をはじめようShuhei Iitsuka
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おうShuhei Iitsuka
 
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2Shuhei Iitsuka
 

Viewers also liked (8)

Webサーバ、HTML
Webサーバ、HTMLWebサーバ、HTML
Webサーバ、HTML
 
ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかた
 
UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表 UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表
 
メール入門
メール入門メール入門
メール入門
 
Git をはじめよう
Git をはじめようGit をはじめよう
Git をはじめよう
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
 
PHP 入門
PHP 入門PHP 入門
PHP 入門
 
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2
 

Similar to Div, span, img の基本的な使い方と CSS の基本

2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdf2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdfBdBangladesh
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4Gheyath M. Othman
 
Xlrays online web tutorials
Xlrays online web tutorialsXlrays online web tutorials
Xlrays online web tutorialsYogesh Gupta
 
dotCSS 2016: Hacking HTML Emails with CSS
dotCSS 2016: Hacking HTML Emails with CSSdotCSS 2016: Hacking HTML Emails with CSS
dotCSS 2016: Hacking HTML Emails with CSSLitmus
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
Css 2c (2) (1) (1) (2)
Css 2c (2) (1) (1) (2)Css 2c (2) (1) (1) (2)
Css 2c (2) (1) (1) (2)gng542
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style SheetsSenthil Kumar
 

Similar to Div, span, img の基本的な使い方と CSS の基本 (20)

2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdf2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdf
 
Dfdf
DfdfDfdf
Dfdf
 
Panel de anclas
Panel de anclasPanel de anclas
Panel de anclas
 
Panel de anclas(x)
Panel de anclas(x)Panel de anclas(x)
Panel de anclas(x)
 
Panel de anclas(x)
Panel de anclas(x)Panel de anclas(x)
Panel de anclas(x)
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 
Articulo java web
Articulo java webArticulo java web
Articulo java web
 
Xlrays online web tutorials
Xlrays online web tutorialsXlrays online web tutorials
Xlrays online web tutorials
 
ppt.pptx
ppt.pptxppt.pptx
ppt.pptx
 
dotCSS 2016: Hacking HTML Emails with CSS
dotCSS 2016: Hacking HTML Emails with CSSdotCSS 2016: Hacking HTML Emails with CSS
dotCSS 2016: Hacking HTML Emails with CSS
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Critical Rendering Path
Critical Rendering PathCritical Rendering Path
Critical Rendering Path
 
Css 2c (2) (1) (1) (2)
Css 2c (2) (1) (1) (2)Css 2c (2) (1) (1) (2)
Css 2c (2) (1) (1) (2)
 
UI 101
UI 101UI 101
UI 101
 
Web technology lab manual
Web technology lab manualWeb technology lab manual
Web technology lab manual
 
Web base - SVG
Web base - SVGWeb base - SVG
Web base - SVG
 
шапка
шапкашапка
шапка
 
Stole16
Stole16Stole16
Stole16
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 

More from Shuhei Iitsuka

Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition  a comprehensive...Online and offline handwritten chinese character recognition  a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...Shuhei Iitsuka
 
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorInferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorShuhei Iitsuka
 
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会Shuhei Iitsuka
 
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networksProcedural modeling using autoencoder networks
Procedural modeling using autoencoder networksShuhei Iitsuka
 
Generating sentences from a continuous space
Generating sentences from a continuous spaceGenerating sentences from a continuous space
Generating sentences from a continuous spaceShuhei Iitsuka
 
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムShuhei Iitsuka
 
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Shuhei Iitsuka
 
Machine learning meets web development
Machine learning meets web developmentMachine learning meets web development
Machine learning meets web developmentShuhei Iitsuka
 
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるPython と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるShuhei Iitsuka
 
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門Shuhei Iitsuka
 
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...Shuhei Iitsuka
 
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataAsia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataShuhei Iitsuka
 
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ RuleShuhei Iitsuka
 
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話Shuhei Iitsuka
 
ウェブサイトで収益を得る
ウェブサイトで収益を得るウェブサイトで収益を得る
ウェブサイトで収益を得るShuhei Iitsuka
 
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるHTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるShuhei Iitsuka
 
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザインウェブサービスの企画とデザイン
ウェブサービスの企画とデザインShuhei Iitsuka
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おうShuhei Iitsuka
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 Shuhei Iitsuka
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう Shuhei Iitsuka
 

More from Shuhei Iitsuka (20)

Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition  a comprehensive...Online and offline handwritten chinese character recognition  a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
 
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorInferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
 
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
 
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networksProcedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
 
Generating sentences from a continuous space
Generating sentences from a continuous spaceGenerating sentences from a continuous space
Generating sentences from a continuous space
 
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
 
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
 
Machine learning meets web development
Machine learning meets web developmentMachine learning meets web development
Machine learning meets web development
 
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるPython と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
 
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
 
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
 
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataAsia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
 
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
 
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
 
ウェブサイトで収益を得る
ウェブサイトで収益を得るウェブサイトで収益を得る
ウェブサイトで収益を得る
 
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるHTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
 
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザインウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
 

Div, span, img の基本的な使い方と CSS の基本

  • 1. div, span, img があればいい
  • 2. div (display: block) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> </body> </html>
  • 3. span (display: inline) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <span>aaa</span> <span>bbb</span> <span>ccc</span> <span>ddd</span> <span>eee</span> </body> </html>
  • 4. img (display: inline-block) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> <img src="https://graph.facebook.com/4/picture?type=large"> </body> </html>
  • 5. width, height (block and inline-block only) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="width: 200px; height: 200px; background: red"></div> </body> </html>
  • 6. margin, padding, border (block and inline-block only) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" width: 200px; height: 200px; margin: 200px; padding: 200px; border: black solid 200px; background: red; "></div> </body> </html>
  • 7. margin 相殺 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" height: 10px; margin: 200px; background: red; "></div> <div style=" height: 10px; margin: 200px; background: red; "></div> </body> </html>
  • 8. margin 相殺 2 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: red; height: 10px"></div> <div style=" height: 10px; margin: 200px; background: red; "> <div style=" height: 10px; margin: 200px; background: red; "> </div> </div> </body> </html>
  • 9. margin 相殺 3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: red; height: 10px"></div> <div style=" height: 10px; margin: 200px; padding: 1px; background: red; "> <div style=" height: 10px; margin: 200px; background: red; "> </div> </div> </body> </html>
  • 10. margin 相殺 4 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: red; height: 10px"></div> <div style=" height: 10px; margin: 200px; background: red; "> a <div style=" height: 10px; margin: 200px; background: red; "> </div> </div> </body> </html>
  • 11. float <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> </body> </html>
  • 12. float <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: pink;"> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa </div> </body> </html>
  • 13. clear <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: pink;"> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa </div> <div style="clear: left"></div> </body> </html>
  • 14. clear <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="background: pink;"> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: red "></div> <div style=" float: left; width: 100px; height: 100px; margin: 10px; background: blue "></div> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa <div style="clear: left"></div> </div> </body> </html>
  • 15. position: relative <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" position: relative; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; top: 100px; left: 100px; "> </div> aaa </body> </html>
  • 16. position: relative <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" position: relative; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; bottom: 100px; right: 100px; "> </div> aaa </body> </html>
  • 17. position: absolute <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style=" position: absolute; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; top: 100px; left: 100px; "> </div> aaa </body> </html>
  • 18. position: fixed <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div style="height: 10000px; width: 10000px"></div> <div style=" position: fixed; background: red; margin: 20px; padding: 20px; border: black solid 20px; width: 100px; height: 100px; top: 100px; left: 100px; "> </div> </body> </html>
  • 19. stylesheet <style> * { background: red } div { background: blue } </style> <link rel="stylesheet" href="style.css">
  • 20. セレクタ • div > div • div + div • div ~ div • div div • div.hoge • div#hoge • div[alt=hoge]
  • 21. cascading <style> * { background: red } div { background: blue } #hoge { background: pink } div#hoge { background: gray } </style> 詳細度 div: (0, 0, 1) div#hoge: (1, 0, 1) div.hoge div#hoge: (1, 1, 2)
  • 22. 他よく使うプロパティ • font-size • overflow • line-height • background-image • background-position • outline