marginとpaddingWEB制作CSSのmarginとpaddingの違いをなるべく詳しく説明し、backgroundとborderを使って要素を見える化する方法を紹介。理解する方法CSSでよく使うプロパティTOP5に入るといっても過言ではないこの3種。CSSに慣れていないと、混乱しやすい3つです。なにがどうなっているのかを理解するのによく使っていた方法として、backgroundに色を付ける、ボーダーを適用する、という方法があります。最近はディベロッパーツールが優秀なのでそっちを使うことの方が多いのですが、覚えておくといいことがあるかもしれないので紹介します。何もしない状態だとこの状態<div>に対して以下のCSSを適用したものをサンプルにします。色なしこれに背景色(backgound:#ddd;)とborderを適用してみます。色あり線ありこんな感じで、色と線が付きますよね。することで、divの影響範囲と、paddingのサイズが見える化されます。paddingで指定した20pxには色がつき、marginの20pxには色が付きません。これをまず理解してください。borderで書かれた線の向こう側20pxがmarginの効くエリアになります。サンプルはボーダーも背景色もあるので分かりやすいですよね。ミスを理解するために可視化するということもう少し実践的なサンプルを用意します。ディスクリプションでそれを並べたデザインです。PHPの良いところは難しいと思われていることPHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。paddingを詰めれば良いかと。40px;}h3にpadding-top:40pxがかかっているので、あきらかにコイツのせいなんですが、あえてそこは無視しましょう。h3に色を付けて線を付けてみます。h3と隣接するpにも線と色をつけてみました。PHPの良いところは難しいと思われていることPHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。h3の背景色のついた領域の上に空間があるので、paddingを調整すれば間が詰まることがわかります。ボーダーと背景色の間にスペースがないので、paddingが0になっているのがわかります。PHPの良いところは難しいと思われていることPHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。背景色のエリアの上の隙間がなくなり、ボーダーの上に隙間ができました。画像との距離は40pxで同じですが、指定方法が違うわけですね。ディベロッパーツールでみるとよくわかるこれをディベロッパーツールで見るとわかりやすく書かれています。firefoxのディベロッパーツールディベロッパーツールを出して、「インスペクター」で要素を選択し、「レイアウト」というタブをクリックすると上記の図が出てきます。紫の色がpaddingエリアで黄色の背景がmarginのエリアです。marginとpaddingの違いを理解するということmarginはborderの外側、paddingはborderの内側という特性を理解しておけば、余白を設けるときにどっちを指定すればよいのかがわかりますよね。どちらも同じ余白を取る方法ですが、borderで囲った外側に余白をつくりたいのか、内側に作りたいのかで指定するプロパティが変わります。どっちでもよければどっち使ってもいいんですけど、余白の意味をちゃんと考えて指定することが大事なわけです。タグの余白をpaddingで指定するか、marginで指定するかによって、クリッカブルエリアの大きさが変わってきます。paddingで指定した余白はクリッカブル、marginで指定した余白はクリックできない余白になります。borderの外側の余白だから。こんな感じで仕組みを理解して使うと、使い方がわかってきます。問題解決の手段は問題を切り分けることmarginとpaddingのどちらで指定されているか、見える化して確認する方法を紹介しました。marginはborderの外側、paddingはborderの内側この仕組みを理解し、要素に色と線を付けて確認すれば、何を調整すればよいかがわかります。問題を解決するには、現状がどうなっているかを正しく理解して、問題に対してどういう改善方法を行えばよいかを明確にする必要があります。これ、例題ではCSSを変更して色と線を引きましたが、実際はディベロッパーツールにCSSを書き込めば検証できますので、ディベロッパーツールを正しく使うとこの工数を削減できます。初心者の方がつまづきやすいmarginとpaddingの違いを解説してみました。Shift)を改善する方法とCLSを確認する方法などをまとめました。scrollを使った横スライドの簡単な作り方と事例紹介です。簡単便利はいいことだ。CSSとSVGを使った三角形背景の作り方SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。それくらい簡単で汎用性の高い方法です。WEBフォント使用時の最適な設定を考える私のサイトではNotoSansJPのWEBフォントを使用しています。可能な限り速度とCLSを考慮して使っております。参考にならない適当につくるアイキャッチの作り方!ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。【初心者むけ】Jqueryのつまづきやすい5つのポイント解説Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。APIの解説記事です。Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。bookblock本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。高さを簡単に揃えるjquery-match-height.js簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。JavaScriptのIndexOfの使い方の復習indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。PHPの連想配列の多次元配列を使ったクイズの作り方PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。例題がわかりづらいせいだと思うんですよね。制作できるものの幅が広がって色々な仕組みを理解できますキャンペーン期間中だけ表示させるPHPプログラム期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。PHP+jQueryで作る土日祝日が選べないカレンダーの作り方PHPで作るカレンダーの作り方の第二弾です。今回はクリックした日付を取得してformに代入するところも解説してます。PHPの良いところは難しいと思われていることPHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。撮影スペースDIY空いたスペースを活用して商品撮影スペースを自作しました。GoFree2初めて使ったSOUNDEPEATSのオープンイヤー型イヤホン「GoFree2」は想像していたよりずっと快適でした。車用スマホホルダースマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。α7IIIを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7IIIのレビューです。人感センサーライトで電気のON/OFFを自動化し、ドアクローザーを使ってドアの閉め忘れがなくなる生活を手に入れました。世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。WEB制作WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。カメラ2018年4月に購入したソニーのミラーレス一眼「α7III」に関連する記事一覧ページです。作例集やカメラグッズレビューなど。美味しいもの食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよAmazonプライム動画Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ旅LOG家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。thanks自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。鳥好きAmazon欲しいものリスト詳細WEB制作を中心にWEBマーケティングなどもやっています。PHPを使ったプログラミング、WEBシステム開発なども。おもしろいWEBサイトを作りたいと思っています。