みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

SVGの色を変更したい！SVG表示方法まとめ【サンプル付き】

SVG かずん

SVGとは？ SVGのいろんな表示方法をサンプル付きで解説！基本を理解してWebサイトをもっとリッチに！

はじめに

こんにちは、かずん(@kazoonLab)です。

今回の記事から、「SVG」について書いていこうと思います。

SVGを使うと、アイコンや図形をきれいに表示させたり、変形させるアニメーションなどを作れたりすることができます！今回は、SVGの基本のことを知って、アニメーションを作る準備をしましょう。

かずん

この記事を読むと、SVGについての概要と作り方、SVGを表示させる方法についてわかるよ！



こんな人に読んで欲しい

・Webコーダーの方

・SVGの色を変更したい方

・SVGについて最初から知りたい方

・SVGでアニメーションを実装したい方


そもそもSVGってなに？

ラスタ形式とベクタ形式について

SVGの紹介に入る前に、「ラスタ形式」と「ベクタ形式」の違いについて紹介します。

「ラスタ(raster)形式」とは、ピクセル単位で色・濃度などの情報をもつ画像形式です。

パソコンやスマホで写真を拡大表示した時、画像が粗く表示されるときがあると思います。画像を拡大すると、1ピクセルが大きく表示されます。ラスタ形式では1ピクセルより細かく分割できないため、ギザギザに表示されてしまうのです。

下の画像は、Twitterのアイコン(PNG)とそれを拡大したものです。拡大した画像がギザギザしているのがお分かりかと思います。

ラスタ画像のイメージ
ラスタ画像のイメージ
一方、「ベクタ(vector)形式」とは、数値・計算式で情報を持たせる画像形式です。

ベクタ形式の画像を拡大表示すると、都度計算が実行され、内部の数値が変化します。拡大表示しても、それに合わせて画像が変化するので、粗くならずに表示されます。

下の画像は、Twitterのアイコン(EPS)とそれを拡大したものです。拡大した部分が、滑らかになっているかと思います。
ベクタ画像のイメージ
ベクタ画像のイメージ
一見使いやすそうなベクタ形式ですが、デメリットもあります。画像を拡大縮小するたびに計算が実行されるため、写真などの複雑な配色・輪郭を再現しようとするとファイルサイズが大きくなりすぎてしまいます。なので、ベクタ形式で扱えるのは、ロゴやアイコン・図形などに限られてきます。

ここまで、ラスタ形式とベクタ形式の違いをざっと見てきました。それでは、本題のSVGについて見ていきましょう。

SVGとは

「SVG(Scalable Vector Graphics)」とは、XMLに準拠した二次元のベクターデータを指します。名前にもVectorって入ってますもんね。

SVGやEPSなど、ベクタ形式のデータは何種類かありますが、その中でもSVGは、「テキストエディタで編集でき」、また「ウェブブラウザで閲覧することができる」という特徴があります。

実際どういうことなのか、以下の章で一緒に確認していきましょう。

SVGの中身をテキストエディタで見てみよう

SVGの中身を見てみるために、まずSVGをダウンロードしましょう。以下のリンクから、zipファイルをダウンロード・解凍してください。解凍したフォルダの中に「Twitter_Social_Icon_Circle_Color.svg」があればOKです。
> ダウンロードリンク

次に、エディタを開きます。Windowsなら「メモ帳」、MacOSなら「テキストエディット」を開いてください。

最後に、ダウンロードしたSVGファイルを、開いたエディタにドラッグ&ドロップします。すると、下のようなソースコードが出てくるかと思います。(※メモ帳で開くと一画面で収まらなかったので、私はVSCodeで開いています)

SVG画像のソース
SVG画像のソース
classやstyleなど、CSSで見かけそうな記述がちらほらありますね。一方、gやdなど、あまり見かけないようなものもあります。これらの情報が、SVGをかたどっているのです。言い換えれば、これらの情報を操作することで、SVGを変形させることができというわけです。

SVGの変形(アニメーション)は次回の記事で扱います。今日はまず、Google ChromeなどのブラウザでSVGを表示する方法を見ていきましょう。

SVGをブラウザで見てみよう

SVGファイルをブラウザで閲覧する方法はいくつかあります。今回は下記の4つを紹介して、それぞれの特長を記していきたいと思います。

<img> で読み込む

See the Pen vYBRyoM by kazoonLab (@kazoonLab) on CodePen.

JPEGやPNG画像と同じように、SVG画像は<img>タグのsrc属性で読み込むことができます。また他の形式と同様、altやwidth、heightも指定できます。

CSSのbackground-imageで読み込む

See the Pen SVG sample by background-image by kazoonLab (@kazoonLab) on CodePen.

これも通常の画像と同じですが、CSSのbackground-imageのurlで読み込むこともできます。

上記2つの方法は普通の画像の読み込み方と大差ありません。しかし、この方法ではそもそもSVGである必要性が薄いですし、なによりSVGのデータを操作できないというデメリットを抱えることになります。

次に紹介する2つの方法は、普通の画像とは異なる使い方をしています。それぞれ見ていきましょう。

<svg>で埋め込む

See the Pen SVG sample by coding directly by kazoonLab (@kazoonLab) on CodePen.

先程、テキストエディタでSVGの中身を直接確認しましたが、それを直接HTMLに埋め込むことで、SVGを表示させることができます。SVGを直接操作できるようになる一方、HTMLにSVGを直接書くことになるため、ソースの見やすさ(可読性)が悪くなりますね。

CSS/JavaScriptで操作するとき、最もやりやすい記述方法です。

<object>で埋め込む

See the Pen SVG sample by <object> by kazoonLab (@kazoonLab) on CodePen.

codepenではなぜか表示されませんが、ブラウザではちゃんと表示されますのでご安心を。

<object>は、ドキュメントに外部リソースを埋め込むことができます。動画などを埋め込んで表示する<iframe>に似たものといったところでしょうか。

可読性を保ったまま、フォールバック(古いブラウザなどでSVGを読み込めなかった場合、代わりに表示させる画像)を設定することができます。(今回はPNGファイルを設定しています。)

上記2つの方法のいずれかで、ブラウザにSVG画像を表示させることができます。

まとめ

今回は、ラスタ形式とベクタ形式の違い、SVG画像について、さらにSVG画像をブラウザに表示させるところまでを見ていきました。

次回の記事では、SVGをインラインで埋め込む(3番目)の方法で、SVGをCSS/JavaScriptで動かしてみたいと思います。

最後までご覧いただきありがとうございます。

↓SVGの他の記事はこちら blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

ムームードメインをヘテムルサーバーに紐づける方法を画像付きで解説！

ドメイン・サーバー かなきち

ムームードメインをヘテムルサーバーを使う方法を画像付きで解説！ こんにちは、かなきち(@kanakichi0801)です

今回は、番外編です。ムームードメインをヘテムルサーバーで使う方法をご紹介します。ホームページを作成するにはドメイン取得とサーバー設定が不可欠！始めやすいムームードメインの取得方法からそれをヘテムルサーバーで設定する方法まで画像付きで一つ一つ解説していきます！

前段階として、ムームードメインとヘテムルサーバーの会員登録は済んでいる状態でこの記事をお読みください。

最初に、ドメインとサーバーの関係を簡単に解説。その後ムームードメインでドメイン取得の方法を解説し、ヘテムルサーバーへの紐付け方まで解説していきます。

かなきち

これからの記事を読むとムームードメインの取得方法と取得したドメインをムームードメインをヘテムルサーバーに紐づける方法がわかるよ！



こんな人に読んで欲しい

・ドメインとサーバーの関係について知りたい方

・ムームードメインを取得したい方

・ドメインとサーバーの紐付け方を知りたい方

・ムームードメインをヘテムルサーバーで使いたいと考えている方



ドメインとサーバーの関係とは

ドメインとサーバーの関係 ドメインとサーバーの関係とは、「住所と家」の関係のようなものです。
サーバー =「家」
ドメイン =「住所」

家には必ず住所があります。住所があることで場所がわかり配達物が正確に家に届きます。ドメインとサーバーの関係も同じで、ドメインが無いとサーバーの情報を取得してホームページを表示することができません。

難しく書こうとすると何記事も書けてしまうので、もう少しだけ深掘りします。

サーバーには、それぞれIPアドレスというものが割り当てられています。それを各ドメインに紐づけてホームページを表示させているのです。

ドメインとは
このブログのアドレスは、https://mimipen.net/のことをいい、ドメインとは、mimipen.netの部分を差します。


サーバーとは
ホームページなどのデータやメーラーなどのソフトウェアが格納されるもの

ムームードメインの取得方法

ムームードメインは、他のドメイン会社(ドメインを提供している会社)の中で比較的安価で分かりやすく、特にデメリットはありません。

初心者にオススメのドメイン会社ですね。連携しているサーバー会社やツールも多めなので、初心者の方や難しいこと苦手って方にもおすすめです。

ムームードメインにアクセスします。
> ムームドメインホームページ
※この記事は、ムームードメインの登録が完了している人に向けての記事になりますので、先に会員登録をお願いいたします。

TOPページが表示されましたら、「欲しいドメインを入力」から取得したいドメインを入力してください。今回はmimipenで検索しました。 ムームードメインにログイン


次にトップレベルドメインを選択します。 ムームードメインでのトップレベルドメインを選択

