1分で読める!【CSS】要素の横幅の上限を指定する方法

f:id:ume1017:20201114201335j:plain 

本日のテーマは

要素の横幅の上限を指定する方法です!

 

実装方法

max-widthプロパティを使用すればOKです!

 

.sample{
max-width:1170px;
}

 

max-widthを使用せずにいると

幅が大きくなると要素の幅もつられて伸びてしまいます。

それを防ぐためにmax-widthが有効です。

 

max-widthを使用すれば要素の幅の上限を指定できるので、

指定した幅以上には要素が伸びなくなります。

5分で読める!【HTML】同じページの指定の場所へ移動する方法

f:id:ume1017:20201113185535j:plain

 
本日のテーマは

同じページの特定箇所へ移動する方法についてです!

 

実装方法

<a href="#Sample">Sample</a>

<div id="Sample">Sample</div>

 

まずはa要素でリンクを作ります。

要素内でリンクの移動を先を指定します。

指定の仕方は「#」をつけて「#」の後に任意の名前をつけましょう。

 

次に移動先の要素を作ります。

移動先の要素にid属性をつけましょう。

※name属性でもリンクの移動はできるそうですが、

id属性が一般的に推奨されてるそうです。

 

そしてid属性の属性値として、

a要素で指定した任意の名前を指定しましょう。

 

ちなみに、移動先の要素はdiv要素だけでなく

p要素やa要素など色々な要素を指定できます。

 

3分で読める!【CSS】重なり順が下の要素をクリックする方法

f:id:ume1017:20201112194243j:plain

 
本日のテーマは

重なり順が下の要素をクリックする方法です!

 

どう言う時に使用するのか?

z-indexなどを使用して要素を前面に出した際に

背面になった要素が機能しなくなることがあります。

※ボタンが反応しない、a要素が反応しないなど

 

使用するCSS(サンプルコードあり)

使用するCSSは「pointer-events: none;」です。

<サンプルコード>

.sample1{
     z-index:2;
     pointer-events;
}

.sample2{
     z-index:1;
}

前面に出ている要素にpointer-events:noneを指定すれば、

背面にあるリンク要素やボタン要素も使用できます!

 

1分で読める!【CSS】pxとemの違いについて

f:id:ume1017:20201111193048j:plain


本日のテーマは

フォントサイズの単位である「px」「em」の違いです。 

px(ピクセル)とem(エム)の違いは?

結論から言うと、

px(ピクセル)は絶対値のことで、em(エム)は相対値のことです。

 

pxで指定すれば、どんな状況でもフォントは指定した数値です。

一方でemは要素のフォントの大きさによって数値が変化します。

例えば、

ある文字の大きさが10pxであれば1emは10pxであり、

30pxであれば1emは30pxです。

1分で読める!【CSS】floatプロパティの解除方法

f:id:ume1017:20201110200326j:plain

 

本日のテーマは

floatプロパティの解除方法です。

 

前提(floatプロパティ使用の注意点

通常、親要素の長さは子要素全体の長さになります。

ただし、floatをしようすると親要素の高さが0になります。

※floatが「浮かす」という意味から小要素の長さが0になります。

 

この状況だとレイアウト崩れが起きてしまうので

floatプロパティを解除する必要があります。

 

実装方法

clear:left(right);を使用すればOKです! 

   .sample{
    clear:left(right);
   }

 

 

1分で読める!【小技】Webページ全体を1枚のスクショに収める方法

f:id:ume1017:20201108184056j:plain

 

本日のテーマは

Webページ全体を1枚のスクショに収める方法です!

方法

以下の手順で操作してください。

1、スクショしたいページにいく

2、「F12」か「command」と「option」と「P」を押す

3、「command」と「shift」と「I」を押す

4、fullと入力→enterキーを入力

 

補足(全体をスクショした画像を綺麗に貼る方法)

上記でスクショした画像は大きすぎて、

画面に綺麗に収まらないと思います。

 

その時は、overflowプロパティのhiddenを使用するのが

オススメです!!

   .sample{
    overflow:hidden;
   }

overflow:hidden;は、

要素の長さに収まらなかった部分を隠して表示してくれます。