What's New Qiita

20200727のHTMLに関する記事は6件です。

  • 投稿日：2020-07-27T23:52:15+09:00

【初心者でもわかる】marginとpaddingの違い・使い分け方

どうも7noteです。今回はmarginとpaddingの違いや使い分けの方法について。

※本記事ではmarginもpaddingも余白という日本語で扱っています。
他のサイトではpaddingの事だけを余白と紹介していたりしますが、ごっちゃにならないようご注意ください。

初心者あるあるで、この余白はmarginとpaddingどっちを使えばいいのだろう・・・と悩むことは多いと思います。わたしも一時期まではいつも迷ってなんとなくの感覚でmarginかpaddingをあてていたのですが、同じように迷っている人が多いのではと思い、この記事を書きました。
同じ悩みを抱えている人が一人でも減ると嬉しいです！

marginとpaddingの違いは要素の外側の余白か内側の余白かの違い

どちらも余白を取るためのものですが、使いわけるためにはまずは違いを知ることが大切です。

大きな違いとして、余白をとる場所が違います。

  • marginは要素の外側に余白
  • paddingは要素の内側に余白

上のようにmarginは要素の外側に余白をとります。それに対してpaddingは要素の内側に余白をとります。
どういうことかというと、図で説明します。

boxmodel.png

上の図は「ボックスモデル」と呼ばれているものです。ボックスモデルとは一言でいうならcss上のルールや決まりで決められている事項のことです。
インライン要素、ブロック要素問わず全ての要素にこのボックスモデルが適応されています。
図をみていただくとmarginとborderの間に黒い線が入っていると思いますが、この黒線の内側が要素の大きさになります。この要素の内側に余白をとるのか、要素の外側に余白を取るのかの違いがmarginとpaddingの違いになります。

ボックスモデルについてはまた詳しい説明の記事を書きたいとおもっていますが、別のサイトで詳しく紹介されていたのでいくつかリンクを貼っておきます。
いますぐボックスモデルについて詳しく知りたい方はどうぞ。
https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/

marginとpaddingでは他のcssの適応範囲が違う（背景色）

marginとpaddingでは他のcssの適応範囲が変ることとがあります。
それはbackground（背景）です。
実際に違いを見てみましょう。

index.html
<div class="square01">四角1(padding)</div>
<div class="square02">四角2(margin)</div>
style.css
.square01 {
    width: 200px; /* 要素の横幅 */
    height: 200px; /* 要素の高さ */
    background: #CCF; /* 背景色に青を指定 */
    padding: 50px; /* 内側の余白 */
}

.square02 {
    width: 200px; /* 要素の横幅 */
    height: 200px; /* 要素の高さ */
    background: #CCF; /* 背景色に青を指定 */
    margin: 50px; /* 外側の余白 */
}

hikaku.png

図の真ん中より左側が実行結果で、右側はわかりやすいように色をつけたものになります。
またpaddingを指定するとpaddingも含めた分が横幅になるので、四角1は300px、四角2は200pxの幅と高さになるので、見た目の大きさが違うように見えているだけです。
このように、backgroundに背景色を指定するとpaddingでとった余白には色がつきますが、marginてとった余白には色がつきません。
backgroundは要素に対して背景色をつけるので、要素の内側にあるpaddingには色がつきますが、marginは要素の外にあるので色がつかないことがわかります。

marginとpaddingの使い分け

じゃあ実際に使う時どのように使い分けるのか。これについて書いていきます。
まずmarginですが、これは以下のように考えてください。

「margin」はほかの要素との距離をとるための余白

どういう意味かというと、コンテンツAとコンテンツBがあります。
コンテンツBはコンテンツAからみてどれくらい距離があるかをmarginで取るということになります。
marginが必要な場面は、複数の要素同士がどれくらいの距離関係にあって、どの要素を基準として距離（余白）を取るべきかということをあらわすときに使います。

もっとわかりやすく書いている記事を紹介↓
デザイナーの考える「余白」とは何か書き下してみる

そしてpaddingは以下のように考えます。

「padding」は背景色を入れた場合、変ではないか

ちょっと雑な考え方かもしれませんが、この考え方が一番わかりやすいと思います。
もし、その余白の部分に背景色を入れないといけなくなった場合、背景色を入れても見た目的に違和感がないか考えて、違和感のない場所であればpaddingを使います。
もしくはmarginでは取れない余白なんかもあるので、そのような場合にはpaddingを使います。

まとめ

初めは使い分けが難しいですが、違いをしっかりと理解すれば綺麗なコーディングができると思います。
ただ参考にしたサイトにも書いてあったのですが、最終的にはコードを書いているあなたが見えた通り、考えた通りに書くのが一番かなと思います。最終的に自分で直すことの方が多いと思うので。
ただマイルールが定着していない場合はぜひこの記事を参考にして綺麗なコーディングを目指してもらえると嬉しいです！
少しでもここpadding??margin???と悩む時間が減れば嬉しいです！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

参考記事
https://qiita.com/ln-north/items/dcf305d80edde550645e
https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-27T23:09:31+09:00

HTMLとJavaScriptの連携

HTMLとJavaScriptの連携ができるとどうなる？

ボタンを押したときにダイアログを出す。
通信して取得したデータをWebページに表示する。
など動きのあるページが作れるようになる！

htmlだけではできない動きがJavaScriptによってできるようになるのでできることが広がる。

前提

JavaScriptの基礎を理解していること。
htmlからJavaScriptの読み込みができる。 (以下)

index.html
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script type="text/javascript" src='./main.js'></script>
    <title>Document</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

本記事ではこれをベースに進めていく。

ボタンを押したらダイアログを表示する

このボタンを押したら
スクリーンショット 2020-07-26 19.21.36.png

こんな感じのダイアログを出す。
スクリーンショット 2020-07-26 19.29.43.png

全体像は以下
スクリーンショット 2020-07-26 19.36.36.jpg

3ステップで作成していく。

htmlでボタンを表示する

まずはボタンを作る

index.html
<body>
    <button>ここを押してね！</button>
</body>

buttonタグで囲むだけ。

これを書いたらブラウザでボタンが表示されていることを確認。
押してもなにもおきない。

JavaScript側に関数を用意

main.js
const alertHelloWorld = () => {
    alert("HelloWorld");
}

alertは文字列をダイアログで表示するための関数。

ボタンを押したときに関数を呼び出す。

ボタンタグにonclickを追加する。

index.html
<body>
    <button onclick="alertHelloWorld()">ここを押してね！</button>
</body>

これでブラウザで確認できる。
関数名だけではなく()をつけることに注意。

JavaScriptから文字をWebページに表示させる

ボタン押す前 ボタン押した後
スクリーンショット 2020-07-26 22.49.29.png スクリーンショット 2020-07-26 22.49.36.png

文字が変わる

html側の用意

最初に表示する文字をhtmlに仕込んでおく。

index.html
<body>
    <div id="canvas">ここに文字をいれる</div>
    <button onclick="drawCanvas()">ここを押してね！</button>
</body>

ポイントは<div id="canvas">。
div要素にidをつける。
idをつけることでJavaScript側から要素を取得することが可能になる。
id名はとくに決まりはないが、ここでは何かしらを描くところって意味でcanvasという名前にした。

文字を変更する

JavaScript側でやることは
1. idが"canvas"の要素を取得し、
2. そこに新しい文字列をつっこむ
の2つ。

それは以下のように書ける

main.js
const drawCanvas = () => {
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "Hello JavaScript!";
}

スクリーンショット 2020-07-26 23.15.11.png
この図の黄色い部分がinnerHTML

ポイント

IDを用いた要素の検索。

const 要素 = document.getElementById("ID名");

要素の中身の変更

要素.innerHTML = "新しい中身";

これでブラウザでボタンを押したときに表示が変わることが確認できる。

最初に表示する文字もJavaScriptから設定する。

なるべくJavaScript側に書きたいので最初に表示する文字もJavaScript側で書きたい。

読み込み時に設定するためにmain.jsをで以下のように書く。

main.js
// 初期化用の関数を用意
const initialize = () => {
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "ここに文字をいれる";
}