トップレベルドメインとは
ドメインの最後に.(ドット)に続く文字列のこと .jp・.com・.netなどが代表的。



トップレベルドメインの中で、.jp(日本の住所限定)や.co.jp(日本で記録された企業(組織)に１つだけ)以外のものは比較的自由に取れます。今回は.workを選択してみました。69円は安すぎますね！(笑)

ただドメインには、ドメイン費用の他に年間の更新費用があります。最初のドメインが安くても更新費が高い！なんてこともあるのでドメインを購入する前に確認しておきましょう。

右側のカートに追加ボタンを選択。


お申し込みへを押します。
※ここではまだ確定にはなりません。


ここで他サービスへの登録などができ、連携もスムーズにできます。今回はもうすでにヘテムルサーバーを取得していたのでそのまま次のステップへと進みます。


余談になりますが、Whois公開情報では基本的に弊社の情報を代理公開するを選択しましょう。ただ、ドメイン移管の時にはここをお客様の情報を公開に変えないと移管できませんのでそのだけ注意が必要です。

Whois公開情報で公開される情報
・管理を行っているレジストラ
・登録者のお名前・住所・電話番号
・登録日や契約終了日
・ネームサーバー名



ネームサーバー(DNS)をheteml(ヘテムル)に変更します。 カード情報など確認して大丈夫であれば次のステップへを押します。


最後に確認画面が出てくるので内容を確認して、規約を読んでから同意をチェック。取得に進みましょう。こちらでドメインの取得は完了です！

ヘテムルサーバーでのムームードメインとの紐付け

この記事ではヘテムルサーバーへの登録が完了したことを想定して記事を書いているので登録が完了していない場合は完了させてからこの記事を読んでください。

ヘテムルサーバーにログインし、【ドメインメール設定画面へ】のボタンを押します。 ヘテムルサーバーにログイン


【独自ドメインを設定する】を押します。


確認のアラートが出てきます。ヘテムルサーバーの設定をする前に必ずドメインの取得は済ませておきましょう！取得完了していたらOKを押しましょう！


【取得されているドメイン】にドメイン名を入力します。 今回で言うと、例:hetemulにmimipenと入力し、例:jpにworkと入力します。これだけで紐づくなんて簡単ですね！

次に、フォルダーの場所を設定します。基本的にはドメイン名と同じ名前にするのが好ましいです。複数のドメインを同じサーバーに向けることがあるので、どのフォルダにどのサイトの情報が入っているかわかりやすくして起きましょう。 今回で言うとmimipen.workと言うフォルダ名です。

フォルダ設置場所
FTPサーバー内のフォルダの場所を意味します。公開フォルダに記載されている「/web/」とは、もともとFTP上にすでに置かれている「web」というフォルダのことです。「web」フォルダの下の階層にドメイン名と同じフォルダを起きましょう。



入力が終わりましたら、独自ドメインをチェックするを押します。 この時に、ドメインを取得して時間が経っていないとエラー表示になってしまいますが、気にせずそのまま進んでください。

すると、FTPの/web/の直下に先ほど指定した名前でディレクトリーができています。この中にホームページのデータを入れて、ドメインにアクセスすると、サイトが表示されます。

以上になります！お疲れ様でした！

まとめ

今回はムームードメインを取得してヘテムルサーバーに紐付けするまでの工程を説明させていただきました。 ドメインを取得して、その情報がネット上に浸透するまで少し時間がかかります。1時間から48時間程度と言われています。情報が反映されていない状態、ドメインを取得したばかりの状態では、紐付け時にがエラーとなりますがそのまま進めてもサーバーにフォルダは作成されています。

万が一、フォルダーが追加されない、もしくはサイトが表示されない場合は、時間を置いて再度試してみてください。

この記事がいいなっと思ったら読者登録をお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

JavaScriptで日付セレクトボックスを作ろう！～うるう年も考慮してみよう！～

JavaScript かずん

うるう年はどうやって計算するの？JavaScriptで作る日付セレクトボックスの作り方

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、JavaScriptを使って年齢・日付を入力できるセレクトボックスを作りました。

前回のセレクトボックスは、存在しない日付が入力可能でした。今回は、そのような日付を取り除く仕組みを作っていきます。

今回作成するセレクトボックスはこちらです。実際の挙動を確かめてみてください。

See the Pen KKPvrKJ by kazoonLab (@kazoonLab) on CodePen.



かずん

この記事を読むと、閏年にも対応した日付セレクトボックスが作れるようになるよ！



こんな人に読んで欲しい

・Webコーダーの方

・フォームを自作したい方

・セレクトボックスのソースコードを短く書きたい方

・年月日(日付)のチェック方法を知りたい方

・年月日(日付)を扱うセレクトボックスを作りたい方


閏年(うるうどし)であるかチェックする

突然ですが、世の中には「閏年(うるうどし)」というものがあります。夏季オリンピックの年は2月が1日多くなるってやつですね。

他方、閏年じゃない年を「平年」と呼びます。当然、今年2019年は平年になります。

国立天文台のページでは、閏年は以下のように定義されています。

1. 西暦年号が4で割り切れる
2. 1.の例外として、西暦年号が100で割り切れて400で割り切れない年は平年とする
どの年がうるう年になるの？

要するに、普通の4の倍数の年はうるう年でいいけど、2100年とか2200年は平年として扱うということですね。

また、シドニーオリンピックのあった2000年は100でも400でも割り切れるため、閏年になります。

ここで、年齢を引数にとって、それが閏年であるかチェックする関数を書いてみます。（ちなみに、閏年は英語で「leap year」というそうです。なぜ跳ねるのか）

【JavaScript】

const isLeapYear = year => (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);



一行で書くと、上記のようになります。コンソールで確かめると、以下のようになります。

【JavaScript】

isLeapYear(2001);  // --> false
isLeapYear(2012);  // --> true
isLeapYear(1800);  // --> false
isLeapYear(2000);  // --> true

各月の日数を配列で表現する

前回の記事のチェックボックスは、for文で決められた分だけオプションを生成していました。今回あり得ない日付を削除・閏年を考慮するために、生成する仕組みを変える必要があります。

例えば、1月は31日、11月は30日というように、各月の日数はそれぞれ異なります。なので、各月の日数を、配列で表現してみましょう。

【JavaScript】

const datesOfYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];



2月はうるう年の影響を受けるので、チェック関数を通してみます。

【JavaScript】

const today = new Date();
const year = today.getFullYear();
const datesOfFebruary = isLeapYear(year) ? 29 : 28;
const datesOfYear= [31, datesOfFebruary, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];



2019年現在はうるう年ではないため、isLearYear(year) はfalseが返ります。よって上記コードをコンソールで確認すると、datesOfYearには[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] という配列が入ります。

セレクトボックスを改良する

それでは、画面ロード時に今日の日付が表示されているセレクトボックスを作ってみましょう。

【HTML】

<select id="year" name="year"></select>
<select id="month" name="month"></select>
<select id="date" name="date"></select>


【JavaScript】

