<!DOCTYPE HTML>
<html lang="ja">
<head>
<link rel="stylesheet" text="text/css" href="css.css">
<title></title>
</head>
<body>
<h1>border</h1>
<p>p｛ <span class="blue">border</span>：
<span class="yellow">1px</span>
<span class="orange">solid</span>
<span class="red">red</span>；｝</p>
<ul>
<li><span class="blue2">プロパティ</span>※見出し（<h1>~<h6>）やボタン<button>の装飾に使われることが多い</li>
<li><span class="yellow2">太さ</span></li>
<li><span class="orange2">形状</span></li>
<li><span class="red2">色</span></li>
</ul>
<h3>形状の種類</h3>
<table border=1>
<tr><th bgcolor='#a9a9a9'>border形状の値</th><th bgcolor='#a9a9a9'>概要</th></tr>
<tr><td>solid</td><td>１本線（実線）で表示(－)</td></tr>
<tr><td>double</td><td>２本線で表示(＝)</td></tr>
<tr><td>dashed</td><td>破線で表示さ(---)</td></tr>
<tr><td>dotted</td><td>点線で表示(・・・)</td></tr>
<tr><td>none</td><td>線が表示されない（初期値）<br>
noneの状態でほかの要素とborderが被っている場合、ほかの要素は<span class="red2">表示される</span></td></tr>
<tr><td>hidden</td><td>線は表示されない<br>
hiddenの状態でほかの要素とborderが被っている場合、ほかの要素は<span class="red2">表示されない</span></td></tr>
</table>
<h4>例</h4>
<p>上記の形状4つ(solid,double,dashed,dotted)を動かしてみる。</p>
<ul>
<li>solidの場合</li>
<p><span class="solid">これは１本線です。</span></p>
<li>doubleの場合</li>
<p><span class="double">これは２本線です。</span></p>
<li>dashedの場合</li>
<p><span class="dashed">これは破線です。</span></p>
<li>dottedの場合</li>
<p><span class="dotted">これは点線です。</span></p>
</ul>
<h3>上下左右一部のみを指定</h3>
<ul>
<li>線を上のみに表示(border-top)</li>
<p><span class="border-top">上↑だけに表示されています。</span>（cssコード＝｛border-top: solid 3px red;｝）</p>
<li>線を右のみに表示(border-right)</li>
<p><span class="border-right">右→だけに表示されています。</span>（cssコード＝｛border-right: solid 3px red;｝）</p>
<li>線を下のみに表示(border-bottom)</li>
<p><span class="border-bottom">下↓だけに表示されています。</span>（cssコード＝｛border-bottom: solid 3px red;｝）</p>
<li>線を左のみに表示(bottom-left)</li>
<p><span class="border-left">左←だけに表示されています。</span>（cssコード＝｛border-left: solid 3px red;｝）</p>
</ul>
<h3>border-style</h3>
<p>borderの<span class="red2">形状のみ</span>を指定したい場合に使用。上下左右で異なる形状にしたい場合は、スペースで区切って複数の値を指定する。</p>
<ul>
<li>値を１つ指定：上下左右が指定される。</li>
<li>値を２つ指定：１つ目は「上下」、２つ目は「左右」が指定される。</li>
<li>値を３つ指定：１つ目は「上」、２つ目は「左右」、３つ目は「下」が指定される。</li>
<li>値を４つ指定：１つ目は「上」、２つ目は「右」、３つ目は「下」、４つ目は「左」が指定される。</li>
</ul>
<p>※border-width,border-colorも同様に指定できる。</p>
<h4>例</h4>
<ul>
<li>上下左右に実線</li>
<p><span class="st-so">上下左右を実線で囲んでいます。</span>（cssコード＝｛border-style: solid;）</p>
<p>※｛border: solid;｝と同意</p>
<li>「上下」に実線、「左右」に２本線</li>
<p><span class="joge-sayu">上下は実践、左右は２本線で囲んでいます。</span>（cssコード＝｛border-style: solid double;｝）</p>
<li>「上」に実線、「左右」に２本線、「下」に破線</li>
<p><span class="ue-sayu-sita">上は実線、左右は２本戦、下は破線で囲んでいます。</span>（cssコード＝｛border-style: solid double dashed;｝）</p>
<li>「上」に実線、「右」に２本線、「下」に破線、「左」に点線</li>
<p><span class="ue-migi-sita-hidari">上は実線、右は２本線、下は破線、左は点線で囲んでいます。</span>（cssコード＝｛border-style: solid double dashed dotted;｝）</p>
</ul>
<h3>border-width</h3>
<p>borderの<span class="red2">形状の太さのみ</span>を指定したい場合に使用。上下左右で異なる太さにすることも可能。<br>
※位置の指定方法はborder-styleと同様である。</p>
<h4>例</h4>
<ul>
<li>上下左右に７ｐｘ</li>
<p><span class="all-width">上下左右を７ｐｘの実線で囲んでいます。</span>（cssコード＝｛border-width: ７px;｝）</p>
<li>「上下」に７ｐｘ、「左右」に５ｐｘ</li>
<p><span class="joge-sayu-width">上下は７ｐｘ、左右は５ｐｘの実線で囲んでいます。</span>（cssコード＝｛border-width: 7px 5px;｝）</p>
<li>「上」に７ｐｘ、「左右」に５ｐｘ、「下」に３ｐｘ</li>
<p><span class="ue-sayu-sita-width">上は７ｐｘ、左右は５ｐｘ、下は３ｐｘの実線で囲んでいます。</span>（cssコード＝｛border-width: 7px 5px 3px;｝）</p>
<li>「上」に７ｐｘ、「右」に５ｐｘ、「下」に３ｐｘ、「左」に１ｐｘ</li>
<p><span class="ue-migi-sita-hidari-width">上は７ｐｘ、右は５ｐｘ、下は３ｐｘ、左は１ｐｘの実線で囲んでいます。</span>（cssコード＝｛border-width: 7px 5px 3px 1px;｝）</p>
</ul>
<p>※注意：「border-style」で形状を指定しないと線で囲まれないよ！</p>
<h3>border-color</h3>
<p>borderの色を指定するとき使用。「形状」「太さ」と同様、上下左右に各色を指定することができる。<br>
※border-style、border-widthの例にはborder-colorを使用して赤色に指定しているよ！</p>
<h4>例</h4>
<ul>
<li>上下左右は青色</li>
<p><span class="blue-only">上下左右を青色の実線で囲んでいます。</span>（cssコード＝｛border-color: blue;}）</p>
<li>「上下」に青色、「左右」に赤色</li>
<p><span class="blue-red">上下は青色、左右は赤色の実線で囲んでいます。</span>（cssコード＝｛border-color: blue red;｝）</p>
<li>「上」に青色、「左右」に赤色、「左右」に緑色</li>
<p><span class="blue-red-green">上は青色、左右は赤色、下に緑色の実線で囲んでいます。</span>（cssコード＝｛border-color: blue red green;｝）</p>
<li>「上」に青色、「右」に赤色、「下」に緑色、「左」に黄色</li>
<p><span class="blue-red-green-yellow">上は青色、右は赤色、下は緑色、左は黄色の実線で囲んでいます。</span>（cssコード＝｛border-color: blue red green #ffd900;｝）</p>
</ul>
<p>※注意；「border-style」で形状をs指定しないと線で囲まれないよ！</p>
<h3>おまけ:border-radius</h3>
<p>borderの角を丸めたい場合に使用するプロパティ。正確にはセレクタの境界の外側の角を丸めるため、borderを使用しなくても角を丸くすることは可能。<br>
border-radiusは「左上」、「右上」、「右下」、「左下」の順で値を指定することが可能。値を「50％」に指定することで円を作ることができる。</p>
<h4>例</h4>
<ul>
<li>radiusの値を5px</li>
<p><span class="border-radius">border-radiusで丸めています。</span>（cssコード＝｛border-radius: 5px;｝）</p>
<li>radiusの値を50%</li>
<p><span class="border-circle">raidusの値は50%です。</span>（cssコード＝｛border-raidus: 50%;｝）</p>
</ul>
<h1>font-family</h1>
<p><span class="red">p</span> {
<span class="blue">font-family:</span>
<span class="green">'Impact'</span>,
<span class="orange"> sans-serif</span>
;}
</p>
<ul>
<li><span class="red2">段落（pタグ）</span>※<p>以外にも<li>,<ol>,<h1>~<h6>等も使える！</li>
<li><span class="blue2">フォント（font-family）</span>※このまま</li>
<li><span class="green2">フォント名</span></li>
<li><span class="orange2">総称フォント</span></li>
</ul>
<h3>総称フォントファミリーとは</h3>
<p>ページを開いたパソコンに指定したフォントが全く入っていなかった場合に「せめてこういう系統のフォントを表示して」とブラウザに伝えるもの。</p>
<ul>
<li>sans-serif : <span class="sans-serif">ゴシック体フォント</span></li>
<li>serif : <span class="serif">明朝体フォント</span></li>
<li>monospace : <span class="monospace">等幅系フォント</span></li>
<li>cursive : <span class="cursive">筆記体系フォント</span></li>
<li>fantasy : <span class="fantasy">装飾系フォント</span></li>
</ul>
<h4>例</h4>
<p>上記のCSSのフォント「Impact」で動かしてみる。</p>
<ul>
<li>ゴシック体フォントの場合</li>
<p><span class="im-sa">abcdefghijklmnopqrstuvwxyz</span></p>
<li>明朝体フォントの場合</li>
<p><span class="im-se">abcdefghijklmnopqrstuvwxyz</span></p>
<li>等幅系フォントの場合</li>
<p><span class="im-mo">abcdefghijklmnopqrstuvwxyz</span></p>
<li>筆記体系フォントの場合</li>
<p><span class="im-cu">abcdefghijklmnopqrstuvwxyz</span></p>
<li>装飾系フォント</li>
<p><span class="im-fa">abcdefghijklmnopqrstuvwxyz</span></p>
</ul>
<p>※等幅・筆記体・装飾系フォントはImpactに対応していない可能性あり</p>
<h1>overflow</h1>
<p>要素の内容が多すぎてボックスからはみ出た部分(オーバーフロー)をどう扱うかを指定するプロパティ。<br>
p｛
<span class="blue">overflow</span>：
<span class="orange">visible</span>;｝</p>
<ul>
<li><span class="blue2">プロパティ</span></li>
<li><span class="orange2">値</span></li>
</ul>
<h3>値の種類</h3>
<table border=1>
<tr><th bgcolor='#a9a9a9'>overflowの値</th><th bgcolor="#a9a9a9">概要</th></tr>
<tr><td>visible</td><td>初期値。<br>内容はクリッピングされない。<span class="red2">ボックスの外側に表示される</span>ことがある。</td></tr>
<tr><td>hidden</td><td>必要に応じてボックスに合わせて内容を切り取る。<span class="red2">スクロールバーは表示されない</span>。<br>(JavascriptのHTMLElement:offsetLeftようなプロパティの値を設定するなどでスクロールができる。そのため要素はスクロールコンテナーとなる。</td></tr>
<tr><td>clip</td><td>hidden同様にボックスに合わせて内容を切り取る。スクロールバは表示されない。hiddenとの違いはclipキーワードがプログラム的なスクロールを含め、<span class="red2">全てのスクロールを禁止する</span>こと。</td></tr>
<tr><td>scroll</td><td>必要に応じて内容を切り取るが<span class="red2">スクロールが可能</span>に。内容がクリッピングされてるかどうかに関わらず、スクロールバーを常に表示する。</td></tr>
<tr><td>atuo</td><td>内容がボックス内に収まる場合はvisibleと同じように表示される。内容が溢れる場合はスクロールバーを表示する。</td></tr>
</table>
<p>※clipはあまり使わないかも！</p>
<h4>例</h4>
<ul>
<li>visibleの場合</li>
<p class="o-visible">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p>
<br>
<li>hiddenの場合(clipも同様の動作)</li>
<p class="o-hidden">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p>
<li>scrollの場合</li>
<p class="o-scroll">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p>
<li>autoの場合</li>
<p class="o-auto">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p>
</ul>
<h3>overflowを縦横個別に指定</h3>
<table border=1>
<tr><th bgcolor='#a9a9a9'>プロパティ名</th><th bgcolor='#a9a9a9'>概要</th></tr>
<tr><th>overflow-x</th><th><span class="red2">横方向</span>へのはみ出しに対して処理を指定</th></tr>
<tr><th>overflow-y</th><th><span class="red2">縦方向</span>へのはみ出しに対して処理を指定</th></tr>
</table>
<p>※「x」座標は「東西」の軸を表しているからから「横」、「y」座標は「南北」の軸を表しているから「縦」って覚えるといいかも！</p>
<h4>例</h4>
<p>縦はhiddenで切り取り、横はスクロールできるようにする。</p>
<p class="x-h-y-s">桃太郎<br>昔、昔、ある所にお爺さんとお婆さんが住んでいました。お爺さんは山へ芝刈りに、お婆さんは川へ洗濯に行きました。お婆さんが川で洗濯をしていると大きな桃が流れてきました。「なんと大きな桃じゃろう！家に持って帰ろう。」とお婆さんは背中に担いで家に帰り、その桃を切ろうとすると、なんと桃から大きな赤ん坊が出てきたのです。「おっとたまげた。」二人は驚いたけれども、とても喜び、「何という名前にしましょうか。」「桃から生まれたから、桃太郎というのはどうだろう。」「それがいい。」<br>桃太郎はあっと言う間に大きくなり、立派な優しい男の子になりました。ある日、桃太郎は二人に言いました。「鬼ヶ島に悪い鬼が住んでいると聞きました。」「時々村に来て悪いことをするので皆困っている。」とおじいさんが答えると、「それでは私が行って退治しましょう。お母さん、黍団子を作ってください。」おばあさんはとても美味しい日本一の黍団子を作り、桃太郎はそれを腰の袋に入れるとさっそく鬼ヶ島に向けて旅立ちました。</p>
<div class="code-box">
<span class="box-title">（cssコード）</span>
<p>.クラス名｛<br>
width: 80%;<br>
height: 95px;<br>
border: solid 2px black; <br>
white-space: nowrap; /*テキストを改行させないようにする*/<br>
overflow-x: scroll;<br>
overflow-y: hidden;<br>
｝</p>
</div>
<p>※{overflow: scroll(横) hidden(縦);}でも例と同じ動きができるよ！</p>
<h1>margin・padding</h1>
<p>CSSでは要素のまわりの余白をmarginとpaddingというプロパティで指定する。</p>
<ul>
<li>padding：要素の<span class="orange2">内側</span>の余白</li>
<li>margin：要素の<span class="red2">外側</span>の余白</li>
</ul>
<h4>例</h4>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYKZEPo" data-editable="true" data-user="AM1-19" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/AM1-19/pen/LYKZEPo">
Untitled</a> by 午前1時19分 (<a href="https://codepen.io/AM1-19">@AM1-19</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
<h3>上下左右の個別指定(margin)</h3>
<ul>
<li>margin-top：上だけ指定</li>
<li>margin-bottom：下だけを指定</li>
<li>margin-left：左だけを指定</li>
<li>margin-right: 右だけを指定</li>
</ul>
<p>※{margin: 10px(上) 20px(右) 30px(下) 40px(左);}でも上、下、左、右の順で指定できるよ！<br>
{margin: 10px 20px}で上下、左右の順で指定できるよ！</p>
<h4>例</h4>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="YzoWPZy" data-editable="true" data-user="AM1-19" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/AM1-19/pen/YzoWPZy">
Untitled</a> by 午前1時19分 (<a href="https://codepen.io/AM1-19">@AM1-19</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
<h3>上下左右の個別してい(padding)</h3>
<ul>
<li>padding-top:上だけ指定</li>
<li>padding-bottom：下だけ指定</li>
<li>padding-left：左だけ指定</li>
<li>padding-right：右だけ指定</li>
</ul>
<p>※{padding: 10px(上) 20px(右) 30px(下) 40px(左);}でも上、下、左、右の順で指定できるよ！<br>
{padding: 10px 20px}で上下、左右の順で指定できるよ！</p>
<h4>例</h4>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="XWLKJqQ" data-editable="true" data-user="AM1-19" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/AM1-19/pen/XWLKJqQ">
Untitled</a> by 午前1時19分 (<a href="https://codepen.io/AM1-19">@AM1-19</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
<h3>marginの相殺</h3>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYKbJpr" data-editable="true" data-user="AM1-19" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/AM1-19/pen/LYKbJpr">
Untitled</a> by 午前1時19分 (<a href="https://codepen.io/AM1-19">@AM1-19</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
<p>margin指定が複数並ぶと１つしか適用されないよ！(値が大きい方が適用される)<br>
※親要素と子要素でも相殺は起こる。</p>
<h3>paddingは相殺されない</h3>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="eYwBLWG" data-editable="true" data-user="AM1-19" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/AM1-19/pen/eYwBLWG">
Untitled</a> by 午前1時19分 (<a href="https://codepen.io/AM1-19">@AM1-19</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
<h3>marginで中央配置</h3>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="MWMbqvo" data-editable="true" data-user="AM1-19" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/AM1-19/pen/MWMbqvo">
Untitled</a> by 午前1時19分 (<a href="https://codepen.io/AM1-19">@AM1-19</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
<p>※autoで上下中央配置はできないよ！あとpaddingでは中央配置はできないよ！</p>
</body>
</html>