// 読み込み時に呼び出す。
initialize();

html側には文字を入れないでおく

index.html
<body>
    <div id="canvas"></div>
    <button onclick="drawCanvas()">ここを押してね！</button>
</body>

で、これでブラウザで確認すると、表示されない。
スクリーンショット 2020-07-27 22.44.25.png

そしてコンソールには以下のようなエラーが表示される。

uncaught TypeError: Cannot set property 'innerHTML' of null at initialize

initializeの該当部分は以下

main.js
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "ここに文字をいれる";

「nullにはinnerHTMLっていうプロパティーないよ」
=> canvasはnullである (何にも入ってないって意味)
=> document.getElementById("canvas")が失敗している。

と推測できる。

で、じゃあなぜ失敗するかというと、jsの読み込みのタイミングの問題。
現状以下のような流れになっている。

スクリーンショット 2020-07-26 21.53.39.png

bodyの中身を描画する前にjsの読み込みが走っているのでまだ「canvas」がないってこと。
そこでjsの読み込みタイミングを遅くする。
そのやり方の一つが以下。

index.html
// before
<script type="text/javascript" src='./main.js'></script>
// after
<script type="text/javascript" src='./main.js' defer></script>

main.jsを読み込むときにdeferをつける。
するとちゃんと初期化されるようになる。

JavaScriptから色を変える

idから取得した要素は文字の内容を変えるだけでなく他にもいろいろ変えられる。
そこでまずは色を変えてみる。

スクリーンショット 2020-07-27 23.00.43.png

main.js
const drawCanvas = () => {
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "Hello JavaScript!";
    canvas.style.color = 'red'; // <-　ここ
}

色の設定は決められた文字ではなくカラーコードでもOK

スクリーンショット 2020-07-27 23.02.20.png

main.js
const drawCanvas = () => {
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "Hello JavaScript!";
    canvas.style.color = '#00FF00';
}

他にもいろいろ変えられるのでcssで変えられるものを試してみるとよい。

スクリーンショット 2020-07-27 23.08.35.png

main.js
const drawCanvas = () => {
    const canvas = document.getElementById("canvas");
    canvas.innerHTML = "Hello JavaScript!";
    canvas.style.color = '#00FF00';
    canvas.style.backgroundColor = 'red'; // 背景色変更
    canvas.style.padding = '10px'; // 領域を広くする
}

応用するとこんなこともできる

ここはやらなくて大丈夫。
非同期とかできるようになるとこんな感じのアニメーションとかも作れるようになる。

animation_js.gif

const sleep = (msec) => new Promise(resolve => setTimeout(resolve, msec));

const drawTextAsync = async () => {
    const canvas = document.getElementById("canvas");
    canvas.style.backgroundColor = 'white'; 
    canvas.style.color = 'black'
    canvas.innerHTML = "　";
    await sleep(100);
    const word = "Hello JavaScript!";
    for (var i = 0; i < word.length; i++) {
        const content = word.substr(0, i+1);
        canvas.innerHTML = content;
        await sleep(100);
    }
    canvas.style.backgroundColor = 'red'; 
    canvas.style.color = 'white'
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-27T20:07:36+09:00

初心者によるプログラミング学習ログ 383日目

100日チャレンジの383日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
383日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-27T17:31:42+09:00

iGarage 体験会カリキュラム

JavaScriptでおみくじを作ってみよう

今日のゴール

ボタンをクリックするとランダムで運勢が表示されるおみくじを作ってみましょう。

スクリーンショット 2020-03-30 0.51.59.png

　　　　　↓クリック↓

スクリーンショット 2020-03-30 0.51.53.png

使用するファイル

MyOmikujiフォルダ内にある、index.html,styles.css,main.jsを編集していきます。

  • index.htmlでは全体の見た目
  • styles.cssではスタイル
  • main.jsではアニメーション

を主に作ります。

見た目の実装

まずはindex.htmlで全体の見た目を作っていきます。

テキストエディタでindex.htmlを開いて、以下を貼り付けましょう。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>

これはHTMLを書く際の決まりのようなものです。

次にボタンとなる要素を作ります。
<body>の下の行に、

index.html
  <div id="btn">?</div>

を入れましょう。
最初ボタンに表示される?を入れておきました。
また、id="btn"と入れておくと、後でJavaScriptから扱いやすくなります。

ここまで出来ているか、index.htmlをブラウザで開いて確認してみましょう。
?が表示されていればOKです。

ボタンのスタイルを作ろう

次に、styles.cssを編集してボタンのスタイルを作っていきましょう。

先程、id="btn"として?を表示した部分をボタンの形にしましょう。
styles.cssを開いて、

styles.css
#btn {
  width: 200px;  /* 幅: 200px */
  height: 200px;  /* 高さ: 200px */
  background: #ef454a;  /* 背景色: #ef454a */
  border-radius: 50%;  /* ボタンを円形に */
  margin: 30px auto;  /* ボタンの位置を上から30px,左右の余白を均等に */
}

