超現場ブログ

Technique,Design and Events

「先生! padding って使うと シュッて小さくなる んですよね!」

Twitter Facebook Google+ はてブ

20160824

はじめまして。
WEB塾名駅校です。

さて今回は、僕が受け持ってる生徒さんから出たちょっとした一言から、
padding について」記事にしてみようと思います。
内容としてはCSSの初歩の初歩になります。

ではまず、
よくある図を使ったボックスモデルを見て padding のおさらいです。

01

border を境界として、外側が margin 内側が padding ですね。
僕はよくこのモデルを説明する時に、以下の表現を使ったりします。

width : 骨格
padding : 筋肉・脂肪
border : 皮膚
margin : 相手との距離

※margin については「相殺」という概念がありますので詳しくはまた

例を挙げますと

02
こちらは padding の少ないすっきりしたレイアウトで

03
こちらは padding をたっぷり使いながらも締まったレイアウト。

04
こちらは padding の少ない精悍なレイアウトで

05
こちらは padding を取り過ぎただらしないレイアウトといった感じでしょうか。

さてようやくここからが本題です。
今回の記事のタイトルにもしてますように、この生徒さん、

『先生! padding って使うと シュッて小さくなる んですよね!』

っておっしゃったんです。
なんでしょう。
この擬音を使った独特の言い回し。
僕こういう表現大好きなんですよ。

今回挙げてきた例からしますと、
padding を使うと「シュッて小さくなる」よりは、「ムキッ」となったり「プヨっ」としそうです。
そこで、この生徒さんがこの発言をしたシチュエーションに着目してみることにします。

06

左右に float で振り分けたボックスの左要素の中に、サイドメニューを作ろうとしていました。
padding なしの状態ですので、テキストが左にピッタリくっついています。

07

そして、この左右の要素はどちらもカラム落ちしない程度にちょうどよく width が決まっている状態です。
この要素にこれまたカラム落ちしないようにちょうどよく padding を入れようとすると、 padding の分だけ width を削らなければなりません。

08

『あ!!! ( width が ) シュッと小さくなった!!!』

この生徒さんにとっての padding は、いつもこういう使い方だったため、

「(要素のwidthを)シュッと小さくするもの!」

という認識になっていたようです。
そんなわけで、この回の授業ではその認識に加えて、padding は「要素に余裕を持たせ(てふっくらさせ)るもの」という認識が加わりましたというお話でした。

WEB塾では初歩の初歩からの講義も行っており、生徒さんの理解度に合わせながら授業を進めます。
興味はあるけど今一歩踏み出せない方、体験授業で雰囲気を感じてみるのはいかがでしょうか?

→ 体験レッスンのお申し込み・お問合せはこちら

天高く馬肥ゆる秋!気になる お腹の padding 減らしたいね!

→ 秋のshift_upセミナー はこちら!

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.