(function() {
  const isLeapYear = year => (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);
  const today = new Date();
  const thisYear = today.getFullYear();
  const thisMonth = today.getMonth() + 1;
  const thisDate = today.getDate();
  const datesOfFebruary = isLeapYear(year) ? 29 : 28;
  const datesOfYear= [31, datesOfFebruary, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  const createOption = (id, startNum, endNum, current) => {
    const selectDom = document.getElementById(id);
    let optionDom = '';
    for (let i = startNum; i <= endNum; i++) {
      if (i === current) {
        option = '<option value="' + i + '" selected>' + i + '</option>';
      } else {
        option = '<option value="' + i + '">' + i + '</option>';
      }
      optionDom += option;
    }
    selectDom.insertAdjacentHTML('beforeend', optionDom);
  }

  createOption('year', 1900, thisYear, thisYear);
  createOption('month', 1, 12, thisMonth);
  createOption('date', 1, datesOfYear[thisMonth - 1], thisDate);
})()



<option> を生成する仕組み自体は、前回と変わりません。日のオプションを生成するときの範囲を、datesOfYear配列から取得しています。

今のソースのままだと、年・月を変更した時、日のオプションの個数が変化しません。そこで、以下の仕様にそって、セレクトボックスの中身を変化させてみましょう。

1. 「年」を変えた際、「1月1日」にリセットする。
2. 「月」を変えた際、「1日」にリセットする。
3. 1.と2.に関して、閏年のチェッカを通す。

セレクトボックスにイベントを設定する

まず、「月」を変えたときのイベントを設定しましょう。「月」が変わった際、月ごとに日数が異なるため、オプションを更新する必要があります。一方、「年」が変わるわけではないため、上記の配列自体を更新する必要はないですね。

上記より、「月」を変えたときのイベントは、以下のようになります。

【javascript】

const monthBox = document.getElementById('month');
const dateBox = document.getElementById('date');
monthBox.addEventListener('change', e => {
    monthBox.innerHTML = '';
    const updatedMonth = e.target.value;
    createOption('date', 1, datesOfYear[updatedMonth - 1], 1);
});



続いて、「年」を変えたときのイベントを設定しましょう。「年」が変わった際、その年が閏年かをチェックする必要があります。チェックし終わったら、日数の配列を更新し、オプションも更新してあげましょう。

上記より、「年」を変えたときのイベントは、以下のようになります。

【javascript】

const yearBox = document.getElementById('year');
const monthBox = document.getElementById('month');
const dateBox = document.getElementById('date');

yearBox.addEventListener('change', e => {
    monthBox.innerHTML = '';
    dateBox.innerHTML = '';
    const updatedYear = e.target.value;
    const datesOfFebruary = isLeapYear(updatedYear) ? 29 : 28;
    const datesOfYear = [31, datesOfFebruary, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    createOption('month', 1, 12, 1);
  createOption('date', 1, datesOfYear[0], 1);
});



これで、「年」を操作するイベントを設定できました。

あらためて、完全版のセレクトボックスはこちらになります。

See the Pen KKPvrKJ by kazoonLab (@kazoonLab) on CodePen.



また、動きは仮のHTMLにjsを読み込むか、codepenなどのサービスから確認できるかと思います。ぜひ試してみてください。

まとめ

前回・今回の記事で、JavaScriptを使ったセレクトボックスの作り方をご紹介しました。

セレクトボックスの他にも、JavaScriptで様々なDOMの制御を行うことができます。

今別のDOM操作に関しても今後触れていければと思います。是非読んでみてください！！

最後までご覧いただきありがとうございます。

↓セレクトボックスの他の記事もあるので見てみてくださいね！ blog.mimipen.net

↓作りながら楽しく学べる記事を日々更新しています！よかったら読んでみてくださいね！ blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

display:inline、inline-blickの特徴を3分で理解し使いこなそう【CSS初心者入門】

CSS初心者入門 かなきち

【CSS初心者入門】インライン要素と便利なdisplay: inline-blockについて3分で解説！ こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第三回】ということで、インライン要素とdisplay: inline-blockについてわかりやすく解説していくよ！

この記事は前回のブロック要素と display: block の記事の続きです。まだ読んでいないという方は先に以下の記事を読んでからこの記事をお読みください。 blog.mimipen.net

初期の何記事かは、CSSの基礎を簡単に説明した後にインライン要素の解説に入ります。すぐに解説を読みたい方は スキップ を押してね！

かなきち

これからの記事を読むと
インライン要素の特徴とdisplay: inline-blockの使い方がわかるよ！


こんな人に読んで欲しい

・CSS初心者の方

・HTML初心者の方

・ブロックレベル要素とインライン要素の違いを知りたい方

・コーディングで苦労したくない方


先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}


CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">



CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

インライン要素(display: inline)とは？

HTML5からブロックレベル要素とインライン要素という呼び方は廃止されました。

しかし、違いを紹介するにあたりあえて、初期値が display:blockの要素をブロックレベル要素とし、初期値が display: inlineの要素をインライン要素として紹介します。

HTMLタグのほとんどはブロックレベル要素(display:block)、インライン要素(display: inline)の２つの種類で分けられます。インライン要素の特徴を簡単にあげると以下の特徴があります。

  • 改行が入らずインライン要素同士は横に配置される
  • 幅や高さが指定できない
  • 余白(margin・padding)の上下が効かない


言葉で説明してもわかりにくいかと思いますので、以下で図を使って解説していきます。

インライン要素同士は横に配置される

インライン要素同士は横に配置されます この図のソースコードが以下になります。
[html]

<span>インライン要素</span>
<span>インライン要素</span>

インライン要素のspanタグを2つ書きました。インライン要素同士は並ぶと横に配置されます。

以下でブロックレベル要素との違いを解説しています。

ブロックレベル要素との違い

前回の記事の復習になりますが、ブロックレベル要素の特徴を図で解説します。

ブロックレベル要素同士は縦に配置されます この図のソースコードが以下になります。
[html]

<p>ブロックレベル要素</p>
<p>ブロックレベル要素</p>

ブロックレベル要素のpタグを2つ書きました。ブロックレベル要素同士は並ぶと縦に配置されます。

ブロックレベル要素は縦に並び、インライン要素は横に並ぶと覚えましょう。これは、ブロックレベル要素とインライン要素の一番わかりやすい特徴の違いと言えます。

インライン要素には幅・高さが指定できない

[html]

<span>インライン要素</span>


[css]

span{
  width: 100px;
  height: 100px;
}

インライン要素は幅や高さを指定しても反映されません。インライン要素に幅や高さを指定したい場合は こちら を参考にしてください。

インライン要素にはmargin・paddingの上下が反映されない。

marginで指定できるのは、左右の余白のみです インライン要素にはmargin・paddingの上下が反映されない

ややこしいのですがpaddingで指定できるのは上下左右です。しかし、指定できてもpaddingの上下は重なってしまい、余白を取ることはできません。

インライン要素は上下の余白を指定することができないと覚えましょう。

インライン要素のHTMLタグ一覧

使用頻度が高いブロックレベル要素のタグを以下にまとめました。

・<a>(リンク)
・<span>(インライン要素グループ化)
・<strong>(テキストの強調)
・<small>(テキストを小さくする)
etc...

インライン要素とブロックレベル要素のいいとこ取り display: inline-block について

インライン要素のCSSの初期値は、display: inline です。

先ほど、インライン要素の特徴であげたように幅や高さが指定できない。marginやpaddingの上下が指定できないとインライン要素のまま使える部分は限られます。

そこでとても便利なプロパティと値が display: inline-block です。

この値の特徴は以下になります。

  • 改行が入らずインライン要素同士は横に配置される
  • 幅や高さが指定できる
  • 余白(margin・padding)が指定できる

[css]

span{
  display: inline-block;
}

spanタグは代表的なインライン要素のタグです。インライン要素に幅や高さ、marginやpaddingを指定したい場合に、該当のタグにdisplay: inline-blockをCSSで指定します。

display: inline-block の記述はCSSでよく使う記述なので覚えておきましょう！また、displayというプロパティは、１記事じゃ書ききれないので、今後も覚えるべきところから少しずつ解説して行きます。

まとめ

前半にインライン要素のHTMLタグの種類とインライン要素の特徴3つ紹介しました。復習になりますが以下が3つの特徴です。

  • 改行が入らずインライン要素同士は横に配置される
  • 幅や高さが指定できない
  • 余白(margin・padding)の上下が効かない


後半では、インライン要素に幅や高さ、marginやpaddingを指定したい場合に使える便利な display: inline-block を紹介しました。

この記事がいいなっと思ったら読者登録をお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

JavaScriptで年齢と日付のセレクトボックスを作ろう！【JavaScript初心者入門】

JavaScript かずん

【JavaScript初心者入門】JavaScriptでセレクトボックスを作ろう！～年齢と日付編～

はじめに

こんにちは、かずん(@kazoonLab)です。

またJavaScriptまわりの記事を投稿していく予定ですので、よかったら見ていってください。

今回から、JavaScriptで色々なセレクトボックスを作っていこうと思います。ますは、年齢を選べるもの・日付を選べるものを見ていきましょう。

かずん

この記事を読むと、JavaScriptで日付や時刻を使ったセレクトボックスの作り方がわかるよ！



こんな人に読んで欲しい

・Webコーダーの方

・フォームを自作したい方

・セレクトボックスのソースコードを短く書きたい方

・年齢や年月日を扱うセレクトボックスを作りたい方


年齢のセレクトボックス

Webページにフォームを掲載するとき、年齢を入力させる箇所があるとします。

20歳か100歳までの年齢を選択できるセレクトボックスのHTMLは以下のようになるかと思います。



<select name="age">
  <option value="20">20才</option>
  <option value="21">21才</option>
  <option value="22">22才</option>
  <option value="23">23才</option>
  <option value="24">24才</option>

  <!-- 省略 -->

  <option value="100"></option>
</select>



<option> を使ってつらつらと書くこともできますが、JavaScriptで動的にセレクトボックスを作ると、コードがよりシンプルになります。



【HTML】

<select id="age" name="age"></select>


【JavaScript】

(function() {
  var selectBox = document.getElementByID('age');
  for (var i = 20; i <= 100; i++) {
    var option = '<option value="' + i + '">' + i + '歳</option>';
    selectBox.insertAdjacentHTML('beforeend', option);
  }
})()



最初に空のセレクトボックス要素を取得します。その後、「option要素を作り、セレクトボックス要素の終了タグの前に挿入する」のを100になるまで繰り返します。

ちなみに、insertAdjacent()の第一引数には、挿入位置を指定することができます。今回は、<select> の中で、かつ後ろに挿入(=終了タグの直前に挿入)したいため、beforeend を指定しています。

【HTML】

<!-- beforebegin -->
<p class="target">
  <!-- afterbegin -->
  要素の中身
  <!-- beforeend -->
</p>
<!-- afterend -->

このように書くことで、HTMLをすっきりさせることができますね。

日付のセレクトボックス

セレクトボックスで日付を入力させたいとき、初期値が今日の日付だと入力しやすいかと思います。

初期値が今日のセレクトボックスは、以下のように実装できます。



【HTML】

<select id="year" name="year"></select>
<select id="month" name="month"></select>
<select id="date" name="date"></select>


【JavaScript】

(function() {
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth() + 1;
  var date = today.getDate();

  function createOption(id, startNum, endNum, current) {
    var selectDom = document.getElementById(id);
    var optionDom = '';
    for (var i = startNum; i <= endNum; i++) {
      var option = '';
      if (i === current) {
        option = '<option value="' + i + '">' + i + '</option>';
      } else {
        option = '<option value="' + i + '" selected>' + i + '</option>';
      }
      optionDom += option;
    }
    selectDom.insertAdjacentHTML('beforeend', optionDom);
  }

  createOption('year', 1900, year, year);
  createOption('month', 1, 12, month);
  createOption('date', 1, 31, date);
})()



まず、new Date() を使って現在時刻を取得します。そこから、年・月・日を任意の関数で取得します。

ちなみに、getMonth() に1を足しているのは、getMonth() の戻り値が、1月の場合は0、2月の場合は1というように、現在月-1の数値であるためです。



関数createOption() は、挿入元DOMのid、optionの先頭と最後のvalue、現在時刻(年・月・日のいずれか)を引数に取り、指定した個数だけ<option> を生成します。生成した<option> が現在時刻と合致する場合selected を付与し、それを初期値にします。

生成された<option> は、optionDomに追加されていきます。最後の<option> まで追加されたら、先ほどと同様に、セレクトボックスの中にinsertします。

3回のcreateOption() の呼び出しで、年・月・日それぞれにオプションを追加しています。このコードを実行すると、 - 1900年～現在時刻の年まで選択できる「年」(記事作成時は2019年) - 1月～12月まで選択できる「月」 - 1日～31日まで選択できる「日」 を作成することができます。

これで、日付を選べる、初期値が今日の日付のセレクトボックスを作ることができました。しかし、このコードには問題があります。

それは、「2月30日」とか、「11月31日」などの存在しないであろう日付を選べてしまうことです。もっと言えば、2月はうるう年の影響を受けるため、そちらも考慮しなくてはなりません。

↓うるう年も考慮した日付セレクトボックスの記事はこちら！ blog.mimipen.net

まとめ

今回の記事では、JavaScriptを使ったセレクトボックスの作り方をご紹介しました。

サンプルコードの値を編集すれば値も変化するので、ぜひ使っていただけたらと思います。

最後までご覧いただきありがとうございます。

↓うるう年も考慮した日付セレクトボックスの記事はこちら！ blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

CSS初心者入門 かなきち

【CSS初心者入門】ブロックレベル要素、display: block について3分で解説！ こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第二回】ということで、ブロックレベル要素とdisplay:blockについてわかりやすく解説していくよ！

【CSS初心者入門】第一回目でmarginとpaddingについて解説したけど、それよりも先にdisplay:blockをやるべきだったかなと少し後悔もしました。

それぐらい重要なのでしっかり覚えましょう！今回は、CSS初心者入門とは書いてあるのだけど少しHTMLタグの内容も入るよ！

初期の何記事かは、CSSの基礎を簡単に説明した後にブロックレベル要素の解説に入ります。すぐに解説を読みたい方は スキップ を押してね！

かなきち

これからの記事を読むと
ブロックレベル要素の特徴とdisplay:block;の使い方がわかるよ！


こんな人に読んで欲しい

・CSS初心者の方

・HTML初心者の方

・ブロックレベル要素とインライン要素の違いを知りたい方

・コーディングで苦労したくない方


先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}


CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">



CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

ブロックレベル要素(display:block)とは？

HTML5からブロックレベル要素とインライン要素という呼び方は廃止されました。

このブログでは、違いを紹介するにあたり初期値が display:blockの要素をブロックレベル要素とし、初期値が display: inlineの要素をインライン要素として紹介します。

HTMLタグのほとんどはブロックレベル要素、インライン要素の２つの種類で分けられます。ブロックレベル要素の特徴を簡単にあげると以下の特徴があります。

  • 親要素の大きさが継承され、１つのブロックとして認識される
  • ブロックレベル要素同士は縦に配置される
  • 幅や高さが指定できる
  • 余白(margin・padding)が指定できる


言葉で説明してもわかりにくいかと思いますので、以下で図を使って解説していきます。

ブロックレベル要素は親要素の幅が継承される

ブロックレベル要素は親要素の大きさが継承され同じ大きさになります。 この図のソースコードが以下になります。
[html]

<div>
  <p>ブロックレベル要素</p>
</div>

[css]

div{
  width: 800px;
}

ここでいう親要素とはdivタグを指します。 pタグにはcssを指定してませんが、pタグは親要素の幅800pxを継承し、pタグの大きさは800pxとなります。

この特徴を覚えておけば無駄なコードが削減できそうですね！

ブロックレベル要素同士は縦に配置される

ブロックレベル要素同士は縦に配置されます この図のソースコードが以下になります。
[html]

<p>ブロックレベル要素</p>
<p>ブロックレベル要素</p>

ブロックレベル要素のpタグを2つ書きました。ブロックレベル要素同士は並ぶと縦に配置されます。

以下でインライン要素との違いを解説しています。

インライン要素との違い

インライン要素同士は横に配置されます この図のソースコードが以下になります。
[html]

<span>インライン要素</span>
<span>インライン要素</span>

インライン要素のspanタグを2つ書きました。ブロックレベル要素とは違いインライン要素同士は並ぶと横に配置されます。

ブロックレベル要素は縦に並び、インライン要素は横に並ぶと覚えましょう。これは、ブロックレベル要素とインライン要素の一番わかりやすい特徴の違いと言えます。

ブロックレベル要素には幅・高さ・余白が指定できる。

ブロックレベル要素には幅・高さ・余白が指定できる。 ブロックレベル要素は自由に幅や高さを変えることができ、paddingやmarginも指定できます。

インライン要素の違いも説明したいところですが少々厄介なので次回のインライン要素の説明で詳しく解説したいと思います。

ブロックレベル要素のHTMLタグ一覧

使用頻度が高いブロックレベル要素のタグを以下にまとめました。

・<div>(特に意味はない)
・<h1>〜<h6>(見出し)
・<p>(段落)
・<ul>(リスト) 類似タグ：<ol>
・<li>(リストの項目)
・<dl>(定義リスト)
・<dt>(定義リストの用語)
・<dd>(定義リストの用語の説明)
・<nav>(ナビゲーション)
・<address>(連絡先の情報)
・<header>(ヘッダー)
・<footer>(フッター)
・<main>(文章の中で重要(中心になる)なコンテンツ)
・<section>(セクション) etc...

ブロックレベル要素に変えられる魔法の display: block; について

インライン要素に高さを持たせたい、幅を指定したい。または、インライン要素をブロックレベル要素に変えたいと思った時に以下のプロパティと値を覚えておくと便利です。

[css]

span{
  display: block;
}

spanタグは代表的なインライン要素のタグです。インライン要素をブロックレベル要素に変えるには、そのタグにdisplay: block;をCSSファイルで指定します。

display: block;の記述はCSSでよく使う記述なので覚えておきましょう！また、displayというプロパティは、１記事じゃ書ききれないので、今後も覚えるべきところから少しずつ解説して行きます。

まとめ

前半にブロックレベル要素のHTMLタグの種類とブロックレベル要素の特徴4つ紹介しました。復習になりますが以下が4つの特徴です。

  • 親要素の大きさが継承され、１つのブロックとして認識される
  • ブロックレベル要素同士は縦に配置される
  • 幅や高さが指定できる
  • 余白(margin・padding)が指定できる


後半では、ブロック要素でない要素をブロック要素に変える display: block; について紹介させていただきました。

↓display:blockとよく比較で出されるinline-blockの記事です。 この2つのプロパティーをしっかり理解してコーディングのプロを目指そう！ blog.mimipen.net

他にも、痒いところに手がとどく記事を日々更新中です！ blog.mimipen.net blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

カリー化・関数の部分適用について　～関数をどんどん使いまわしていこう！～【JavaScript初心者入門】

JavaScript かずん

JavaScriptのカリー化・関数の部分適用について　～関数をどんどん使いまわしていこう！～

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、JavaScriptの高階関数についてご紹介しました。

今回は、前回の記事の続きで、JavaScriptの「カリー化」と「関数の部分適用」についてご紹介します。

かずん

この記事を読むと、JavaScriptのカリー化関数と関数の部分適用についてわかるよ！/p>



カリー化とは

カリー化の説明の前に、まず高階関数の復習から入りましょう。

高階関数とは、「関数を引数にしたり、関数を戻り値とする関数」のことです。サンプルコードを見てみましょう。

const hof = function (m) {
  return function (n) {
    return m + n;
  }
}

// アロー関数で書いてみる
const hofArrow = m => {
  return n => {
    return m + n
  }
}

// return をなくしてシンプルに
const hofSimple = m => n => m + n;

// hofSimpleを呼び出す
console.log(hofSimple(3)(4));  // --> 7



関数hofは、引数にnをとり、「引数にmをとり、n+mの結果を返す関数」を返します。

関数hofArrowはアロー関数を使って書いた形、関数hofSimpleはそこからreturnを省略した形です。できるだけシンプルな形で書いていきましょう。

ところで、hofSimpleを呼び出すとき、(3)(4)と引数が2つ続いていることにお気づきでしょうか。

hofSimple(3)が「nを引数にとり、n + 3を返す関数」なため、もうひとつ引数(n)が必要になります。(ここでは、n = 4を代入しています。)

このように、高階関数の引数を一つずつ返していって、引数が複数つながっている状態にすることを「カリー化」と呼びます。

続いて、カリー化された関数の部分適用について見ていきましょう。

関数の部分適用とは

const curry = m => n => m + n;

// 2を足す関数
const plusTwo = curry(2);
console.log(plusTwo(3));  // --> 5 (2 + 3)
console.log(plusTwo(5)); // --> 7 (2 + 5)

// 5を足す関数
const plusFive = curry(5);



今回は、関数curryの引数mに2が入ったとき、その戻り値をplusTwoという変数に代入(=関数に名前をつけている)しています。

この時、関数plusTwo(n)は「引数nをとり、2 + nを返す関数」になりますね。

このように、カリー化された関数の任意の引数を固定し、別の関数を作ることを「関数の部分適用」といいます。

サンプルコードでは、他にも5を足す関数plusFive(n)を定義しています。当然、7を足す関数、9を足す関数も関数curry(m)(n)を使って定義できますね。

どんなところで使う？

一見便利そうだなあと思うんですが、使いどころは難しいですね。。

例えばReactだと、Material UI のwithStyles()なんかが高階関数にあたります。

const styles = {
  comp: {
    fontSize: 12,
  }
}

const Wrapped = () => <p className={classes.root}>wrapped</p>

export default withStyles(styles)(Wrapped);



最初の引数であてたいstyleを、次の引数であて先のコンポーネントを指定しています。 styleが固定なら、withStyles(style)を変数に代入して、各コンポーネントでimport/exportして使いまわすことができる、、とかでしょうかね。

自分自身でもよりいい例が見つかったら、この記事は更新していこうかと思います。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

marginとpaddingを総まとめ！イラスト付きでわかりやすく解説【CSS初心者入門】

CSS初心者入門 かなきち

【CSS初心者入門】marginとpaddingをアボカドを使って解説してみた！ こんにちは、かなきち(@kanakichi0801)です。
今回は、CSS初心者入門【第一回】ということで、marginとpaddingについて解説して行きます。

最初にCSSのおさらい。次にmarginとpaddingの違いをアボカドを使ってわかりやすく解説をします。 その後に、実際の使い方とショートハンドでの記述方法も解説していきます。サンプルコードも載せてあるので参考にしてください。CSSの復習を飛ばして、すぐにmarginとpaddingについてを読みたい方は スキップ を押してください。

かなきち

これからの記事を読むとmarginとpaddingの違いから実際の使い方とショートハンドでの書き方がわかるよ！



こんな人にオススメの記事です

  • CSS初心者の方
  • marginとpaddingの違いがわからない人
  • marginとpaddingの実際の使い方を知りたい人
  • marginとpaddingのショートハンドの書き方を知りたい人



先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}


CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">



CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

marginとpaddingってなんで使うの？

htmlのみでホームページを作ると以下のように余白がなく、見栄えが悪くなってしまいますが、marginやpaddingを使うことで綺麗に見た目を整えることができます。 marginとpaddingを使う理由の図

marginとpaddingの違いとは？

先ほどの図には文字とそれを囲う枠線がありました。それをアボカドに例えて解説してみます。

アボカドの中には大きな種があり、それが 文字 = 要素 だと思ってください。その周りをアボカドの果肉、これがpaddingとイメージしてください。果肉の周りにアボカドの皮があります。図で言う枠線(border)のことです。 paddingをアボカドに例えてみた図

今後出てきますが、枠線(アボカドの皮)のことをWEB用語でborder(ボーダー)と言います。



先ほどの図には四角い箱が２つありましたので、同じようにアボカドも２つ並べてみます。アボカドとアボカドの間のことをmarginと言います。 marginをアボカドに例えてみた図

pxとは？

ホームページ作成でよく使われる単位を「px(ピクセル)」と言います。 パソコンやスマートフォンは小さなドットの集合体で画像や動画を表示しています。イメージしやすいものであればドット絵がでしょうか？ px(ピクセル)とはドット絵に似ている

以下の図の1ドットが1pxのイメージです。 1pxの図解

pxのことを画素ともいいコンピューターで扱う 最小単位 です。


1pxは何cmなの？と思うこともあるかもしれませんがそのような概念がありません。 ホームページ上で扱うデータは px と言う単位で計り px という単位で記述すると覚えましょう。

marginの記述例

図と同じ見た目になるように、CSSファイルにmarginを使って指定します。図のAとBの間隔は50pxです。 marginを表す図

実際のコードが以下になります。
[htmlファイル]

<div class="box__a">A</div>
<div class="box__b">B</div>

[cssファイル]

.box__a{
  margin-bottom: 50px; <!-- box__aというclass(クラス)名の要素からみて下に余白を50pxもたせるという意味。 -->
}



この例では、下に余白を出しましたが、上下、左右の指定ができます。

marginの記述 意味 記述例
margin 全方向に同じだけ余白 margin: 50px;
margin-top 上に余白 margin-top: 50px;
margin-right 右に余白 margin-right: 50px;
margin-bottom 下に余白 margin-bottom: 50px;
margin-left 左に余白 margin-left: 50px;
margin-right 自動で算出 margin-right: auto;
margin-right 自動で算出 margin-left: auto;



上の表では、上右下左の順で記述しました。CSSの指定ではすごく重要な順番です。私は上から始まり時計回りと覚えています。
なぜ重要なのかについては、記事の下部「marginのショートハンドの書き方」で紹介して行きます。

autoって何？

ユーザエージェントによって自動的に計算される値のことを指します。プロパティ(変更を加える要素)に応じて効果は変わります。

marginの場合は、[親要素の横幅 - 指定した要素の横幅]によりmarginを自動で算出されます。

autoは基本的に、margin-right、margin-leftで使用します。基本的な使い方としては、ブロック要素を中央配置したい場合に使われます。後ほど説明しますが、margin: 0 auto;という書き方で使われることが多く、これは上下を0px(余白なし)、左右はauto(自動で算出)で中央に配置するという意味です。

ブロック要素を右に配置したい場合は、margin-left: auto;を使うことで配置ができます。ブロック要素を左に配置したい場合はmargin-right: auto;を使うことで配置ができます。

margin-top: auto;やmargin-bottom: auto;も使えますが、ほとんどの場合は 0 として扱われます。そのため、縦に中央配置したい場合はmarginは基本的に使用しません。

paddingの記述例

図と同じ見た目になるように、CSSファイルにpaddingを使って指定します。図のA要素の周りにはそれぞれ 50pxの余白 があります。先ほども説明しましたが、枠線(border)の内側の余白、先ほど例えたアボカドの果肉の部分は、paddingを使って指定します。 paddingを表す図

実際のコードが以下になります。 [htmlファイル]

<div class="box__a">A</div>

[cssファイル]

.box__a{
  padding: 50px; <!-- box__aというclass(クラス)名の要素の周りにそれぞれ50pxの余白を持たせるという意味 -->
  border: solid 1px red;
}



この例では、全体に同じだけ余白を出しましたが、上下、左右などそれぞれの指定方法が以下になります。

paddingの記述 意味 記述例
padding 全方向に同じだけ余白 padding: 50px;
padding-top 上に余白 padding-top: 50px;
padding-right 右に余白 padding-right: 50px;
padding-bottom 下に余白 padding-bottom: 50px;
padding-left 左に余白 padding-left: 50px;


※paddingはmarginと違って、autoは使用できません。

ショートハンドとは？

余白の大きさがそれぞれ違う場合に、毎回padding-top、padding-bottom...などと指定していると大変ですし、コードが長くなってしまいます。コードを省略して書く方法を以下で紹介します。また、省略して書く書き方をショートハンドと言います。

marginのショートハンドの書き方


意味 記述例 意味
上下左右が同じ margin: 10px; 上:10px、右:10px、下:10px、左:10px
上下、左右 margin: 10px 20px 上:10px、右:20px、下:10px、左:20px
上、左右、下 margin: 10px 20px 30px; 上:10px、右:20px、下:30px、左:20px
上下左右が違う margin: 10px 5px 15px 20px; 上:10px、右:5px、下:15px、左:20px


それぞれ違う値の場合は、上 → 右 → 下 → 左 の順で記述します。

他、よく使う記述としては、margin: 0 auto;でブロック要素の中央寄せです。上:0px、右:auto、下:0px、左:autoという意味。
余談ですが、値が0の場合はpxを省略できます。

paddingをのショートハンドの書き方


意味 記述例 意味
全て同じ padding: 10px; 上:10px、右:10px、下:10px、左:10px
上下、左右 padding: 10px 20px 上:10px、右:20px、下:10px、左:20px
上、左右、下 padding: 10px 20px 30px; 上:10px、右:20px、下:30px、左:20px
全て違う padding: 10px 5px 15px 20px; 上:10px、右:5px、下:15px、左:20px


それぞれ違う値の場合は、上 → 右 → 下 → 左 の順で記述します。

また、paddingは値:autoを使うことができません。

コードを短く書く意味を理解しよう

コーディングで重要なことは、ソースコードを短く書くことです。その為CSS初心者であっても、積極的にショートハンドは使って行きましょう。ただ、必ずショートハンドを使えというわけではありません。ソースコードを短くすることが重要なのでmargin: 50px 0 0 0;とmargin-top: 50px;でどちらを使えばいいか悩んだ時は、文字数が少ないmargin-top: 50px;を選びましょう。

まとめ