一度、ブラウザを更新して確認してみましょう。

スクリーンショット 2020-03-30 1.35.20.png

?の位置がずれてしまっているので、直してみましょう。

margin: 30px auto;の下の行を追加します。

styles.css
#btn {
  width: 200px;  /* 幅: 200px */
  height: 200px;  /* 高さ: 200px */
  background: #ef454a;  /* 背景色: #ef454a */
  border-radius: 50%;  /* ボタンを円形に */
  margin: 30px auto;  /* ボタンの位置を上から30px,左右の余白を均等に */
  /* ここから */
  text-align: center;  /* 左右中央揃え */
  line-height: 200px;  /* 高さ調整 */
  color: #fff;  /* 文字の色: 白 */
  font-weight: bold;  /* 太字 */
  font-size: 42px;  /* 文字の大きさ: 42px */
  /* ここまで */
}

ブラウザを更新して確認してみましょう。

スクリーンショット 2020-03-30 2.36.58.png

ボタンをクリックした操作を作ろう

ボタンをクリックできるようにして、クリックした時の処理を書いていきましょう。

main.jsを開いて、

main.js
'use strict';

を入れましょう。これによって厳密なエラーチェックをするようにします。
その下の行に、

main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    btn.textContent = 'hit!';
  });
}

を入れましょう。

ブラウザを更新して変化を見てみましょう。
ボタンをクリックするとhit!と表示されるようになりました。

スクリーンショット 2020-03-30 2.39.43.png

ここで、ボタンがクリックできることがわかるようにスタイルを追加し、さらに、ボタンの形を整えていきましょう。

styles.cssを開いて、
font-size: 42px;の下の行を追加します。

styles.css
#btn {
  width: 200px;  /* 幅: 200px */
  height: 200px;  /* 高さ: 200px */
  background: #ef454a;  /* 背景色: #ef454a */
  border-radius: 50%;  /* ボタンを円形に */
  margin: 30px auto;  /* ボタンの位置を上から30px,左右の余白を均等に */
  text-align: center;  /* 左右中央揃え */
  line-height: 200px;  /* 高さ調整 */
  color: #fff;  /* 文字の色: 白 */
  font-weight: bold;  /* 太字 */
  font-size: 42px;  /* 文字の大きさ: 42px */
  /* ここから */
  cursor: pointer;  /* カーソルをポインターに */
  box-shadow: 0 10px 0 #d1483e;  /* ボタンの下に影をつける */
  user-select: none;  /* 中のテキストを選択不可に */
  /* ここまで */
}

一番下の行に、

styles.css
#btn:hover {
  opacity: 0.9;  /* ホバーした時に色を薄く */
}

/* クリックするとボタンが押し込まれたように */
#btn:active {
  box-shadow: 0 5px 0 #d1483e;
  margin-top: 35px;
}

を追加します。

ブラウザを更新して確認してみましょう。

乱数を表示してみよう

最終的にはランダムで運勢が表示されるようにします。
そのために、乱数を使ってランダムな数値を作ってみましょう。

JavaScriptでは、Math.random()という命令を使うことで０以上１未満のランダムな数値を生成出来ます。

main.jsの'hit!'の部分をMath.random()に変えます。

