Enviar búsqueda
Cargar
CSS Basic and Tips
•
3 recomendaciones
•
931 vistas
nyatto73
Seguir
在職中にCSSでよく質問された内容についてまとめた、某社退職時の置き土産。 (Elementary CSS tips in Japanese.)
Leer menos
Leer más
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 41
Recomendados
【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識
Sota Takahashi
HTML2
HTML2
orangelabo
CSS workshop @ OutSystems
CSS workshop @ OutSystems
Ruben Goncalves
Top front-end techniques for OutSystems
Top front-end techniques for OutSystems
Ruben Goncalves
コンテンツ・モデルのおはなし
コンテンツ・モデルのおはなし
Atsuco Asaoka
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Htmlの基本
Htmlの基本
SD Labo
Htmlの基礎
Htmlの基礎
SD Labo
Recomendados
【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識
Sota Takahashi
HTML2
HTML2
orangelabo
CSS workshop @ OutSystems
CSS workshop @ OutSystems
Ruben Goncalves
Top front-end techniques for OutSystems
Top front-end techniques for OutSystems
Ruben Goncalves
コンテンツ・モデルのおはなし
コンテンツ・モデルのおはなし
Atsuco Asaoka
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Htmlの基本
Htmlの基本
SD Labo
Htmlの基礎
Htmlの基礎
SD Labo
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Más contenido relacionado
Destacado
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Destacado
(20)
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
CSS Basic and Tips
1.
レイアウト崩れで困ったときに… CSS 基礎&Tips
2.
CSSの基礎
3.
ボックスモデル Box Model
4.
ボックスモデル margin border padding content
5.
ボックスモデル ブラウザの開発ツールで確認できます Firefox (Firebug) Google Chrome
6.
ブロックレベル要素 インライン要素 Block-Level Elements &
Inline Elements
7.
ブロックレベル要素 見出し 段落 表など、 ・ ・ 文書を構成する基本となる要素で、 独立したブロック (かたまり) として扱われる。 下にレイアウトされてゆく。 ブロックレベル要素 ブロックレベル要素
8.
ブロックレベル要素 他のブロックレベル要素やインライン要素を 配置することができる。 ブロックレベル要素 ブロックレベル要素 インライン要素 インライン要素
9.
ブロックレベル要素 代表的なタグ <div>、 <p>、 <h1>∼<h6>、 <form>、 <table>、 <ul>、 <ol>、 <dl>、 <blockquote>、 <address>
10.
インライン要素 ブロックレベル要素内に特定の意味を持たせる要素で、 行内の一部として扱われる。 横にレイアウトされてゆく。 インライン要素 インライン要素 インライン要素 インライン要素 インライン要素
11.
インライン要素 インライン要素を配置することはできるが、 ブロックレベル要素を配置することはできない。 インライン要素 インライン要素 インライン要素 ブロックレベル要素
12.
インライン要素 代表的なタグ <a>、 <img>、 <span>、 <input>、 <select>、 <label>、 <strong>、 <em>
13.
HTML5での注意点 HTML5では、 ブロックレベル要素とインライン要素の分類はなくなる。 インライン要素にブロックレベル要素を配置することもできる。 インライン要素 インライン要素 インライン要素 ブロックレベル要素
14.
基本レイアウト
15.
floatを使った段組み Column Layout
16.
2カラム 通常
17.
2カラム これもアリ
18.
3カラム
19.
float使用時の注意点 必ずwidthを指定する floatした後は必ず解除する これは約束。
20.
float使用時の注意点 floatを解除し忘れることによる レイアウト崩れが非常に多いです
21.
floatの解除の仕方 Clear Float
22.
clearプロパティ 後続の要素に clear: both;
を指定
23.
clearfix 親要素に class="clearfix" を指定
24.
clearfix (2004年) .clearfix:after { content: "
"; . display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac ¥*/ * html .clearfix {height: 1%;} .clearfix {display: block;}
25.
clearfix (201 1年) .clearfix:before, .clearfix:after { content: "
"; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { *zoom: 1; }
26.
位置指定 Positioning
27.
絶対配置 position: absolute; 基準点からのオフセッ トで位置を指定する
28.
絶対配置 position: absolute; 基準点 top left position: absolute; top:
20px; left: 20px; 基準点からのオフセッ トで位置を指定する
29.
絶対配置 position: absolute; position: absolute; bottom:
20px; right: 20px; right bottom 基準点 基準点は、 上下左右どこでもOK
30.
絶対配置の注意点 基準点を指定しない場合は、 ウィンドウの左上が基準点になる。 基準点
31.
基準点の設定 基準にしたい親要素に position: relative; を指定 基準点 position:
ralative; position: absolute; top: 10px; left: 10px;
32.
CSS Tips
33.
初心者のために CSS Tips for
Beginners
34.
vertical-align 画像の下に謎のスキマができる場合
35.
vertical-align 画像に vertical-align: bottom;
36.
display 要素の表示形式を指定する display: none; 要素を非表示にし、 レイアウトに影響を与えない display: block; 要素をブロックボックスとして生成する display:
inline; 要素をインラインボックスとして生成する display: inline-block; 幅や高さなどを指定できるインライン要素を生成する
37.
display 例えば、 画像を横並びにしたい場合 li { display: inline; }
38.
display 例えば、 画像を横並びにしたい場合 li { display: inline; }
39.
display display: inline; display: inline-block; だけでは、 スキマができる 0.34em程度のスキマ
40.
display 代替案① float を使う <li> <li> <li> li { float:
left; width: 150px; } floatの解除を忘れずに
41.
display 代替案② HTMLソースの改行を削除 <ul> <li> ・ </li><li>
・ </li><li> ・ </li> ・・ ・・ ・・ </ul> <li> <li> <li>