今回は、marginとpaddingの違いや基本の記述方法について書かせていただきました。marginはブロック要素同士の余白であり、paddingは要素の内側の余白です。このブログで説明したアボカドの果肉という意味ですね。

ショートハンドの書き方もすごく重要な部分になりますので理解するようにしましょう。

この記事がいいなっと思ったら読者登録をお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

JavaScriptの高階関数について　～関数型プログラミングの初歩～【JavaScript初心者入門】

JavaScript かずん

【JavaScript初心者向け】JavaScriptの高階関数について　～関数型プログラミングの第一歩～

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、配列を反復処理するメソッドをご紹介しました。

今回は、配列の反復処理にも用いられている、「高階関数(HOF)」というキーワードについてご説明いたします。

かずん

この記事を読むと、高階関数の考え方と使用例が分かるよ！



高階関数とは

高階関数(High Order Function)とは、「関数を引数にしたり、関数を戻り値とする関数」のことを言います。

「関数を引数に」という点は、前回の記事で登場したmap()やfilter()がちょうど当てはまりますね！

ちなみに、同じ記事で登場したpush()メソッドは当てはまりません。

より理解を深めるため、例文を見てみましょう。 

const hof = (fn, num1) => num2 => fn(num1 + num2);

const plusThreeDouble = hof(n => n * 2, 3);

const result = plusThreeDouble(4);  // --> 14



関数fn1は、引数に関数と数値(num1)の2つをとります。戻り値は、「引数に数値(num2)をとり、(num1)と(num2)を足してから実行する関数」です。一文だとわかりにくいですね。。

関数fn2にどのような関数が入っているか見てみましょう。 

plusThreeDouble = hof(n => n * 2, 3);
// ↓
plusThreeDouble = num2 => (num2 + 3) * 2;



このように、関数fn2は、「引数に数値(num2)をとり、3(num1)とnum2を足してから『×2を実行する(hof)』」関数であるとわかります。 上記ソースのnum2に7をいれると、(4 + 3) * 2 = 14 となるかと思います。

このことにどのような意味があるんだろう、と思われる方も多いかと思います。が、使いこなすと便利なものなのです。(わたしはまだ十分使いこなせていませんが、、)

Reactでの高階関数の利用について

高階関数の利用例として、Reactの関数コンポーネントを紹介したいと思います。

今までの内容とだいぶ離れてしまいますが、ご了承ください。 

import * as React from 'react';
const HelloWorld= () => <span>Hello World</span>;

const wrapByH1= (Wrapped) => <h1><Wrapped /></h1>;

export default wrapByH1(HelloWorld);  // --> <h1><span>Hello World</span></h1>



上記では、関数コンポーネントHelloWorldを、関数wrapByH1でラップしています。

wrapByH1は、引数にコンポーネント(クラス・関数を問わない)をとり、それ

で囲んだものを返します。

wrapByH1が、上記で説明した「引数に関数をとる」関数にあたりますね。

まとめ

今回は、JavaScriptの高階関数についてご説明しました。

私が考える高階関数のメリットとしては、

「基本の関数を作り、それを拡張する方針であるため、同じ処理は基本の関数にまとめることができ、ソース量の削減につながる」

といったところかと思います。どんどん作っていきましょう。

次回の記事では、今回の内容の続きである「カリー化」と「関数の部分適用」についてご紹介できればと思います。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

練習用デザイン無料配布！WEBコーディング初心者がすべき事前準備とは？

未経験でWEB業界 かなきち

【初心者向け】コーディング練習用のデザインデータを無料配布！〜初心者がやるべきコーディングの事前準備も解説〜 こんにちは、かなきち(@kanakichi0801)です

今後、簡単なサイトを1サイト作っていきます！
お金をかけずに、コーディングの勉強ができる記事を日々あげていきますので他の記事も見ていただけたら幸いです。

以下のリンクからコーディング練習用の完成デザインを確認できます。
＞ コーディング練習用デザイン


[手順１]以下のリンクから、コーディングに必要なパーツをダウンロードください。
＞ ダウンロードリンク


[手順２]パーツをの中身を確認してください。以下の画像のように名前がついています。 コーディング練習用デザインパーツ

使用用途は、あくまでコーディング練習用としてお使いください。
※デザインに使用している写真は 写真AC からダウンロードしたものになります。

かなきち

これからの記事を読むとホームページが１つ作れます
今回の記事では、先ほどのコーディング用パーツをダウンロードし、コーディング計画図の作成、リセットCSSの作成とファイルの読み込み方について書きます。事前準備はめちゃめちゃ重要なのでしっかり覚えて行きましょう！

JavaScript配列の反復処理のご紹介！複雑な処理もスマートに！【JavaScript初心者入門】

JavaScript配列の反復処理のご紹介！複雑な処理もスマートに！【JavaScript初心者入門】

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、JavaScriptのアロー関数についてご説明しました。

今回は、JavaScriptにあらかじめ用意されている、配列の反復処理メソッドをご紹介します。

かずん

この記事を読むと、配列に関する便利なメソッドの使い方が分かるよ！



「破壊的」メソッドについて

反復処理メソッドの紹介の前に、メソッドが「破壊的」か「非破壊的」かの違いをご説明します。

下のコードは、破壊的なメソッドの例です。 

const arr = [0, 1, 2];
console.log(arr);  // --> [0, 1, 2]
// 配列の末尾に「3」を追加
arr.push(3);
console.log(arr);  // --> [0, 1, 2, 3]



push()メソッドを用いて、arrの中身を途中で書きかえています。2行目と4行目のconsole.log()の結果が異なることから確認できるかと思います。

このように、メソッド適用の前後で対象の差分が発生するものを「破壊的である」といいます。

破壊的メソッドには、破壊する前の値をそのまま使いまわせない(別の変数にコピーしておく必要がある)というデメリットがあります。

ちなみに、push()メソッドの結果を変数に代入していないのは、push()メソッドの戻り値が「push()後の配列の要素数」だからです。(push()後の配列そのものをreturnしてくれればいいんだけど。。。)

これからご紹介するメソッドは、そのデメリットのない「非破壊的」なメソッドです。

ちなみに、「非破壊がない」ということを、「副作用がない」と表現する場合もあります。

「非破壊的」メソッド

Array.prototype.map()

map()メソッドは、引数に入れられた関数を配列の各要素に適用して、その結果から新しい配列を生成するメソッドです。

文字だけだとわかりにくいので、コードを見てみましょう。 

const arr = [0, 1, 2];
console.log(arr);  // --> [0, 1, 2]
// 配列の各要素を2倍して、新しい配列を生成する
const arrDouble = arr.map(function(n) {
  return n * 2
});
console.log(arrDouble);  // --> [0, 2, 4]
console.log(arr);  // --> [0, 1, 2]



arrDoubleにはarrの中身を2倍した数字が入っている一方、arrそのものには変化がありません。

もともとの要素を壊すことなく、新しい要素を作るのが、「非破壊」なメソッドなのです。

ところで、上のコードでのmap()メソッドの引数は、「引数nをとって、それを2倍した数字を返す関数」です。

この箇所は、アロー関数を使って書き換えることができます。 

const arrDouble = arr.map(n => n * 2);



引数に関数をいれる、ということが少し不自然に思った方。グッドキャッチです！

前回の記事でお話ししたように、JavaScriptの関数は変数に代入できます。

それだけでなく、関数の引数に関数をいれる、なんてこともできるのです。

こうした特長は関数型プログラミングに多いです。JavaScriptの関数型プログラミングに関しては、今後の記事でじっくり触れていきたいと思います。

Array.prototype.filter()

filter()メソッドは、配列の要素の中から与えられた条件にマッチするものを抽出し、新しい配列を返します。 

const arr = [0, 1, 2, 3, 4, 5];
// 3以上の要素を抽出する
const arrFilter = arr.filter(n => n >= 3);
console.log(arrFilter);  // --> [3, 4, 5]

Array.prototype.includes()

includes()メソッドは、配列に特定の要素が含まれているかを、booleanで返します。 

const arr = [0, 1, 2, 3, 4, 5];
// 「4」が含まれているかをチェックする
console.log(arr.includes(4););  // --> true
// 「6」が含まれているかをチェックする
console.log(arr.includes(6););  // --> false

Array.prototype.reduce()

reduce()メソッドは、引数で与えられた関数を配列の要素に実行し、単一の値で返します(畳みこみ)。 

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
/**
 * acc: 累積値
 * cur: 現在値
 * 最初の計算では0 + 1 = 1が行われ、(acc, cur) = (0, 1)が、
 * 次の計算では1 + 2 = 3が行われ、(acc, cur) = (1, 2)が適用される。
 * 下の計算では、arrの中身を最初から最後まで加算し、その結果を返す。
 */
const arrReduce = arr.reduce((acc, cur) => arr + cur);
console.log(arrReduce);  // --> 45

まとめ

今回は、配列のビルトインメソッドについて、いくつかご紹介しました。

これらの関数を使うと、今まで繰り返し構文(for文など)や条件構文(if文)などで書いていたところを、スッキリさせることができます。

また、非破壊なメソッドのため、元の要素の変化を気にせず使えるのも大きいですね。

紹介しきれなかったメソッドもあるため、気になった方はMDNなどで探してみるのもよいかと思います。



最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

CSSとは？リセットCSSも解説【CSS初心者入門】

未経験でWEB業界 かなきち