main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    btn.textContent = Math.random();
  });
}

このようになります。

ブラウザを更新して確認してみましょう。
０以上１未満のランダムな値が生成されるかと思います。

スクリーンショット 2020-03-30 3.03.02.png

条件分岐で運勢を表示しよう

条件分岐にはif文を使います。

まずは、先程の

main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    btn.textContent = Math.random();
  });
}

を消して、

main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    const n = Math.random();
  });
}

とします。
これでnをランダムな数値としています。

このnはMath.random()によって、０以上１未満の乱数となるので、
例えば、大吉を22％の確率で表示したい場合は、

main.js
    if (n < 0.22) {
      btn.textContent = '大吉'
    }

をこの行:

main.js
    const n = Math.random();

の下の行に入れてあげれば良いでしょう。

また、大吉以外の場合も書いてあげましょう。

main.js
    if (n < 0.22) {
      btn.textContent = '大吉'
    } else if (条件２) {
      btn.textContent = '中吉'
    } else if (条件３) {
      btn.textContent = '小吉'
    } else {
      btn.textContent = '凶'
    }

といったように書いてあげます。
22%の確率で大吉、8%の確率で中吉、13%の確率で小吉、それ以外の場合は凶と表示させるとしたら、
この条件２と条件３をどうすれば良いか考えてみましょう。

書けたら、コーチに見てもらいましょう。

最後に、他の運勢を追加したり確率を変えたりして、オリジナルのおみくじを完成させましょう。

体験会カリキュラムはこれで以上になります。

Web開発では、このような全体の見た目、スタイル、アニメーションなどを取り入れながら作っていきます。
体験会カリキュラムを通して、自分オリジナルのWebサイトのアイデアがふくらんだのではないでしょうか。

また、見た目だけでなく、サイトそのものの構造も自分で作って行くことになります。
詳しい内容はコーチに聞いてみてください。

iGarageでこれらをさらに深く学び、自分だけのWebサイトを作っていきましょう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-27T15:10:16+09:00

HTML,CSSにてブラウザでマンダラートを表示する際のフロントコーディングメモ

やりたいこと

  • ブラウザでマンダラートを表示させたい。

実装

PHP

<?php
    $item = [];
    $item[] = 'Fruit';
    $item[] = 'apple';
    $item[] = 'banana';
    $item[] = 'orange';
    $item[] = 'lemon';
    $item[] = 'strawberry';
    $item[] = 'melon';
    $item[] = 'grape';
    $item[] = 'cherry';
    $item[] = 'peach';
?>

HTML

<div class="mandal">
    <div class="box cell"><center class="cell-inner"><?=$item[1]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[2]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[3]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[4]?></center></div>
    <div class="box cell-center"><center class="cell-inner"><?=$item[0]?></center></div>
    <div class="box cell"><center class="cell-inner" ><?=$item[5]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[6]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[7]?></center></div>
    <div class="box cell"><center class="cell-inner"><?=$item[8]?></center></div>
    <div class="clear"></div>
</div>

CSS

    div.mandal {
        width: 608px;
        height: 608px;
        border: 2px solid #999;
        padding-top: 2px;
        padding-left: 2px;
    }
    div.box:hover {
        background-color: white;
    }
    div.box {
        float: left;
        text-align: center;
        width: 200px;
        height: 200px;
        border: 1px solid #999;
    }
    div.cell-center {
        display:table;
        background-color: #fff;
    }
    div.cell {
        display:table;
        background-color: #efefef;
    }
    center.cell-inner {
        display:table-cell;
        vertical-align: middle;
    }
    div.clear {
        clear: both;
    }

image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-27T14:11:38+09:00

CSSでプリンを作ってみた

はじめに

昔ながらの喫茶店に行くのが好きなのだけれど、ここ数ヶ月コロナの影響で行くことができずにいる。
そろそろ喫茶店のプリンが食べたいし、そろそろ苦手なCSSも克服したい。
というわけで、CSSでプリンを作ってみた。

?

See the Pen Pudding by lovemeseptember (@lovemeseptember) on CodePen.

参考

Animate.cssで遊んでみた

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