A Pen by Tomo-Fjord on CodePen.
Created
February 13, 2020 07:39
-
-
Save Tomo-Fjord/d46e317a8526f6144df2e6ba53046030 to your computer and use it in GitHub Desktop.
CSS初級
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article> | |
<h1>このページのタイトル</h1> | |
<section> | |
<h2>このセクションの見出し</h2> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
<ul> | |
<li>箇条書き箇条書き箇条書き箇条書き箇条書き箇条書き</li> | |
<li>箇条書き箇条書き箇条書き箇条書き箇条書き箇条書き</li> | |
<li>箇条書き箇条書き箇条書き箇条書き箇条書き箇条書き</li> | |
</ul> | |
<blockquote> | |
<p>引用文段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
</blockquote> | |
</section> | |
<section> | |
<h2>このセクションの見出し</h2> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
<ol> | |
<li>箇条書き箇条書き箇条書き箇条書き箇条書き箇条書き</li> | |
<li>箇条書き箇条書き箇条書き箇条書き箇条書き箇条書き</li> | |
<li>箇条書き箇条書き箇条書き箇条書き箇条書き箇条書き</li> | |
</ol> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
<img src="https://i.gyazo.com/b98230b147d85f4cd86380ee625ffe5d.jpg"> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
</section> | |
<aside> | |
<h2>お問合せ</h2> | |
<p>段落文章文章文章文章文章文章文章文章文章文章文章文章、文章文章文章文章文章文章文章文章文章文章文章文章文章。</p> | |
<form> | |
<div class="form-items"> | |
<div class="form-items__item"> | |
<label>会社名</label> | |
<input type="text"> | |
</div> | |
<div class="form-items__item"> | |
<label>担当者名</label> | |
<input type="text"> | |
</div> | |
<div class="form-items__item"> | |
<label>お問合せ内容</label> | |
<textarea></textarea> | |
</div> | |
</div> | |
<div class="form-action"> | |
<input type="submit" value="送信"> | |
</div> | |
</form> | |
</aside> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
//////////////////////////////////////// | |
reset.css を読み込んで全てのスタイルをなくす | |
//////////////////////////////////////// | |
*/ | |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/* | |
//////////////////////////////////////// | |
reset.css では足りない初期化を追加 | |
//////////////////////////////////////// | |
*/ | |
/* 全てに box-sizing: border-box; を適用 */ | |
*, *:before, *:after { | |
box-sizing: border-box; | |
} | |
/* 画像に関する初期設定 */ | |
img { | |
/* 大きい画像がはみ出さないように */ | |
max-width: 100%; | |
/* 画像周りの無駄なスペースができないように */ | |
vertical-align: bottom; | |
} | |
[data-whatinput="mouse"] *:focus, | |
[data-whatinput="touch"] *:focus { | |
outline: none; | |
} | |
/* | |
//////////////////////////////////////// | |
初期設定 | |
//////////////////////////////////////// | |
*/ | |
body { | |
padding: 32px 0; | |
color: #56564f; | |
} | |
article { | |
width: 640px; | |
margin: 0 auto; | |
} | |
/* | |
//////////////////////////////////////// | |
以下に自分なりのCSSを書いて読みやすくする | |
//////////////////////////////////////// | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment