1分で読める!【CSS】要素の横幅の上限を指定する方法
本日のテーマは
要素の横幅の上限を指定する方法です!
実装方法
max-widthプロパティを使用すればOKです!
.sample{
max-width:1170px;
}
max-widthを使用せずにいると
幅が大きくなると要素の幅もつられて伸びてしまいます。
それを防ぐためにmax-widthが有効です。
max-widthを使用すれば要素の幅の上限を指定できるので、
指定した幅以上には要素が伸びなくなります。
5分で読める!【HTML】同じページの指定の場所へ移動する方法
本日のテーマは
同じページの特定箇所へ移動する方法についてです!
実装方法
<a href="#Sample">Sample</a>
<div id="Sample">Sample</div>
まずはa要素でリンクを作ります。
要素内でリンクの移動を先を指定します。
指定の仕方は「#」をつけて「#」の後に任意の名前をつけましょう。
次に移動先の要素を作ります。
移動先の要素にid属性をつけましょう。
※name属性でもリンクの移動はできるそうですが、
id属性が一般的に推奨されてるそうです。
そしてid属性の属性値として、
a要素で指定した任意の名前を指定しましょう。
ちなみに、移動先の要素はdiv要素だけでなく
p要素やa要素など色々な要素を指定できます。
3分で読める!【CSS】重なり順が下の要素をクリックする方法
本日のテーマは
重なり順が下の要素をクリックする方法です!
どう言う時に使用するのか?
z-indexなどを使用して要素を前面に出した際に
背面になった要素が機能しなくなることがあります。
※ボタンが反応しない、a要素が反応しないなど
使用するCSS(サンプルコードあり)
使用するCSSは「pointer-events: none;」です。
<サンプルコード>
.sample1{
z-index:2;
pointer-events;
}
.sample2{
z-index:1;
}
前面に出ている要素にpointer-events:noneを指定すれば、
背面にあるリンク要素やボタン要素も使用できます!
1分で読める!【CSS】floatプロパティの解除方法
本日のテーマは
floatプロパティの解除方法です。
前提(floatプロパティ使用の注意点
通常、親要素の長さは子要素全体の長さになります。
ただし、floatをしようすると親要素の高さが0になります。
※floatが「浮かす」という意味から小要素の長さが0になります。
この状況だとレイアウト崩れが起きてしまうので
floatプロパティを解除する必要があります。
実装方法
clear:left(right);を使用すればOKです!
.sample{
clear:left(right);
}
1分で読める!【CSS】画面の幅の上限を指定する方法
本日のテーマは
画面の幅の上限を指定する方法です!!
実装方法
max-wudthプロパティを使用すればOKです!
.sample{
max-width:960px;
}
1分で読める!【小技】Webページ全体を1枚のスクショに収める方法
本日のテーマは
Webページ全体を1枚のスクショに収める方法です!
方法
以下の手順で操作してください。
1、スクショしたいページにいく
2、「F12」か「command」と「option」と「P」を押す
3、「command」と「shift」と「I」を押す
4、fullと入力→enterキーを入力
補足(全体をスクショした画像を綺麗に貼る方法)
上記でスクショした画像は大きすぎて、
画面に綺麗に収まらないと思います。
その時は、overflowプロパティのhiddenを使用するのが
オススメです!!
.sample{
overflow:hidden;
}
overflow:hidden;は、
要素の長さに収まらなかった部分を隠して表示してくれます。