初心者向け！CSSとは？〜CSSの基本からリセットCSSまでサクッと解説〜
こんにちは、かなきち(@kanakichi0801)です

かなきち

この記事を読むとCSSとは？から、CSSの基本の書き方とリセットCSSについて知ることができるよ！



CSSとは？

CSSとは？、Cascading Style Sheet(カスケーディング・スタイルシート)の略で、スタイルシートとも呼ばれます。ホームページのスタイルを指定するための言語であり、CSSは、HTMLと組み合わせて使われます。

スタイルとつくように、ホームページの見た目を指定するために使用します。ホームページを作る上でHTMLが骨組であり、そのHTMLにCSSで肉付けをしていく、そんなイメージです。

CSSは、HTMLよりも覚えることが多いため、少しずつ記事の中で紹介していきます。着実に１つずつ覚えて行きましょう！ただ、CSSの略とかは覚えなくて大丈夫です私もさっき知ったので(笑)

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}

CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

CSSの記述ルール

[ルール 1]セレクタを決めたら、{}を書き、その中にプロパティと値を記述します。

セレクタ{}



[ルール 2]プロパティと値の間を:(コロン)で繋ぎます。

セレクタ{
　プロパティ: 値
}



[ルール 3]プロパティと値のセット、その終わりには;()セミコロンをつけます。 ※;(セミコロン)は忘れがちなので、忘れないように！

セレクタ{
　プロパティ: 値;
}



CSSの書き方のルールは3つ！
セレクタを決めたら{}(カッコ)をつけ、中にプロパティと値を記述する。プロパティと値は:(コロン)で繋ぐ、最後に;(セミコロン)で終わる。このルールは覚えましょう。

実際にCSSを使うと

次回の予習として、リセットCSSの説明をします。先ほどの説明で、CSSの書き方の説明は終わりです。勉強する上で実際のコードを見るのが一番！

ということでどーん！

@charset "utf-8";
/*--------------------------------------------------------------
   RESET
--------------------------------------------------------------*/
html{color:#000;background:#fff}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-size:inherit;font-weight:inherit;}
legend{color:#000}
*{zoom: 1;}
img{vertical-align: bottom;}
:focus{outline:none;}

これがCSS、種類としてはリセットCSSです。

ファイルの作り方は、以下の記事で説明した手順と同じです。 テキストエディタに上記のソースコードをコピペして.cssをいう拡張子で保存します。保存したファイルのことをCSSファイルと言います。 blog.mimipen.net

CSS付属品の説明※飛ばしてOK！

@charset "utf-8";は、文字化け防止用のコードです。
以下は、役割がわかるようにタイトルとしていれています。※こちら任意ですので書いても書かなくても大丈夫です。

/*--------------------------------------------------------------  
   RESET  
--------------------------------------------------------------*/

リセットCSSとは？

リセットCSSとは、ブラウザの初期スタイルをリセットするCSSのことです。

ブラウザにはそれぞれ違ったスタイルが組み込まれています。初期のスタイルが残っているとブラウザごとに見え方が違ったり、コーディングに支障が出るので、それをリセットCSSで打ち消す、または整えます。

ホームページを作る前には必ず、リセットCSSを読み込ませると覚えましょう。

余談

[2020 リセットCSS]などで検索をすると以下のようなサイトがたくさんあります。
2020年、モダンブラウザに適したCSSリセットのまとめ | コリス



これを使わないとダメというのはありませんが、コードが少なくシンプルでわかりやすいので、私は YahooのリセットCSSを使用しています。


また、そのまま使うのではなく、半角を削ったり自分なりに少し書き換えています。

なぜ半角スペースを削るのか？
目には見えませんが半角スペースにも半角スペースを表す情報が詰まっています。コードを減らして表示速度をあげることはコーディングでもっとも重要なことです。そのため私たちは日々、無駄なコードを削ったり、時には圧縮をかけたりして、いかにホームページを早く表示させるかを追求する必要があります。

まとめ

今回は、CSSからCSSの書き方、リセットCSSの触りを解説しました。 HTMLはホームページの骨組みで、CSSはそこに肉付けをしていくイメージで使用します。 そしてホームページを作る前には必ずリセットCSSを読み込みましょうね。

2019年リセットCSSなどでググるとたくさん出てくると思いますが、試してみないと自分のコーディングに合うものかは分かりません。参考までに上記のリセットCSSはシンプルで分かりやすいのでおすすめです。

次回から一緒にホームページを作って行くよ！(多分)
そこで使用するデザインデータをチラ見せ！

コーディング練習用デザインデータ
コーディング練習用デザインデータ(圧縮版)


このサイトを作って行くよ！引き続き、参考書を買わずに独学で勉強できる記事をメインで載せていますのでよろしくどうぞ！

最後までご覧いただきありがとうございます。この記事がいいなっと思ったら、ぜひ読者登録もお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

JavaScriptのアロー関数【=>】の使い方をご紹介！

JavaScript かずん

【JavaScript】アロー関数を使い方をご紹介！使いこなせれば便利でかっこいい！？

はじめに

こんにちは、かずん(@kazoonLab)です。

ES6(ES2015)にて、JavaScriptにアロー関数が追加されました。

以前に紹介したletとconstと同じタイミングでの実装です。 今回の記事は、アロー関数とは何か、どのように使うかをご紹介します！

かずん

この記事を読むと、関数を宣言する方法とアロー関数の使い方についてわかるよ！



「無名関数」とは

アロー関数の説明をする前に、まず「無名関数」1について説明します。

関数宣言



ES6以前は、関数は名前付きで宣言しました。下記のコードを参照ください。 

// fooという名前で、関数を宣言
function foo () {
  console.log('Foo')
}

// foo関数を実行
foo();  // --> 'Foo'



上のコードでは、関数にfooという名前を付けて宣言しています。

宣言された関数fooは、foo()という形で呼び出すことができます。

このような形で関数を定義することを、関数宣言(function declaration)といいます。

関数宣言には、以下の問題点があります。どちらも、varで変数宣言する場合と似ていますね。

- 巻き戻しが発生する - 上書きできてしまう

このような問題を解消するため、「関数式」という手法があります。見てみましょう。

関数式

関数式とは、通常の変数宣言と同様に、変数に関数を代入することです。下のコードを見てみましょう。 

// 名前のない関数を、変数barに代入
const bar = function () {
  console.log('Bar');
}

// bar関数を実行
bar();



上のコードで、functionと()の間に名前がないことにお気づきでしょうか。

変数barには名前のない、「コンソールに'Bar'を表示する」関数が代入されています。この名前のない関数こそが、上で登場した「無名関数」です。

変数に入れられるということは、letやconstを使うことができます。これによって、上述の問題は解消できそうです。

アロー関数とは

ところで、今までの関数の形はいわゆるブロック({}で囲まれている)でした。これをもっと短く書けるようにしたのが、今回のテーマである「アロー関数」です。

先程のbar関数をアロー関数で書くと、以下のようになります。 

const bar = () => {
  console.log('Bar');
}
// 呼び出し方は同じ



()の後の=>(arrow, やじるし)から、アロー関数と呼ばれています。おおまかな挙動はfunction()で書いたものと同じです。2

ブロックの中身が一行なら、短縮して書くこともできます。 

const bar = () => console.log('Bar');



関数の引数が一つなら、引数の()を外して書くこともできます。

const baz = (str) => console.log(str);
baz('Baz');  // --> Baz



function()では書かなければいけなかったreturnも、 

const addition = function (a, b) {
  return a + b;
}
addition(1 + 2);  // --> 3



アロー関数なら省略できます。 

const additionArrow = (a, b) => a + b;
additionArrow(4, 5);  // --> 9



このように、アロー関数を使うことで、さらにソースコードを読みやすくさせることができます。

まとめ

今回は、ES6で実装されたアロー関数についてご紹介しました。

使いこなせると、単純で見やすいコードを書けるようになります。ぜひ使ってみてください。

次回の記事では、アロー関数が実際に使われる例の1つ、「Arrayの反復処理」についてご紹介します。


最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

  1. JavaScriptには本来「無名関数」という概念は存在しませんが、関数宣言との対比で便宜上この言葉を使用しています。↩

  2. 関数の中で「this」で示されるオブジェクトが異なります。JavaScriptのthisに関しては、今後の記事でご紹介します。↩

初心者は HTMLタグを4つだけ覚えればいい！【div・a・img・h】

未経験でWEB業界 かなきち

初心者が覚えるべきHTMLタグはたった4つ！これだけ覚えればホームページは作れる！ こんにちは、かなきち(@kanakichi0801)です

この記事で紹介する４つのタグを覚えればホームページは作れます。さっそく書いていきます。



かなきち

この記事を読むと
最低限覚えるべきHTMLタグとその使い方がわかるよ！


divタグとは？

divタグ(ディブタグ)とは特に意味の無いタグです。役割をあげるなら要素をひとかたまりにするという役割があります。divタグを多様化しても、タグ自体に影響力が無いので検索順位への影響はありません。

[divタグの使用例]

<div>divタグで囲まれた文章は特に意味を持ちません</div>



意味のないタグなら覚えることないじゃん！と思うかも知れませんが、意味が無いことがこのタグのメリットです。

タグに意味があるからこそ使って良い場所、悪い場所の制約があります。しかし、divタグには制約がないので、ほぼどこでも使えるというわけです。

SEO対策(検索エンジン最適化)にdivタグを使うことは推奨しませんが、最初のうちはdivタグを使ってでもサイトを多く作ることが近道だと思います。

また、同じタグが並ぶと区別ができないので、区別する方法を説明していきます。

同じ種類のタグには、classをつけよう

class(クラス)とは、[名前]と覚えましょう。 同じタグを区別するためにclassをつけます。

[classの使用例]

<div class="box__blue">青色の箱です</div>

<div class="box__red">赤色の箱です</div>

class名には、[日本語]、[全角英数字・記号]、[半角カタカナ]は使用出来ません。そして、class名の付け方にはルールを持たせましょう。

命名規則

一般的に推奨されているルールは、以下になります。
「部位」__「種類(必須)」__「詳細」__「番号(連番)」__「状態」.「拡張子」
接続にはアンダースコア(_)を２つを使います。

classや画像の名前の付け方にも使えるので覚えるようにしましょう。ルールを作ることで他の人がコードを触りやすく更新しやすいコードになります。

部位

該当するエリア名
例)headerやsideなど

<div class="side__title">タイトル</div>

種類

種類は必ず書くようにしましょう。
例)imgやlogoなど

<div class="header__logo">LOGO</div>

詳細

例)機能や形状や色など

<div class="button__red">こちら</div>

番号

例)01や02など

<div><img src="img__01.jpg" alt=""></div>

状態

例)activeやcurrentなど

<ul>
<li class="nav__active">たいとる</li>
<li>たいとる</li>
<li>たいとる</li>
<li>たいとる</li>
</ul>

idは使わないようにしよう。

classの説明と一緒にidの説明がよく書いてあることがありますが、HTMLで基本的にidは使わないようにしましょう。

どうしてもの場合は使用してもいいという記事もありますが、どうしてもの状態にならないようにコーディングをしましょう。先ほどの命名規則の時と同じで、idを使わないことで、他の人がコードを触りやすく更新しやすいコードになります。

aタグ

以下の記事で使用したaタグです。 blog.mimipen.net

URL(リンク)を貼る目的で使用します。単純に他のタグで代用ができないので、このタグは覚えましょう。

[aタグの使用例]

<a href="[URL(リンク)を記述する]">こちら</a>を押してください



ターゲットブランクとは？

別のサイトに飛ばしたいときは、aタグにターゲットブランク(target="_blank")を追記します。この記述を追加すると別のタブが開き、指定したページに飛ぶことができます。ルールとして同一サイトにはターゲットブランクを使わず、別サイトに飛ばす際にターゲットブランクを使います。書き方は以下になります。

[通常のaタグ]
クリックしてください

<a href="https://blog.mimipen.net/">クリックしてください</a>


[ターゲットブランクを追記したaタグ]
クリックしてください

<a href="https://blog.mimipen.net/" target="_blank">クリックしてください</a>

imgタグ

以下の記事で使用したimgタグです。 blog.mimipen.net

画像を設置するために使用するタグです。画像を表示する方法は他にもありますが、最初はimgタグを使って画像を表示しましょう。そして、imgタグのaltは必ず書きましょう。

altとは？

imgタグのaltには、適切な画像の説明を入れましょう。画像の適切な説明がわからない場合は空でも大丈夫ですが、alt=""は必ず残しましょう。

[imgタグの記述例]

<img src="mimipen.jpg" alt="画像の適切な説明を記述します">

<img src=mimipen.jpg"" alt=""><!-- 画像に適切な説明がわからない場合は空でも大丈夫です -->


[imgタグのNG記述]

<img src="mimipen.jpg">

hタグ

ページの見出しを指します。

h1がもっとも重要な見出しです。h1タグにはページのタイトルを記述することが多く、検索の結果にも影響する部分なので最低１つはこのタグを入れましょう。 その次に、h2→h3→h4 の順番になるように意識してコーディングしていきましょう。

追記 : 2019.09.25
厳密には順番を必ず守らなくても検索結果には影響しませんが、グーグルのクローラーが回りやすい、ユーザーが見やすいコンテンツ作りは日々心がけましょう！



[hタグの記述例]

<h1>タイトル</h1>

<div>
　<h2>サブタイトル</h2>
　<p>だみーてきすとだみーてきすと</p>
　<h3>見出し</h3>
　<p>だみーてきすとだみーてきすと</p>
</div>

<div>
　<h2>サブタイトル</h2>
　<p>だみーてきすとだみーてきすと</p>
　<h3>見出し</h3>
　<p>だみーてきすとだみーてきすと</p>
</div>


[hタグのNG記述]

<h1>タイトル</h1>

<div>
　<h3>サブタイトル</h3><!-- h1の次がh3になっている -->
　<p>だみーてきすとだみーてきすと</p>
　<h4>見出し</h4>
　<p>だみーてきすとだみーてきすと</p>
</div>

<div>
　<h2>サブタイトル</h2>
　<p>だみーてきすとだみーてきすと</p>
　<h4>見出し</h4><!-- h2の次がh4になっている -->
　<p>だみーてきすとだみーてきすと</p>
</div>

まとめ

今回は最低限覚えるべきタグ4つとそれに付属する知識を説明させていただきました。

万能タグのdivタグ。リンクを貼る時ために使うaタグ。画像設置に使うimgタグ。最後に、見出しのhタグ。この4つのタグを覚えればもうサイトは作れます。

次回からはこのタグを使って、ホームページを早速作っていきます。練習用の簡単なデザインデータも無料で支給するので一緒に少しづつ作っていきましょう！参考書がわりにこのブログを見ていただだけたら幸いです。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

Twitter APIを使って自動ツイートBotを作ってみよう(2) ~ Botを完成させる ~【使用言語PHP】

API かずん

Twitter APIを使ってBotを作ってみよう(2) ~ Botを完成させる ~

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、Twitterの開発者サイトにて、APIキーとアクセストークンを取得するところまでを解説しました。 blog.mimipen.net

今回の記事では、取得した情報を用いて、コマンドラインからツイートを投稿できるBotを作っていこうと思います。

かずん

この記事を読むと、簡単なTwitter Botの作り方がわかるよ！



Botの作成

前置き

今回は、BotをPHPで作っていこうと思います。

その際、ライブラリ依存管理ツールの「composer」を利用します。

composerについては、以下のリンクが参考になるかと思います。



前置きが長くなりましたね。それでは、Botを作っていきましょう！

composerのインストール

まず、使う端末にcomposerをインストールしましょう。

方法に関しては、端末のOSによって異なるため注意が必要です。

Windowsの場合はこちら


macOSの場合はこちら


上記の手順が完了したら、下にあるコマンドをPowershell / ターミナルで試してみましょう。 

composer --version


ダウンロードしたcomposerのバージョンが表示されたら、インストールは終了です！

必要なライブラリをインストールする

今回は、mpyw/cowitterを使ってBotを作っていきます。

cowitterとは、取得したKey/ Token で認証を通して、Botを動かす準備をするもの

といったところでしょうか。(あまり語れずすみません。。)


それでは、上記のライブラリをインストールしてみましょう。 

# 作業したい空ディレクトリの中に移動
cd (ディレクトリパス)
# ライブラリをインストール
composer require mpyw/cowitter


インストールが終わると、作業ディレクトリの中に、
- vender ディレクトリ
- composer.json
が生成されたかと思います。これで、ライブラリのインストールは終了です。

コーディング

それでは、いよいよBot本体の実装です！

作業ディレクトリの直下(vender, composer.json)と同じ階層に、bot.phpを作成しましょう。

bot.phpの中身は以下の通りです。 

<? php
// ライブラリをインポート
use mpyw\Cowitter\Client;

/**
 * Key / Token を読み込む
 * 変数の中身は、それぞれ対応するものを入れてください。
 */
// Consumer Key
$consumer_key = ****;
// Consumer Secret
$consumer_secret = ****;
// Access Token
$access_token = ****;
// Access Token Secret
$access_token_secret = ****;

/**
 * TwitterアカウントのUser IDを入力してください。
 */
// User ID
$user_id = ****;

try {

     // Twitterの認証を通す
     $client = new Client([
         $consumer_key, $consumer_secret, $access_token, $access_token_secret,
     ]);

     // APIに接続し、ツイートを投稿する
     $status = $client->post('statuses/update', [
        'status' => 'みみぺんブログのBot！' ,
     ]);

     // 投稿したツイートのURLを表示する
     echo "URL: https://twitter.com/{$status->user->screen_name}/status/{$status->id_str}\n";
} catch (\RuntimeException $e) {
    // エラーが起きたら、その内容を表示する
    echo "Error: {$e->getMessage()}\n";
}


botが完成したら、先ほど開いたターミナルで、以下のコマンドを試してみましょう。

php bot.php


Key / Tokenを取得したTwitterのアカウントで、「」とツイートされているかと思います！


これで、シンプルなBotが完成しました。お疲れ様でした！

まとめ

今回は、コマンドをたたくとツイートするBotを作ってみました。


ちなみに、先ほど作ったBotをレンタルサーバなどのcronで実行すると、定期的にツイートしてくれるBotになります。


実行できる環境がありましたら、ぜひお試しください。


最後までご覧いただきありがとうございます。


↓他にも作りながら学べる記事を日々更新中！ blog.mimipen.net blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)