2020-06-30

GASを使ってGoogleスプレッドシートのデータを取得してみよう！

GAS かずん

Googleスプレッドシートの値をGASを使って取得しよう

はじめに

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

Googleスプレッドシートを使ったアプリを作るのが比較的簡単だったので、それを題材に記事を書こうと思いました。

使用するのはGAS(Google Apps Script)というスクリプト言語です。

GASを使うことで、GoogleスプレッドシートやGoogleドライブを操作することができます！

グーグルアカウントさえあれば環境構築などが必要ないので、初心者の方にもオススメです！

またコードがJavaScriptによく似ているため、Web系プログラミングの１つとして勉強のテーマにはぴったりかと思います！

今回の記事では、GASの基本的な使い方や、Google スプレッドシートの値を取得したりしてみます！

GASデータのイメージ

この記事を読むと、GASの基本的な使い方がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・Google Apps Script(GAS)をよく知らない方

・プログラミングに興味がある方

はじめに
GASとは？
GASエディタを使ってみよう！
スプレッドシートの値を取得してみよう！
まとめ

GASとは？

GASとは、ドライブやスプレッドシート、フォームなど、Google系サービスをカスタマイズできるスクリプト言語です。

JavaScriptベースで書かれているため、JavaScriptの簡単な知識があればとっつきやすい言語となっています(というか、文法はJavaScriptとほとんど変わりません)。

JavaScriptと同様、インストール作業は不要です。また、ウェブブラウザ上で動作するエディタでコーディング・デバッグができます。

GASエディタを使ってみよう！

GASを書くにあたって、まずエディタを開いてみましょう。

Googleアカウントをお持ちの方はログイン、持っていない方はアカウントを新規作成してください。また、今回ブラウザはGoogle Chromeを使用します。お使いのGoogleアカウントのホーム画面で、Google アプリを開き、「ドライブ」をクリックします。

ドライブに移動したら、今回の作業用フォルダを作成しましょう。

フォルダを作成し移動したら、「右クリック」→「その他」→「Google Apps Script」と選択します。

Google ドライブのイメージ

選択すると、空のエディタ画面が開くかと思います。GASは、このエディタでコーディング・デバッグなどを行うことができます。試しに、下の画像のようなサンプルコードを入力してみましょう。

function myFunction() {
  var data = 'Hello World!';
  Logger.log(data);
}

GASのサンプルコード

Logger.log()関数は、JavaScriptでいうconsole.log()のようなものです。後ほどログを見るために使用しています。

入力したら、「ファイル」->「保存」もしくは「ctrl + s」でプロジェクトを保存します。プロジェクト名は好きな名前を入れてください。

保存したら、コードを実行してみましょう。メニューバーの下に、再生アイコンや虫アイコンが並んでいるかと思います。実行する関数名が正しいことを確認し、再生ボタンをクリックします。

GASサンプルコードの実行

コードを実行すると、実行ダイアログが一瞬表示されます。ダイアログが消えたら、「ctrl + Enter」でログを表示してみましょう。 GASのログイメージ変数定義したdata(Hello World!)がログに表示されれば成功となります。

スプレッドシートの値を取得してみよう！

Google Appsには様々なアプリが用意されています。その中の一つに、Microsoft Excelを模した「Google スプレッドシート」があります。

スプレッドシートのそれぞれの値は、GASを使うことで内・外部から取得・設定することができます。早速試してみましょう。

先ほどと同様、Googleアカウントのホーム画面でGoogle アプリを開き、「Google スプレッドシート」をクリックします。

クリックすると、スプレッドシートの作成画面が表示されるので、「空白」のスプレッドシート選択し、シートを新規作成します。

空のスプレッドシートが作成されたら、テストデータをシートに入力します。今回はキャラクターの名前と、それぞれの好きな食べ物を入力してみます。

キャラクターと食べ物

データをループで取得するため、キャラと食べ物のセットは2セット以上用意しましょう。今回は、このようなデータを用意しました。

データができたら、スクリプトを書いていきましょう。メニューの「ツール」から「スクリプトエディタ」を起動すると、先程と同じスクリプト画面が表示されます。

スプレッドシートからスクリプトエディタへの遷移今回用のスクリプトを以下に載せたので、解説していきます。

const getSheetData = () => {
  const sheet = SpreadsheetApp.getActiveSheet();
  const lastRow = sheet.getLastRow();
  for (let i = 1; i <= lastRow; i++) {
    Logger.log(`${sheet.getRange(i, 1).getValue()}は${sheet.getRange(i, 2).getValue()}が好き`);
  }
}

変数sheetには、開かれている(アクティブな)スプレッドシートの情報(シートオブジェクト)が入っています。シートは1つしか作っていないため、データを載せたシートが選択されます。

変数lastRowには、シートの中で、データが入力されている末尾の行番号が入っています。例では2列目までデータが入っているので、lastRowには2が代入されます。lastRowを取得することで、データの列が増減しても、コードを変えることなくループさせることができます。

さて、スプレッドシートではJavaScriptと同様、for文などのブロック構文を利用できます。初期値を1(列目)、最後の値を末尾(2列目)として、ループさせましょう。

新しいGAS(Chrome V8)では、モダンなJavaScriptのような構文を利用できます。5行目のようなテンプレート構文もその一つです。ちょっと戻りますが、関数getSheetDataの宣言(アロー関数)もそうですね。

シートオブジェクトに対してgetRange(a, b)とすると、a列目・b行目のセルを指定できます。その後にgetValue()することで、セルの値を取得できます。

for文でループさせることで、最初は(1, 1)と(1, 2)、つまり「かずん」と「ラーメン」を取得できます。2つの値がテンプレートに埋め込まれ、「かずんはラーメンが好き」という文がログに出力されます。

次のループでは(2, 1)と(2, 2)、つまり「かなきち」と「うに」を取得できます。ログは「かなきちはうにが好き」となりますね。

ログは各自違うものが出力されるかと思いますが、下の画像のように出力されていればOKです！

GASのログイメージ2

まとめ

GASを触ってみていかがだったでしょうか。

個人的にはExcelをJSで操作する感じがあり、Excelのマクロよりとっつきやすいんじゃないかな、と思います。

引き続きGASの記事を書いていくので、よかったら見ていってくださいね。

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

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

2020-04-11

コーディング練習(5) positionを使用してトップへ戻るボタンを実装しよう

未経験でWEB業界かなきち

positionを使用してトップへ戻るボタンを実装しようこんにちは、かなきち(@kanakichi0801)です。

この記事で、トップへ戻るボタンをpositionプロパティを使用して実装していきます。 f:id:mimipen:20200410214727j:plain

今回コーディングする箇所はフッターです。フッターにはよくコピーライトがあります。コピーライトの記述する際に使用するタグについても最下部でしっかり説明しているので、確実にマスターしたいという方は最下部までご覧ください。

さっそく作成するという方はこちらをクリック！

また、前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！

0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net

1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net

2. 3カラムを隣接セレクタ(li + li)を使ってコーディングした記事↓
blog.mimipen.net

3. 特殊文字を使いメニュー表をコーディングした記事↓
blog.mimipen.net

4. Google mapの埋め込み方&拡大方法を解説した記事↓
blog.mimipen.net

コーディング練習第五回目！
この記事で実践的なpositionプロパティの使い方を理解しよう！

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

・positionプロパティの具体的な使用方法が知りたい

完成コード
コーディングルール
デザインデータを元に計画をたてる
フッターのHTML
- アンカーリンクの種類一覧
フッターのCSS
- フッターの大枠を実装する
まとめ
- HTMLタグをしっかり使ったコード
- smallタグとは？

完成コード

※以下のページの最下部のフッターを実装していきます。
サンプルページ

[html]

<div class="footer">
  <div class="totop"><a href="#"><span class="arrow"></span></a></div>
  <div class="copy">Copyright &copy; 2019 MIMIPEN inc. All Rights Reserved.</p>
</div>

[css]

/*--------------------------------------------------------------
   FOOTER
--------------------------------------------------------------*/
.footer{
  position: relative;
  background-color: #74859f;
}
.totop{
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.totop a{
  display: block;
  background-color: #bacae1;
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 40px;
}
.totop .arrow{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.copy{
  width: 1040px;
  margin: 0 auto;
  color: #fff;
  font-size: 10px;
  padding: 20px 0;
}

もっとレベルを上げてコードを書きたい方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！

以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入ります。

コーディングルール

初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。

1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。

デザインデータを元に計画をたてる

まずは、デザインを確認しましょう！デザインデータはこちらをクリック。

フッターエリアのデザインデータを元に以下のように考える。
f:id:mimipen:20200410214727j:plain

かなきちメモ(クラス名や使用するプロパティを考える)
青い帯の部分は、コピーライトの周りにpaddingを持たせて作る。トップへ戻るボタンのクラス名は「totop」とし、positionプロパティを使って中央に配置しつつ帯と重なるようにする。トップへ戻るボタンの中央にある矢印もpositionプロパティを使って縦横中央に配置する。矢印の実装方法は、正方形にborder-top・border-rightをつけて、回転(transform: rotate([数値]deg))させる。

フッターのHTML

[html]

<div class="footer">
  <div class="totop"><a href="#"><span class="arrow"></span></a></div>
  <div class="copy">Copyright &copy; 2019 MIMIPEN inc. All Rights Reserved.</p>
</div>

以下のコードのアンカーリンク(aタグ)に注目しましょう。

<div class="totop"><a href="#"><span class="arrow"></span></a></div>

アンカーリンク(aタグ)のhrefには移動したいページのリンクまたは、移動したい箇所のid名を#付きで記入する。今回飛ばしたいのはページ上部で、ページ上部にリンクを飛ばした時はhrefに「#」と入力する。

アンカーリンクの種類一覧

よく使うアンカーリンクが以下の4つのパターンがあります。
(1)href="#"
＝　今いるページ上部に移動する。
(2)href="http://blog.mimipen.net/"
＝　リンクのページに移動する。
(3)href="#about"
＝　今いるページ内、id名が「about」のエリア上部に移動する。これをページ内リンクという。
(4)href="http://blog.mimipen.net/#about"
＝　リンクのページに移動し、リンク内のid名が「about」のエリア上部に移動する。

ちなみに、アンカーリンクが空の時(href="")は、当然ですがリンクがないので移動しません。

(3)(4)について補足です。id名は重複してはいけません。id名を重複して書いてしまった場合は、2つ目にページ内リンクにはページ移動できません。また、jsによるアクションが動かない原因にもなるのでidはページ内リンクなどここぞという時にのみ使用しましょう。

フッターのCSS

フッターの大枠を実装する

フッターの大枠というのは、青い帯状の部分のことです。 f:id:mimipen:20200410214727j:plain

.footer{
  position: relative;
  background-color: #74859f;
}

大枠に青色(#74859f)を設定し、ボタンを自由に移動させるエリアを(position: relative)で決める。

positionプロパティの使い方については、以下のリンクを参考にしてください。 blog.mimipen.net

次に、トップへ戻るボタン(totop)を設定していく。

.totop{
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

div(class="totop")要素はブロック要素です。ブロック要素は親要素の大きさを継承します。そのためここではdisplay: inline-blockを使用して、ボタンのみの大きさにします。そして親要素のエリア内で自由に動かしたいのでposition: absoluteを設定しています。

bottom: 20pxで下から20pxの位置に移動するという意味。

left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);

左から50%の位置に移動し、要素の半分の値分、X軸に-50%するという意味。

f:id:mimipen:20200410214730p:plain f:id:mimipen:20200410214734p:plain

transformはブラウザ対応範囲が限られているので、ベンダープレフィックス(-webkit-)も記述しておきます。

.totop a{
  display: block;
  background-color: #bacae1;
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 40px;
}

aタグは、インライン要素です。インライン要素のままにしておくとクリックエリアが子要素の大きさになってしまいます。そのため、ブロック要素にして親の大きさを継承させます。

矢印(子要素)を自由に移動したいので親要素のaタグに(position: relative)を持たせます。他はこれまでの解説でよく出てきたプロパティばかりなので飛ばしますね。

.totop .arrow{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

矢印の実装を上記では行っております。20pxの正方形を作成し、topとrightにそれぞれボーダープロパティを追加します。イメージは以下の通りです。
f:id:mimipen:20200410214738p:plain

矢印を作り、transformプロパティで[-45度]回転させています。軸や大きさの調整は、marginとbox-sizingで行いました。また、自由に動かすためposition: absoluteを指定しています。 f:id:mimipen:20200410214742p:plain

.copy{
  width: 1040px;
  margin: 0 auto;
  color: #fff;
  font-size: 10px;
  padding: 20px 0;
}

最後にコピーライトですねの調整をします。こちらもこれまでに使用したことがあるプロパティばかりなので説明は省きます。

まとめ

いかがだったでしょうか。こんな小さな箇所なのにコード量が多く感じたのではないでしょうか。見た目で簡単そうに見えても、難解なプロパティを使うほどコード量が多くなっていきます。

私の感覚ですが、positionはこれまで覚えてきたプロパティから少し難易度が上がります。ただ、これを覚えると複雑なコーディングも実装できるようになるので、頑張って挑戦していくようにしましょう！

HTMLタグをしっかり使ったコード

[html]

<footer>
  <div class="totop"><a href="#"></a></div>
  <p class="copy w__base"><small>Copyright &copy; 2019 MIMIPEN inc. All Rights Reserved.</small></p>
</footer>

[css]

/*--------------------------------------------------------------
   FOOTER
--------------------------------------------------------------*/
footer{
  position: relative;
  background-color: #74859f;
}
.totop{
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.totop a{
  display: block;
  background-color: #bacae1;
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 40px;
}
.totop a::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -6px 0 0 -10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.copy{
  color: #fff;
  font-size: 10px;
  padding: 20px 0;
}

大きく変わった箇所といえば、コピーライトを<small>タグで囲った箇所でしょうか。

smallタグとは？

<small>タグは、「免責」・「警告」・「法的規制」・「著作権」・「ライセンス要件」などの注釈や細目を表す際に使用するそうです。難しく考えず、コピーライト(著作権)を表す際に使用されます。

以前はコピーライトは<address>タグで書かれていたのですが、HTML5からは<small>タグを使用するようになりました。

決して文字サイズを小さくするためだけにに使わないでください。<small>タグはコピーライトに使うと覚えておきましょう。

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

2020-03-31

JavaScriptでTodoリスト作成しよう〜Todoを完了させてみよう〜

JavaScript かずん

JavaScriptでTodoリスト作成しよう〜DOM(html要素)を更新してみよう〜

はじめに

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

前回の記事では、Todoリスト用のディレクトリを作って、Todoの登録・削除機能を実装しました。

前回の記事をまだ見てない方は、以下のリンクからご覧いただけます！

blog.mimipen.net

今回の記事では、Todoが終わったら、完了の目印をつける機能を実装してみたいと思います。

イメージとしては以下の通りです。

todoリスト

Todoが終わったとき削除させてもよいのですが、終わったことをわかりやすくしてみようと思います。

blog.mimipen.net

この記事を読むと、JavaScriptでDOM(html要素)を更新する方法がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・DOM(html要素)がピンっときていない方

はじめに
Todoの完了
まとめ

Todoの完了

今の仕様だと、Todoが完了したときは、Todoを削除する他ありません。完了したときの挙動をつけることで、Todoが終わったどうかを見やすくすることができます。今回は、終了したTodoに取り消し線をつけてみることにしましょう。

まず、Todoを登録する際に、Todoを完了するボタンをセットで表示させてみます。

js/todo.jsを開き、以下のように追記してみましょう。

const addTask = task => {
  const listItem = document.createElement('li');
  const removeButton = document.createElement('button');
  const completeButton = document.createElement('button'); // 追加

  /* 省略 */

  completeButton.innerText = '完了';
  completeButton.addEventListener('click', () => completeTask(completeButton));  // 完了イベントを追加(定義は後ほど)

  /* 省略 */

  listItem.append(completeButton);
  listItem.append(removeButton);
  addTaskTarget.appendChild(listItem);
};

このコードを追加すると、Todoを登録したとき、登録したTodoと「削除」ボタンの間に「完了」ボタンが表示されるようになったかと思います。

完了ボタンの追加する方法自体は、前回の削除ボタンを追加したときと同じです。

コードの中の完了イベントは、Todoごとに追加される完了ボタンを引数にとるメソッドです。削除ボタンの書き方とそっくりですね。

では次に、完了ボタンの挙動、「ボタンを押した時にTodoに取り消し線をつける」機能を実装しましょう。

const completeTask = completeButton => {
  const targetTask = completeButton.closest('li');
  targetTask.classList.add('isComplete');
  targetTask.removeChild(completeButton);
};

押されたボタンがある<li>の中のTodoに、isCompleteというクラスを付与します。また、一度完了したTodoを再度完了させる必要はないため、isCompleteを付与した後は、完了ボタン自体を削除しています。

isCompleteのスタイルは以下のようにしておくことで、取り消し線をつけることができます。css/todo.cssを開き、以下のコードを追記します。

.isComplete {
  text-decoration: line-through;
}

CSSのtext-decorationプロパティを用いると、文章を装飾する線（波線、破線など）を表現することができます。例えば、reset cssをかけない<a>タグは、初期値で下線(underline)がついています。そのため、下線が不要な場合、

a {
  text-decoration: none;
}

というスタイルを当てる必要があります。最も、現在使われているリセットCSSを用いれば、不要な初期スタイルはおおむね削除されると思いますが。

今回は取り消し線を適用したいので、text-decoration: line-through;としました。

text-decorationは他にも様々な値が適用できます。適用できる値は、以下リンクに詳細があります。

developer.mozilla.org

ここまでの実装で、下のような動きが実装できるかと思います。

todoリストのイメージ

これで、Todoを完了したときの動きをつけることができました。

まとめ

今回は、タスクの変更・完了機能を実装してみました。いかがだったでしょうか。

次回の記事では、殺風景なTodoリストにスタイルを当ててみたいと思います！お楽しみに！

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

2020-03-03

position プロパティまとめ！基本から応用まで徹底解説！(relative・absolute・fixed・static)【CSS初心者入門】

CSS初心者入門かなきち

【CSS】position プロパティの基本的な使い方こんにちは、かなきち(@kanakichi0801)です。今回は、CSSプロパティpositionについて解説していきます！

要素を自由な位置に配置する方法がこの記事で分かります！

コーディングを始めたばかりの人でも、このプロパティの存在はなんとなくご存知なのではないでしょうか？

「CSS 自由な位置配置」などで検索していると出てきますよね！でも、試してみると上の方に要素が飛んで行ってしまったり...

そう、positionには、少々癖があります。癖と実務で使える基本的な使い方をこの記事では紹介していきます！

さっそく記事を読みたい方はスキップを押してね！

これからの記事を読むと
positionの癖と実務で基本的な使い方が分かるよ！

こんな人に読んで欲しい

・コーディングをしていて、要素を自由に配置したいと思った方

・簡単にpositionの使い方を知りたい方

・positionの使い方がいまいち分からない方

positionとは
positionの基本的な使い方
z-indexで重ね順を変更する
position応用編コード
まとめ

positionとは

要素の位置を決められるプロパティ position 要素の位置を決められるプロパティです。要素を中央に配置したい場合や、タイトルを画像で装飾したい場合などに使用します。

初期値は、staticです。初期値は、一度設定したプロパティを解除するのに使用されることが多いです。

positionの基本的な使い方

See the Pen vYOZzyY by かなきち (@kanakichi) on CodePen.

positionの使い方を一言で説明すると、position: relativeで要素を移動できる範囲を決め、自由に動かしたい要素にposition: absoluteを設定します。

次に位置を設定します。
左上、右上、左下、右下のどの位置からの距離を指定するかによって書き方が変わってきます。

書き方が以下になります。

.左上{
  top: 数値;
  left: 数値;
}
.右上{
  top: 数値;
  right: 数値;
}
.左下{
  bottom: 数値;
  left: 数値;
}
.右下{
  bottom: 数値;
  right: 数値;
}

z-indexで重ね順を変更する

positionを使用していると、重ねた要素を上に表示したいのに下に表示される場合があります。
そんな時は、z-indexを使用しましょう。

z-indexを使う場合は、position: relative・absolute・fixedいずれかと一緒に使いましょう。 ※staticは指定してもz-indexが効きません。

また、重ね順は-2147483647(最下部)〜2147483647(最上部)までの値で指定します。

z-indexは、position: relative・absolute・fixed いずれかと一緒

.下{
  position: relative;
  z-index: 0;
}
.中{
  position: relative;
  z-index: 250;
}
.上{
  position: relative;
  z-index: 500;
}

「2147483647」まで指定できますが、基本的には指定しないですよね。職場のコーディングルールによって違いがあると思いますが、私の場合は、0〜500の間で10刻みを基本として指定するようにしています。最上部に表示したいものが500で、最下部に表示するのが0です。

position応用編コード

縦中央寄せ

f:id:mimipen:20200303004700j:plain

.box__wrap{
  position: relative;
}
.box{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

縦横中央寄せ

f:id:mimipen:20200303004703j:plain

.box__wrap{
  position: relative;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

ヘッダー追従

f:id:mimipen:20200303004706j:plain スクロールしても同じ位置に固定して表示させたい場合は、position: fixedというプロパティと値が使えます。

header{
  position: fixed;
  top: 0;
  left: 0;
}

position: absoluteと違い、position: relativeで範囲を決める必要はありません。

まとめ

この記事の一番重要なポイントは、
position: relativeで要素を移動できる範囲を決め、自由に動かしたい要素にposition: absoluteを設定するという部分です。

positionのプロパティについて検索すると「位置指定要素」「相対位置指定要素」「絶対位置指定要素」「粘着位置指定要素」など、意味が理解しにくい説明が多く混乱してしまうのですが、実務で良く使うのは positionの基本的な使い方で説明したものがほとんどです。

そう考えると、覚えることがそこまで多くないのがわかります。まずは基本を理解して、少しずつ応用編も使えるようになればコーディングの幅も広がりますね！

↓痒いところに手がとどく記事を日々更新中！ blog.mimipen.net blog.mimipen.net blog.mimipen.net

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

2020-02-12

JavaScriptでTodoリストを作ろう！(1)〜Todoの登録/削除まで〜【JavaScript初心者入門】

JavaScript かずん

JavaScriptでTodoリストを作ってみよう！〜Todoの登録/削除まで〜

はじめに

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

今回の記事から、JavaScriptを使って「Todoリスト」を作っていきます！

今回は、タスクを追加して削除するまでを作ります！イメージは↓の通りです。複数回に分けて、少しずつアップデートしていく予定です。

なお、Todoリストって何、と思われた方は、下に概要を載せていますので、そちらをご参照ください。

この記事を読むと、JavaScriptで生成したDOMの表示方法がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

はじめに
Todoリストって何？
今後の実装について
作る準備
Todoリストのひな形を作ろう！
Todoを登録しよう！
実際に動かしてみよう
まとめ

Todoリストって何？

Todoリストとは、自分のやること・予定をまとめたリストです。色々なプログラミング言語で練習課題としてよく挙げられます。

要素の基本的な操作(追加・読取・更新・削除)をアプリ制作を通じて学ぶことができるため、課題として人気なのかもしれませんね。

今回は、HTML/CSS + JavaScriptでTodoリストを作っていきたいと思います。画面に表示される要素(DOM要素)を、JavaScriptで制御していくイメージです。

今後の実装について

今回の記事では要素の追加までを実装して、次回の記事以降で少しずつアップデートしていこうかと思います。

アップデートの内容としては、基本的な操作(更新・削除)を網羅する、CSSで見た目を整えアニメーションをつける、タスクをlocalStorageに保存する、タスクにバリデーションをつける、などを考えています。なんのことやらちんぷんかんぷんという方も、アップデート毎に都度説明を加えていきますので、今は分からなくとも大丈夫です！

作る準備

まず、作業用フォルダを準備しましょう。作業用フォルダの中には、ソース一式を入れるsrcフォルダを作ります。(後ほどライブラリを追加する際、ライブラリの実体はsrcの外部に配置されます)

srcフォルダの中には、HTMLファイル(今回はindex.html)とcss/jsフォルダを準備します。css/jsフォルダの中には、todo.cssとtodo.jsを作成しましょう。(今回はtodo.jsのみ編集します)

ここまで作成すると、フォルダ構成は以下のようになるかと思います。

作業フォルダ/
  └src/
    └index.html
    └css/
      └todo.css
    └js/
      └todo.js

この通りになれば、フォルダ/ファイルの準備はOKです！

Todoリストのひな形を作ろう！

フォルダ/ファイルを作成したら、まずTodoリストのひな形を作りましょう。HTMLで要素を作っていきます。

タイトルにもある通り、今回は、Todoの登録・削除機能を実装します。そのためには、Todoを登録するところ（テキスト入力フォームと登録ボタン）、Todoを表示するところ（空のリスト要素）、さらに削除するところ（Todo一つ一つに付属する削除ボタン）が必要です。

上記をまとめると、以下のようなイメージになるかと思います。

todoリストのイメージ

イメージが出来たら、HTMLの実装にとりかかります。私は以下のように実装しました。

  <!-- <head>は省略 -->
  <body>
    <header class="header">
      <h1 class="title">Todo List</h1>
    </header>
    <ul class="todo js-addTask-target"></ul>
    <form>
      <input class="js-addTask-value" type="text" />
      <button class="js-addTask-trigger" type="button">タスクを登録する</button>
    </form>
    <script src="js/todo.js"></script>
  </body>
</html>

まず、空のリストとして、ul.todoを用意しています。タスクが追加される度に、<li>が追加されていくイメージです。

<ul>の下には、タスクを登録するためのインプットと、登録用のボタンを用意しました。インプットにタスク名を追加して登録ボタンを押すと、タスクが登録される、という流れです。

HTMLの中に「js-」という名前のクラス名があるかと思いますが、これはjsに関連する要素であることを明示しています。JSファイルを編集する際に、これらのクラスが関わってきますが、一旦読み飛ばしてかまいません。

ここまでで、HTML(ひな形)を作成しました。次に、JSでTodoを登録する機能を実装しましょう。

Todoを登録しよう！

JS部分に関してですが、以下のように実装しました。

'use strict';

const addTaskTrigger = document.getElementsByClassName('js-addTask-trigger')[0];
const addTaskTarget = document.getElementsByClassName('js-addTask-target')[0];
const addTaskValue = document.getElementsByClassName('js-addTask-value')[0];

const removeTask = removeButton => {
  const targetTask = removeButton.closest('li');
  addTaskTarget.removeChild(targetTask);
};

const addTask = task => {
  const listItem = document.createElement('li');
  const removeButton = document.createElement('button');

  removeButton.innerText = '削除';
  removeButton.addEventListener('click', () => removeTask(removeButton));

  listItem.innerText = task;

  listItem.append(removeButton);
  addTaskTarget.appendChild(listItem);
};

addTaskTrigger.addEventListener('click', event => {
  const task = addTaskValue.value;
  addTask(task);
  addTaskValue.value = '';
});

上からソースコードの解説をしていきます。

1行目の'use strict'は、ざっくり言うと、JavaScriptでエラーになりにくい実装をエラーにし、かつ素早く実行してくれるモード(strictモード)に切り替える、という宣言です。

例えば、↓の記事で変数宣言のvar / let / constについて解説していますが、strictモードでないJavsScriptではvar / let / constがなくとも変数宣言ができてしまいます。

blog.mimipen.net エラーチェッカー(linter)が導入されているエディタではエラーになるかとは思いますが、実行時にもちゃんとチェックさせるよう、'use strict'は忘れずに記入しましょう。

3 ~ 5行目では、今回の実装に必要なDOM要素を取得しています。上から順に、登録ボタン、空のリスト、登録用インプットです。

document.getElementsByClassName(<クラス名>)で、指定したクラスを持つDOM要素をまとめて取得することができます。それぞれに「[0]」がついているのは、document.getElementsByClassName(<クラス名>)で返るのが配列(のようなもの)であるからです。

今回のケースでは、それぞれの取得で返る要素が1つだけのため、[0]と順番を指定することで、各々の要素を取得することができます。

7 ~ 10行目では、タスクを消したときの挙動を定義して、removeTask()という名前をつけています。

引数にボタンのDOM要素を取り、そのボタンを囲っている<li>を<ul>から消す、という処理です。こうすることで、各タスクについている削除ボタンを押した時、タスク全体を削除することができます。

12 ~ 23行目では、タスクを追加したときの挙動を定義して、addTask()と名付けています。

引数にタスクの文字列をとり、空の<li>と<button>を作った後、以下のことを行っています。

1. <button>で表示されるテキストを「削除」にする
2. 生成した削除ボタンに、先ほど用意した削除メソッドを発火させるイベントを設定する
3. <li>で表示されるテキストを、引数でとったタスクの文字列にする
4. <button>を<li>の中に入れる
5. <li>を<ul>の中に入れる

2で行なっていますが、<DOM要素>.addEventListener('<発火条件>', <イベント>);で、指定したDOM要素にイベントを設定することができます。今回は、「<削除ボタン>を<クリック>したら<removeTask()>する」というイベントを設定したいため、DOM要素に「削除ボタン」、発火条件に「クリック」、イベントに「removeTask()」を指定しています。

addEventListenerに関しては解説することが多くなってしまうためここではあまり触れませんが、以下のページが参考になるかと思います。

uxmilk.jp

最後に、25 ~ 29行目で、登録ボタンに対してタスク登録イベントを設定しています。

最初にインプット要素に入力された値を取得し、タスク登録メソッドに値を渡します。そうすることで、入力された値がタスクとして表示されます。

28行目では空の文字列をvalueに設定していますが、こうすることでタスク登録後インプットの中身が空になり、再び新しく登録できるようになります。

実際に動かしてみよう

ここまでの実装で、どのような挙動になるのでしょうか。あらためてイメージを見てみましょう。 Todoリストインプットにタスクを追加すると、入力したタスクがリストに追加されます。タスクにつく削除ボタンを押すと、タスクごと削除されるのが確認できるかと思います。

ここまでできれば、今回の実装はOKです！

まとめ

途中まで実装しましたがいかがだったでしょうか。

機能数は決して多くないけれど、JavaScriptのイベントや要素取得など、ここまででも大切なことがいくつか登場してきました。

今後の記事でも、Todoリストをエンハンスしつつ、JavaScriptの重要事項に触れていけたらと思います。

↓次の記事はこちら！ blog.mimipen.net

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

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

2020-01-20

コーディング練習(4) Google mapの埋め込み方&拡大方法を解説

未経験でWEB業界かなきち

Google mapを埋め込んでみようこんにちは、かなきち(@kanakichi0801)です。

前回の続きで、今回は以下の部分をコーディングしていきます。さっそく作成するという方はこちらをクリック！
Google mapを埋め込んだアクセスページ完成図今回はちょっと長めです。めげずに一緒にやりきりましょう！

前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！

0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net

1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net

2. 3カラムを隣接セレクタ(li + li)を使ってコーディングした記事↓
blog.mimipen.net

3. 特殊文字を使いメニュー表を実装した記事！↓
blog.mimipen.net

コーディング練習第四回目！
Google mapを埋め込んでアクセスエリアを実装してみよう！※ target="_blank"やメーラーの立ち上げ方の説明もあります。

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

完成コード
コーディングルール
デザインデータを元に計画をたてる
アクセスエリアの大枠
- アクセスエリアの大枠の構造をHTMLで実装
- メニューエリアの大枠にCSSを指定する
Google mapを埋め込もう
アクセス情報エリアを作ろう
- アクセス情報エリアのHTML構造
- アクセス情報エリアのCSS
サイトリンクを設置
- サイトリンクのHTML構造
- サイトリンクのCSS
ACCESSの完成コード
まとめ
- HTMLタグをしっかり使ったコード

完成コード

サンプルページ

[html]

  <div class="access">
    <div class="access__inner">
      <div class="base__title">
        <h2><div>ACCESS</div>アクセス</h2>
        <div class="deco"></div>
      </div>
      <div class="access__box cf">
        <div class="access__map">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226426!2d139.75140445067626!3d35.68372208009658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1578989911770!5m2!1sja!2sjp"></iframe>
        </div>
        <div class="access__address">
          <h3>みみぺんカフェ</h3>
          <div class="access__address__box">
            <div>〒100-8111</div>
            <div>東京都千代田区千代田１−１</div>
            <div>TEL:000-0000-0000</div>
            <div class="sup">
              <div>営業時間：10:00 〜 17:30</div>
              <div>定休日：毎週月曜日</div>
              <div>駐車場：10台</div>
            </div>
          </div>
          <div class="access__staff__message">
            スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。
          </div>
          <div class="site__link">
            <div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div>
            <div class="site__link__item mail"><a href="mailto:info&#64;test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>

[css]

/*--------------------------------------------------------------
   ACCESS
--------------------------------------------------------------*/
.access{
  width: 1040px;
  margin: 0 auto;
  padding: 100px 0 145px;
}
.access__box{
  margin-top: 40px;
}
.access__map{
  width: 680px;
  float: left;
}
.access__address{
  width: 340px;
  padding-left: 20px;
  box-sizing: border-box;
  float: right;
}
.access__map iframe{
  width: 100%;
  height: 425px;
  border: none;
}
.access__address h3{
  margin-bottom: 23px;
  padding: 17px 0 18px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: solid 3px #74859f;
}
.access__address__box,
.access__staff__message,
.access__address__box .sup{
  font-size: 14px;
  line-height: 1.5;
}
.access__address__box .sup{
  margin: 20px auto;
  padding: 15px;
  background-color: #eee;
}
.access__address .site__link{
  font-size: 0;
  margin-top: 25px;
}
.access__address .site__link .site__link__item{
  display: inline-block;
}
.access__address .site__link .site__link__item + .site__link__item{
  margin-left: 20px;
}
.access__address .site__link a{
  display: block;
  width: 70px;
  height: 70px;
  padding: 20px 16px 0;
  box-sizing: border-box;
  background-color: #74859f;
  border-radius: 35px;
}
.access__address .site__link img{
  width: 100%;
  height: auto;
}

もっとレベルを上げてコードを書きたい方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！

以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入ります。

コーディングルール

デザインデータを元に計画をたてる

まずは、デザインを確認しましょう！デザインデータはこちらをクリック。

メニューエリアのデザインデータを元に以下のように考える。
コーディング前に設計を考える

かなきちメモ(クラス名や使用するプロパティを考える)
全体をaccess__boxで囲い、左のマップにはaccess__map、右のアクセス情報エリアにはaccess__addressとクラス名をつけ、floatを使って両端に寄せる。ツイッターとメールのボタンはsite__linkというクラス名で囲いinline-blockを使って横に並べよう...
などなど事前に考えます。

アクセスエリアの大枠

アクセスエリアの大枠の構造をHTMLで実装

[HTML]

  <div class="access">
    <div class="access__inner">
      <div class="base__title">
        <h2><div>ACCESS</div>アクセス</h2>
        <div class="deco"></div>
      </div>
      <div class="access__box">
        <div class="access__map">
        </div>
        <div class="access__address">
        </div>
      </div>
    </div>
  </div>

クラス名のルール付けとh2(base__title)のパーツ化を以下の記事で説明しました。 blog.mimipen.net

access__mapとaccess__addressはfloatプロパティを使用して両端に並べたいのでaccess__boxに以下の記事でパーツ化したcfというクラス名を記述しています。 blog.mimipen.net

<div class="access__box cf">

メニューエリアの大枠にCSSを指定する

[CSS]

.access{
  width: 1040px;
  margin: 0 auto;
  padding: 100px 0 145px;
}
.access__box{
  margin-top: 40px;
}
.access__map{
  width: 680px;
  float: left;
}
.access__address{
  width: 340px;
  padding-left: 20px;
  box-sizing: border-box;
  float: right;
}

記事内で説明した内容ばかりなので説明は省きます。

access__addressというクラスに、box-sizing: border-box;というプロパティと値を指定しています。これはborderやpaddingを指定した幅や高さに含めるという意味です。指定した値は今回で言うwidth: 340pxのことで、含めているのは、padding-left: 20pxになります。 box-sizing: border-boxを画像を使ってイメージしよう

Google mapを埋め込もう

Google mapからHTMLコードをコピーする手順

1.google map にアクセスする。

2.埋め込みたい住所を検索する google mapで住所を検索

3.[共有]をクリックする。
google mapで共有をクリック

4.地図を埋め込むをクリック
google mapで地図を埋め込むをクリック

5.HTMLをコピー
google mapで埋め込みコードをコピー

HTMLコードを貼り付ける

HTMLコードをマップを貼り付けたい箇所に貼り付けます。access__mapの間に貼り付けます。 [HTML]

<div class="access__box">
  <div class="access__map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226476!2d139.75140444972868!3d35.68372208009644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1579014454145!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
  </div>
  <div class="access__address">
  </div>
</div>

不要なHTMLコードを削除する

HTML5では、frameborderが廃止されました。Google mapのHTMLコードにはいらないコードが多いのでまるっと取ってしまいましょう。好みですが、widthやheightも合わせて削除しました。削除したコードが以下のものです。
[HTML]

<div class="access__box">
  <div class="access__map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226476!2d139.75140444972868!3d35.68372208009644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1579014454145!5m2!1sja!2sjp"></iframe>
  </div>
  <div class="access__address">
  </div>
</div>

google mapのスタイルを整える

不要なコードを削除するとborderが出てきてしまいます。それも合わせて整えていきましょう。 google mapのframeborderを消すとボーダーが出てくる

[CSS]

.access__map iframe{
  width: 100%;
  height: 425px;
  border: none;
}

access__mapに幅を指定していたので、widthは100%とします。frameborderを消し、グレー線が見えてしまっていたのでborder: none;で線を消しました。

以下のような状態になればOKです！ google map 完成図

このままでも良いのですが、これだと近くの駅などの周辺情報がわかりませんね。そんな時は倍率を変えましょう。

先ほどのリンクを見ます。

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226476!2d139.75140444972868!3d35.68372208009644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1579014454145!5m2!1sja!2sjp

HTMLコードの中に「!4f13.1」というコードがあり、コードの中で「13.1」が倍率を表している部分です。1〜180までの間で指定することができ、1が拡大した時、180が縮小した時です。

今回は、35と指定しました。
※ちなみに、33〜39の拡大率は同じでした。少しづつ数値を変えて調整してみてください。
google mapの拡大率を変更する

google mapの倍率に関してはこちらサイトを参考にしました。

アクセス情報エリアを作ろう

アクセス情報エリアのHTML構造

[HTML]

<!-- 〜 省略 〜 -->
<div class="access__box">
  <div class="access__map">
    <!-- 〜 省略 〜 -->
  </div>


  <div class="access__address">
    <h3>みみぺんカフェ</h3>
    <div class="access__address__box">
      <div>〒100-8111</div>
      <div>東京都千代田区千代田１−１</div>
      <div>TEL:000-0000-0000</div>
      <div class="sup">
        <div>営業時間：10:00 〜 17:30</div>
        <div>定休日：毎週月曜日</div>
        <div>駐車場：10台</div>
      </div>
    </div>
    <div class="access__staff__message">
      スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。
    </div>


  </div>
</div>

特に変わったことはしていないので、説明は省きます。

アクセス情報エリアのCSS

[CSS]

.access__address h3{
  margin-bottom: 23px;
  padding: 17px 0 18px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: solid 3px #74859f;
}
.access__address__box,
.access__staff__message{
  font-size: 14px;
  line-height: 1.5;
}
.access__address__box .sup{
  margin: 20px auto;
  padding: 15px;
  background-color: #eee;
}

h3タグには、border-bottomを使用してラインを引いています。

border-bottom: solid 3px #74859f;

.access__address__box、.access__staff__messageは、クラス名は違いますがフォントサイズと行間が同じなのでまとめて書きました。クラス名をまとめる場合は、「,」でクラスをつなぎます。

サイトリンクを設置

サイトリンクのHTML構造

[HTML]

<div class="access__staff__message">
  スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。
</div>
<!-- ↓以下を追加 -->
<div class="site__link">
  <div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div>
  <div class="site__link__item mail"><a href="mailto:info&#64;test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div>
</div>

ツイッターリンクとメールリンクを設置してみました。順に説明していきます。

ターゲットブランク(target="_blank")とは？

ツイッターのHTML構造を見てみましょう。

<div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div>

<a href="URLが入ります" target="_blank"></a>の部分です。

ボタンを押した時に以下のように、別ウィンドウで開いたことはありませんか？

ピーンとこない場合は、画像自体にリンクを貼り付けたので試しに画像をクリックしてみてください。

この動きを実装するにはaタグにtarget="_blank"という属性を追加します。

ターゲットブランク(target="_blank")は、どういう場合に使うの？

一言で言うと、リンク先のページからリンク元に戻れない場合です。別サイトやPDFファイルにページ移動させたい場合にリンク元へ戻る手段が無いのでターゲットブランク(target="_blank")を使用します。同一サイトでもリンク先のページからリンク元の戻る手段がない場合はtarget="_blank"を使うのが良いでしょう。

メーラーを立ち上げる

次にメールのHTML構造を見てみましょう。

<div class="site__link__item mail"><a href="mailto:info&#64;test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div>

<a href="mailto:info@test.com">の部分です。※@は特殊文字コードで@の意味です。

ボタンを押した時に以下のように、パソコンやスマートフォンに入っているメーラーが立ち上がります。 HTMLでメーラーを立ち上げる

この動きを実装するには、メールアドレスの先頭にmailto:という値を追加します。

メーラーが立ち上がってすごく便利じゃんと思うかもしれませんが、基本的にサイトを作成する場合はmailto:は使用しません。コンタクトフォームを作ることをおススメします。ホームページで使われたのソースコードは全世界の人が見れる情報です。このmailto:を使いメールアドレスを記述すると、その情報を悪用してスパムメールを大量に送られる可能性が高くなります。「お客様からお問い合わせをいただきたいのに、スパムメールが多くて大事なメールが見つからない」なんてことが起きてしまうのです。HTMLだけでメーラーを立ち上げることができることだけ覚えておきましょう。

サイトリンクのCSS

.access__address .site__link{
  font-size: 0;
  margin-top: 25px;
}
.access__address .site__link .site__link__item{
  display: inline-block;
}
.access__address .site__link .site__link__item + .site__link__item{
  margin-left: 20px;
}
.access__address .site__link a{
  display: block;
  width: 70px;
  height: 70px;
  padding: 20px 16px 0;
  box-sizing: border-box;
  background-color: #74859f;
  border-radius: 35px;
}
.access__address .site__link img{
  width: 100%;
  height: auto;
}

これまでに勉強した内容を使えばできる部分なので、inline-blockの説明は省きます。

.access__address .site__link .site__link__item + .site__link__itemでは以下の記事で説明した隣接セレクタを使用して、メールボタンの左側に余白をつけました。隣接セレクタについては以下の記事を参考にしてください。
blog.mimipen.net

.access__address .site__link a{
  display: block;
  width: 70px;
  height: 70px;
  padding: 20px 16px 0;
  box-sizing: border-box;
  background-color: #74859f;
  border-radius: 35px;
}

ボタンの大きさを指定し、box-sizing: border-boxを指定します。先ほど説明した内容ですが、これを入れることでborderやpaddingを指定した幅や高さの中に含めることができます。

指定しないと [指定した値 + padding]の大きさになります。
box-sizing: border-boxを指定しない時

縦方向の中央寄せは、初心者のうちは少し難しいので今回はpaddingで指定しています。

要素を縦方向の中央寄せにする方法
代表的なものは、table-cellを使う方法、position、flexboxを使う方法があります。※positionを使用した方法を下部で説明しています。

border-radius: 35px;  /*幅と高さ70pxの半分の値を指定しています。*/

border-radiusは、角丸にするプロパティです。枠を角丸にするだけではなく、円を作成するのにも役立ちます。

ACCESSの完成コード

サンプルページ

[html]

  <div class="access">
    <div class="access__inner">
      <div class="base__title">
        <h2><div>ACCESS</div>アクセス</h2>
        <div class="deco"></div>
      </div>
      <div class="access__box cf">
        <div class="access__map">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226426!2d139.75140445067626!3d35.68372208009658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1578989911770!5m2!1sja!2sjp"></iframe>
        </div>
        <div class="access__address">
          <h3>みみぺんカフェ</h3>
          <div class="access__address__box">
            <div>〒100-8111</div>
            <div>東京都千代田区千代田１−１</div>
            <div>TEL:000-0000-0000</div>
            <div class="sup">
              <div>営業時間：10:00 〜 17:30</div>
              <div>定休日：毎週月曜日</div>
              <div>駐車場：10台</div>
            </div>
          </div>
          <div class="access__staff__message">
            スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。
          </div>
          <div class="site__link">
            <div class="site__link__item twitter"><a href="https://twitter.com/kanakichi0801" target="_blank"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></div>
            <div class="site__link__item mail"><a href="mailto:info&#64;test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>

[css]

/*--------------------------------------------------------------
   ACCESS
--------------------------------------------------------------*/
.access{
  width: 1040px;
  margin: 0 auto;
  padding: 100px 0 145px;
}
.access__box{
  margin-top: 40px;
}
.access__map{
  width: 680px;
  float: left;
}
.access__address{
  width: 340px;
  padding-left: 20px;
  box-sizing: border-box;
  float: right;
}
.access__map iframe{
  width: 100%;
  height: 425px;
  border: none;
}
.access__address h3{
  margin-bottom: 23px;
  padding: 17px 0 18px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: solid 3px #74859f;
}
.access__address__box,
.access__staff__message,
.access__address__box .sup{
  font-size: 14px;
  line-height: 1.5;
}
.access__address__box .sup{
  margin: 20px auto;
  padding: 15px;
  background-color: #eee;
}
.access__address .site__link{
  font-size: 0;
  margin-top: 25px;
}
.access__address .site__link .site__link__item{
  display: inline-block;
}
.access__address .site__link .site__link__item + .site__link__item{
  margin-left: 20px;
}
.access__address .site__link a{
  display: block;
  width: 70px;
  height: 70px;
  padding: 20px 16px 0;
  box-sizing: border-box;
  background-color: #74859f;
  border-radius: 35px;
}
.access__address .site__link img{
  width: 100%;
  height: auto;
}

まとめ

googleマップの埋め込み方・aタグのターゲットブランクtarget="_blank"・メーラーを立ち上げる方法について説明させていただきました。今回は特にボリュームが多くなってしまい、読みづらくなっていたらすみません。ここまで来たらあと少し！次でPCサイトを完成させます！

わかりにくいところがあればツイッターなどでお気軽にご質問ください。いただいた内容を元にブログのブラッシュをさせていただきます。

以下にHTMLタグもしっかり使ったコードも載せておくので参考に見てみてください。

HTMLタグをしっかり使ったコード

[html]

  <section class="access">
    <div class="access__inner w__base">
      <h2 class="base__title"><span class=" en">ACCESS</span>アクセス</h2>
      <div class="access__box cf">
        <div class="access__map">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7270584226426!2d139.75140445067626!3d35.68372208009658!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f35!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1578989911770!5m2!1sja!2sjp"></iframe>
        </div>
        <div class="access__address">
          <h3>みみぺんカフェ</h3>
          <address>
            <div class="access__address__box">
              <p>〒100-8111</p>
              <p>東京都千代田区千代田１−１</p>
              <p>TEL:000-0000-0000</p>
              <ul class="sup">
                <li>営業時間：10:00 〜 17:30</li>
                <li>定休日：毎週月曜日</li>
                <li>駐車場：10台</li>
              </ul>
            </div>
          </address>
          <p class="access__staff__message">
            スタッフ一同お客様のご来店を心よりお待ちいております。お気軽にお立ち寄りください。
          </p>
          <ul class="site__link">
            <li class="twitter"><a href="https://twitter.com/kanakichi0801"><img src="./img/icon__twitter.png" alt="みみぺんツイッターが開きます"></a></li>
            <li class="mail"><a href="mailto:info&#64;test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

[css]

/*--------------------------------------------------------------
   ACCESS
--------------------------------------------------------------*/
.access{
  padding: 100px 0 145px;
}
.access__box{
  margin-top: 40px;
}
.access__map{
  width: 680px;
  float: left;
}
.access__address{
  width: 340px;
  padding-left: 20px;
  box-sizing: border-box;
  float: right;
}
.access__map iframe{
  width: 100%;
  height: 425px;
  border: none;/*frameborderを消したことでborderがついてるため*/
}
.access__address h3{
  margin-bottom: 23px;
  padding: 17px 0 18px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: solid 3px #74859f;
}
.access__address__box,
.access__staff__message{
  font-size: 14px;
  line-height: 1.5;
}
.access__address__box .sup{
  margin: 20px auto;
  padding: 15px;
  background-color: #eee;
}
.access__address .site__link{
  font-size: 0;
  margin-top: 25px;
}
.access__address .site__link li{
  display: inline-block;
}
.access__address .site__link li + li{
  margin-left: 20px;
}
.access__address .site__link a{
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  background-color: #74859f;
  border-radius: 40px;
}
.access__address .site__link img{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 38px;
}

初心者用のコードと大きく違う点は、.access__address .site__link imgをpositionを使い縦方向の中央寄せにしていることでしょうか。

上下左右の中央寄せは以下のコードで実現できます

親要素{
  position: relative;
  width: 値;
  height: 値;
}
.access__address .site__link img{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

上下の中央寄せは以下のコードで実現できます

親要素{
  position: relative;
  height: 値;
}
.access__address .site__link img{
  position: absolute;
  top:50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

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

2020-01-08

コマンド操作でパッケージ管理ツール「npm」を使ってみよう！

JavaScript かずん

コマンド操作でパッケージ管理ツール「npm」を使ってみよう！

はじめに

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

前回の記事では、パッケージ管理ツール「npm」についてとインストール方法にについてご説明しました。

blog.mimipen.net

今回の記事では、npmを使ってパッケージをインストールし、コードの中で使ってみようと思います。

この記事を読むと、コマンドを使用したパッケージのインストール方法とその使い方がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・パッケージを使ってみたい方

はじめに
パッケージインストールの準備
パッケージを実際に使ってみよう
package.jsonの使い方
まとめ

パッケージインストールの準備

npmをインストールしたら、まずはパッケージをインストールしてみましょう。

まず作業フォルダを作り、ターミナルでその中に移動しましょう。

今回は、フォルダ名をテストとしています。

cd test

移動したら、プロジェクトの初期化(package.jsonの作成)を行います、package.jsonについては後ほど説明します。

下記コマンドで、プロジェクトを初期化しましょう。

npm init

コマンドを叩くと以下のことを聞かれるが、全てenterキーでパスできる。

package name: (test) test
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

最後にこのようなことを聞かれたら、「yes」を入力します。

About to write to /Users/.../package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

全て完了すると、package.jsonというファイルが生成されているかと思います。これでパッケージインストールの準備ができました。

パッケージを実際に使ってみよう

では、パッケージをインストールして実際に使用してみましょう。今回インストールするのは、コマンドラインで色をつける「chalk」というパッケージです。 www.npmjs.com 先ほどと同じディレクトリで、以下のコマンドを入力します。

npm install -D chalk

-Dをつけることで、そのフォルダの中でのみインストールさせることができます。-Dの代わりに-gをつけることでパソコン本体にインストールすることもできますが、ごちゃごちゃになる(環境を汚してしまう)ため、-Dをつけてインストールしましょう。

コマンドを入力すると、作業フォルダの中身が以下のようになったかと思います。

test
└node_modules
└package-lock.json
└package.json

node_modulesは、パッケージそのものが入っているフォルダです。この中に入っているパッケージをrequireやimportすることで、コードの中で使うことができます。

テスト用に、test.jsを作成します。

touch text.js

「npmスクリプト」でパッケージを動かせるように、package.jsonに追記します。

{
(省略)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "chalk": "node test.js"
  },
(省略)
}

「npmスクリプト」とは、スクリプトをタスクランナーのように実行できるnpmの機能です。「npm run (好きな名前)」で、複雑なコマンドにも名前をつけて簡単に実行させることができます。

今回は、chalkを試すためのJSファイルを実行するコマンドに、「chalk」という名前をつけています。

次にtest.jsを開いて、以下のように編集します。

const chalk = require('chalk');
console.log(chalk.bgRed('テスト'));

ここで注目してほしいのは、require('(パッケージ名)')でパッケージそのものを呼び出し、変数に代入していることです。

変数に代入することで、パッケージで使えるメソッド(今回だとbgRed)を使えるようになります。

JSファイルを編集したら、早速ターミナルで試してみましょう。以下のコマンドを入力します。

npm run chalk

console.log()内に書いた文字が、赤背景で表示されたら成功です！

package.jsonの使い方

現在のpackage .jsonを開くと以下のようになっているかと思います。インストール時と比べると、追記したscriptsと、新たにdevDependenciesが書き換わっています。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "chalk": "node test.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^3.0.0"
  }
}

先ほどnpm installした時はパッケージ名を指定していましたが、package.jsonがある状態でnpm installすると、package.jsonに記載のあるパッケージをまとめてインストールしてくれます。

Webアプリなどを作ってGitサービスに公開する時、先ほど紹介したnode_modules(パッケージの実態)もリモートにあげてしまうと、容量がとてつもなく大きくなってしまいます。なので通常は、.gitignoreにnode_modulesを記載し、package.jsonをgitにpushします。git cloneした後に、各々にnpm installしてもらうことで、node_modulesフォルダが生成され、それぞれの環境でアプリを動かせるようになります。

まとめ

今回は、パッケージ管理ツールの実際の使い方と、package.jsonの使い方についてご説明しました。

今回の内容でところどこと出てきた内容は、実は結構重い内容だったりします。npmでできることに関してもっと深い内容を、今後の記事でご紹介していければと思います！

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

2019-12-05

コーディング練習(3)特殊文字を使いメニュー表を実装しよう！

未経験でWEB業界かなきち

コーディング練習(3)特殊文字を使いメニュー表を実装しよう！こんにちは、かなきち(@kanakichi0801)です。

前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック！

前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！

0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net

1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net

2. 3カラムの実装と隣接セレクタ(li + li)でコーディングした記事↓
blog.mimipen.net

コーディング練習第三回目！
今まで使ったプロパティを使ってメニュー表をコーディングしてみよう！特殊文字円マークを文字コードを使用して表示させよう

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

完成コード
コーディングルール
デザインデータを元に計画をたてる
メニューエリアの大枠
- メニューエリアの大枠の構造をHTMLで実装
- メニューエリアの大枠にCSSを指定する
メニューをパーツ化しよう
- メニューのHTML
  - 特殊文字や記号がうまく表示されないのはなぜ？
- メニューのCSS
メニュー表を流し込む
隣接セレクタを使いメニュー間に余白を指定する
MENUの完成コード
まとめ
- HTMLをしっかり使ったコード

完成コード

サンプルページ

[html]

  <div class="menu">
    <div class="menu__inner">
      <div class="base__title">
        <h2><div>MENU</div>メニュー</h2>
        <div class="deco"></div>
      </div>
      <div class="menu__cts cf">
        <div class="menu__cts__left">
          <div class="menu__box">
            <h3>DRINK／飲み物</h3>
            <div class="menu__box__item">
              <p class"cf">コーヒー<span class="price">&yen;270</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">アメリカンコーヒー<span class="price">&yen;290</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">エスプレッソ<span class="price">&yen;290</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">カフェラテ<span class="price">&yen;340</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ホットティー<span class="price">&yen;300</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ロイヤルミルクティー<span class="price">&yen;360</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ココア<span class="price">&yen;330</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">オレンジジュース<span class="price">&yen;340</span></p>
            </div>
          </div>
        </div>
        <div class="menu__cts__right">
          <div class="menu__box">
            <h3>FOOD ／ 料理</h3>
            <div class="menu__box__item">
              <p class"cf">マルゲリータ<span class="price">&yen;780</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ビアンケッティ<span class="price">&yen;980</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">カルボナーラ<span class="price">&yen;780</span></p>
            </div>
          </div>
          <div class="menu__box">
            <h3>DESSERT ／ デザート</h3>
            <div class="menu__box__item">
              <p class"cf">ショートケーキ<span class="price">&yen;400</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">パンナコッタ<span class="price">&yen;400</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ティラミス<span class="price">&yen;400</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

[css]

/*--------------------------------------------------------------
   MENU
--------------------------------------------------------------*/
.menu{
  background-color: #e8edf3;
  padding: 100px 0 120px;
}
.menu__inner{
  width: 1040px;
  margin: 0 auto;
}
.menu__cts{
  margin-top: 40px;
}
.menu__cts__left{
  width: 490px;
  float: left;
}
.menu__cts__right{
  width: 490px;
  float: right;
}
.menu__box h3{
  background-color: #74859f;
  padding: 21px 18px;
  font-size: 16px;
  color: #fff;
}
.menu__box__item{
  padding: 18px;
  font-size: 14px;
  border-bottom: solid 1px #74859f;
}
.menu__box__item .price{
  float: right;
}
.menu__cts .menu__box + .menu__box{
  margin-top: 44px;
}

もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！

以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。

コーディングルール

デザインデータを元に計画をたてる

まずは、デザインを確認しましょう！デザインデータはこちらをクリック。

メニューエリアのデザインデータを元に以下のように考える。

かなきちメモ(クラス名や使用するプロパティを考える)
左メニューをmenu__cts__left、右メニューをmenu__cts__rightとし、floatを使って左右に配置しよう。menu__box(タイトルとメニューのセット)を作成し使いまわそう。メニューの料金はpriceとして、floatを使って右寄せにしよう。
などなどを事前に考えます。

メニューエリアの大枠

メニューエリアの大枠の構造をHTMLで実装

[HTML]

<div class="menu">
  <div class="menu__inner">
    <div class="base__title">
      <h2><div>MENU</div>メニュー</h2>
      <div class="deco"></div>
    </div>
    <div class="menu__cts cf">
      <div class="menu__cts__left">
      </div>
      <div class="menu__cts__right">
      </div>
    </div>
  </div>
</div>

クラス名のルール付けとh2(base__title)のパーツ化を以下の記事でしました。 blog.mimipen.net

DRINKは左側、FOOD・DESSERTは右側に配置したいので、それぞれmenu__cts__left、menu__cts__rightとクラス名を指定し、それらを囲うdivタグにmenu__ctsクラスを指定しました。

ここでは、floatプロパティを使用したいので、menu__ctsに以下の記事でパーツ化したcfというクラス名を記述しています。

<div class="menu__cts cf">

blog.mimipen.net

メニューエリアの大枠にCSSを指定する

[CSS]

.menu{
  background-color: #e8edf3;
  padding: 100px 0 120px;
}
.menu__inner{
  width: 1040px;
  margin: 0 auto;
}
.menu__cts{
  margin-top: 40px;
}
.menu__cts__left{
  width: 490px;
  float: left;
}
.menu__cts__right{
  width: 490px;
  float: right;
}

menuに背景色(#e8edf3)を指定しました。

.menu{
  background-color: #e8edf3;
}

menu__cts__left、menu__cts__rightに幅490pxを指定します。menu__cts__leftにfloat: leftで左寄せに、menu__cts__rightにfloat: rightで右寄せにしました。

.menu__cts__left{
  width: 490px;
  float: left;
}
.menu__cts__right{
  width: 490px;
  float: right;
}

floatの使い方については、以下の記事を参考にしてください。 blog.mimipen.net

メニューをパーツ化しよう

メニューのHTML

[HTML]

<div class="menu__box">
  <h3>DRINK／飲み物</h3>
  <div class="menu__box__item">
    <p class"cf">コーヒー<span class="price">&yen;270</span></p>
  </div>
</div>

メニューのカテゴリータイトル(DRINK／飲み物)をh3タグで実装し、メニューと料金をmenu__box__itemというdivタグでひとまとめにしました。

料金の円マーク(特殊文字)に文字コード(¥)を使用しました。

特殊文字や記号がうまく表示されないのはなぜ？

文字には、HTMLで直接記述できない特殊文字や記号があります。うまく読み込めずブラウザごとに表示が変わってしまったり文字化けして見た目が違うものになってしまう場合があります。それを避けるために、特殊文字や記号を表示させたい場合は、それらを文字コードで記述しましょう。

よく使われるHTML特殊文字の文字コード
・半角空白 =  
・< = <
・> = >
・& = &
・© = ©
・¥ = ¥

メニューのCSS

[CSS]

.menu__box h3{
  background-color: #74859f;
  padding: 21px 18px;
  font-size: 16px;
  color: #fff;
}
.menu__box__item{
  padding: 18px;
  font-size: 14px;
  border-bottom: solid 1px #74859f;
}
.menu__box__item .price{
  float: right;
}

メニューのカテゴリータイトル(DRINK／飲み物)に背景色(#74859f)を指定し、余白などを調整しました。

.menu__box h3{
  background-color: #74859f;
  padding: 21px 18px;
  font-size: 16px;
  color: #fff;
}

menu__box__itemの余白を調整し、下にボーダーを指定しました。

.menu__box__item{
  padding: 18px;
  font-size: 14px;
  border-bottom: solid 1px #74859f;
}

料金を右寄せにします。floatを使う場合は親要素にクリアフィックスを指定します。
※今回は事前にクリアフィックスを用意してあるので親要素にcfというクラスを追加します。
[html]

<p class"cf">コーヒー<span class="price">&yen;270</span></p>

[css]

.menu__box__item .price{
  float: right;
}

メニュー表を流し込む

ここまで見た目ができたら、メニューの内容を書き足していきます。

[html]

<div class="menu__cts cf">
  <div class="menu__cts__left">
    <div class="menu__box">
      <h3>DRINK／飲み物</h3>
      <div class="menu__box__item">
        <p class"cf">コーヒー<span class="price">&yen;270</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">アメリカンコーヒー<span class="price">&yen;290</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">エスプレッソ<span class="price">&yen;290</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">カフェラテ<span class="price">&yen;340</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">ホットティー<span class="price">&yen;300</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">ロイヤルミルクティー<span class="price">&yen;360</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">ココア<span class="price">&yen;330</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">オレンジジュース<span class="price">&yen;340</span></p>
      </div>
    </div>
  </div>
  <div class="menu__cts__right">
    <div class="menu__box">
      <h3>FOOD ／ 料理</h3>
      <div class="menu__box__item">
        <p class"cf">マルゲリータ<span class="price">&yen;780</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">ビアンケッティ<span class="price">&yen;980</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">カルボナーラ<span class="price">&yen;780</span></p>
      </div>
    </div>
    <div class="menu__box">
      <h3>DESSERT ／ デザート</h3>
      <div class="menu__box__item">
        <p class"cf">ショートケーキ<span class="price">&yen;400</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">パンナコッタ<span class="price">&yen;400</span></p>
      </div>
      <div class="menu__box__item">
        <p class"cf">ティラミス<span class="price">&yen;400</span></p>
      </div>
    </div>
  </div>
</div>

隣接セレクタを使いメニュー間に余白を指定する

メニューが増えた時も想定し、隣接セレクタを使い上に余白を指定します。 f:id:mimipen:20191205011629j:plain

.menu__cts .menu__box + .menu__box{
  margin-top: 44px;
}

隣接セレクタについては以下の記事で紹介しているのでそちらを参照してください。 blog.mimipen.net

サンプルページ

[html]

  <div class="menu">
    <div class="menu__inner">
      <div class="base__title">
        <h2><div>MENU</div>メニュー</h2>
        <div class="deco"></div>
      </div>
      <div class="menu__cts cf">
        <div class="menu__cts__left">
          <div class="menu__box">
            <h3>DRINK／飲み物</h3>
            <div class="menu__box__item">
              <p class"cf">コーヒー<span class="price">&yen;270</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">アメリカンコーヒー<span class="price">&yen;290</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">エスプレッソ<span class="price">&yen;290</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">カフェラテ<span class="price">&yen;340</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ホットティー<span class="price">&yen;300</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ロイヤルミルクティー<span class="price">&yen;360</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ココア<span class="price">&yen;330</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">オレンジジュース<span class="price">&yen;340</span></p>
            </div>
          </div>
        </div>
        <div class="menu__cts__right">
          <div class="menu__box">
            <h3>FOOD ／ 料理</h3>
            <div class="menu__box__item">
              <p class"cf">マルゲリータ<span class="price">&yen;780</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ビアンケッティ<span class="price">&yen;980</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">カルボナーラ<span class="price">&yen;780</span></p>
            </div>
          </div>
          <div class="menu__box">
            <h3>DESSERT ／ デザート</h3>
            <div class="menu__box__item">
              <p class"cf">ショートケーキ<span class="price">&yen;400</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">パンナコッタ<span class="price">&yen;400</span></p>
            </div>
            <div class="menu__box__item">
              <p class"cf">ティラミス<span class="price">&yen;400</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

[css]

/*--------------------------------------------------------------
   MENU
--------------------------------------------------------------*/
.menu{
  background-color: #e8edf3;
  padding: 100px 0 120px;
}
.menu__inner{
  width: 1040px;
  margin: 0 auto;
}
.menu__cts{
  margin-top: 40px;
}
.menu__cts__left{
  width: 490px;
  float: left;
}
.menu__cts__right{
  width: 490px;
  float: right;
}
.menu__box h3{
  background-color: #74859f;
  padding: 21px 18px;
  font-size: 16px;
  color: #fff;
}
.menu__box__item{
  padding: 18px;
  font-size: 14px;
  border-bottom: solid 1px #74859f;
}
.menu__box__item .price{
  float: right;
}
.menu__cts .menu__box + .menu__box{
  margin-top: 44px;
}

まとめ

今回は、これまで勉強してきたCSSプロパティを使い、メニュー表を実装しました！また、HTMLで特殊文字を文字コードを使用して表示させてみましたがいかがだったでしょうか？

最初はデザインデータを見ても、どんなふうに実装すれば良いかわからないものです。たくさんのデザインを実装していく中で複雑なデザインも実装できるようになっていきますので、焦らず着実にコーディングしていきましょう！

慣れてくれば、以下のように吹き出しやタイトル、ボタンなどもコーディングできるようになります。

f:id:mimipen:20191205012256j:plain — イラスト以外はコーディングで実装しています。

以下にHTMLタグもしっかり使ったコードも載せておくので参考に見てみてください。

HTMLをしっかり使ったコード

[html]

<section class="menu">
  <div class="menu__inner w__base">
    <h2 class="base__title"><span>MENU</span>メニュー</h2>
    <div class="menu__cts cf">
      <div class="menu__cts__left">
        <div class="menu__box">
          <h3>DRINK／飲み物</h3>
          <ul>
            <li>
              <p class"cf">コーヒー<span class="price">&yen;270</span></p>
            </li>
            <li>
              <p class"cf">アメリカンコーヒー<span class="price">&yen;290</span></p>
            </li>
            <li>
              <p class"cf">エスプレッソ<span class="price">&yen;290</span></p>
            </li>
            <li>
              <p class"cf">カフェラテ<span class="price">&yen;340</span></p>
            </li>
            <li>
              <p class"cf">ホットティー<span class="price">&yen;300</span></p>
            </li>
            <li>
              <p class"cf">ロイヤルミルクティー<span class="price">&yen;360</span></p>
            </li>
            <li>
              <p class"cf">ココア<span class="price">&yen;330</span></p>
            </li>
            <li>
              <p class"cf">オレンジジュース<span class="price">&yen;340</span></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="menu__cts__right">
        <div class="menu__box">
          <h3>FOOD ／ 料理</h3>
          <ul>
            <li>
              <p class"cf">マルゲリータ<span class="price">&yen;780</span></p>
            </li>
            <li>
              <p class"cf">ビアンケッティ<span class="price">&yen;980</span></p>
            </li>
            <li>
              <p class"cf">カルボナーラ<span class="price">&yen;780</span></p>
            </li>
          </ul>
        </div>
        <div class="menu__box">
          <h3>DESSERT ／ デザート</h3>
          <ul>
            <li>
              <p class"cf">ショートケーキ<span class="price">&yen;400</span></p>
            </li>
            <li>
              <p class"cf">パンナコッタ<span class="price">&yen;400</span></p>
            </li>
            <li>
              <p class"cf">ティラミス<span class="price">&yen;400</span></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

[css]

/*--------------------------------------------------------------
   MENU
--------------------------------------------------------------*/
.menu{
  background-color: #e8edf3;
  padding: 100px 0 120px;
}
.menu__cts{
  margin-top: 40px;
}
.menu__cts__left{
  width: 490px;
  float: left;
}
.menu__cts__right{
  width: 490px;
  float: right;
}
.menu__box h3{
  background-color: #74859f;
  padding: 21px 18px;
  font-size: 16px;
  color: #fff;
}
.menu__box li{
  padding: 18px;
  font-size: 14px;
  border-bottom: solid 1px #74859f;
}
.menu__box .price{
  float: right;
}
.menu__cts .menu__box + .menu__box{
  margin-top: 44px;
}

今回、初心者用のコードと大きく違う点は特にありませんが、メニュー表なのでリストタグ(li)を積極的に使用しています。

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

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

2019-11-25

便利なパッケージ管理ツール「npm」をインストールしてみよう！

JavaScript かずん

便利なパッケージ管理ツール「npm」をインストールしてみよう！

はじめに

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

今後、何記事かにわたり、パッケージ管理ツール「npm」の使い方を解説していきます。

今回の記事では、パッケージ管理ツールの役割とパッケージ管理ツール「npm」のインストール方法をご紹介します。

「npm」を一通り使えるようになると、Reactを入れてみたりTypeScriptを導入したりなど、モダンなJavaScriptで開発をする準備ができますので是非試してみてください！

この記事を読むと、パッケージ管理ツールの使い方とnpmのインストール方法がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・おすすめのパッケージ管理ツールを知りたい方

・node.js / npmをインストールしていない方

はじめに
「パッケージ」とは
パッケージ管理ツールとは
npmとは
npmのインストール方法
- Windows
  - node.jsをインストールする
  - node.js、npmが使えるかチェックする
- Mac
まとめ

「パッケージ」とは

そもそも「パッケージ」とはなんでしょう。

JavaScriptには、「フレームワーク」とか「ライブラリ」と呼ばれるものがたくさんあります。ここでは、それらをまとめて「パッケージ」と呼んでいます。

Webアプリを作るとき、それらを一つ一つインストールしようとすると、すごい手間がかかってしまいます。

また、「このフレームワークを動かそうとしたら、別のパッケージもインストールしないといけない」ということも起こってしまうかもしれません。

そういった問題を、パッケージ管理ツールで解消することができます！

パッケージ管理ツールとは

パッケージ管理ツールを使うと、コマンドラインからパッケージをインストール / アンインストール/アップグレードできるようになります。インストールできるパッケージは、管理ツールに登録されているものになります。

また、あるパッケージをインストール/アップグレードした時に、他のパッケージをインストール/アップグレードする必要がでてきたら、それを自動で行ってくれます。パッケージとパッケージがどのようにバージョンにあるか、すなわちパッケージの依存関係も管理している、というわけです。

今回の記事で紹介する「npm」はJavaScriptのパッケージ管理ツールですが、管理ツールは他の言語にもあります。JavaScriptには「yarn」、PHPには「composer」、Rubyには「RubyGems」などがあります。

実は、以前TwitterでBotを作った時、「composer」を利用していました。 blog.mimipen.net

npmとは

npm(node package manager)は、node.jsのパッケージを管理するツールです。node.jsって何、と思われた方も多いかもしれませんが、ここでは「JavaScriptのパッケージを管理するツール」くらいの理解で大丈夫です。node.jsに関しては、今後の記事で紹介していこうかと思います。

npmのインストール方法

この章では、Windows/Macでnpmをインストールする方法を紹介していこうかと思います。まずWindowsからの紹介になります。

Windows

node.jsをインストールする

ダウンロード | Node.jsへとアクセスし、「Windows Installer」を選択します。 node.jsのインストールダウンロードしたファイルからインストーラを展開します。インストーラでいくつか質問されますが、すべて「Next」で問題ありません。

質問が終わるとインストールするかを聞かれるので、「Install」をクリックします。

セットアップ完了画面に遷移したら、「finish」をクリックします。

node.js、npmが使えるかチェックする

「コマンドプロンプト」を立ち上げ、まず以下のコマンドを入力します。

node -v

「v11.10.1」からはじまるバージョンが表示されれば、node.jsのインストールはOKです。続いて、以下のコマンドを入力します。

npm -v

「6.12.0」のようなバージョンが表示されれば、npmのインストールもこれで完了です。node.jsのインストールで、npmもついでにインストールできた、ということですね。

Mac

Window版ではインストーラをダウンロードしていましたが、Macではすべてコマンドラインからインストールすることができます。

流れとしては、Homebrew --> Nodebrew --> node.js(+ npm)という順番でインストールします。ちょっと長いですが、一緒に見ていきましょう。

Homebrewをインストール

「Homebrew」とは、macOSのパッケージ管理システムです。まずはこれをインストールして、mac関連のパッケージをインストールできるようにしましょう。

macOS用パッケージマネージャー — Homebrewにアクセスし、「インストール」にあるコマンドをターミナルで実行してみましょう。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールが終わったら、下記のコマンドを実行します。

brew doctor

「Your system is ready to brew.」とでたら、Homebrewのインストールは終了です。

Nodebrewをインストール

「Nodebrew」とは、macOSでnode.js自体のバージョンを管理するツールになります。ちょっとややこしいですが、これをインストールすることで、バージョンを指定してnode.jsをダウンロードできます。環境やプロジェクトに応じてバージョンを変えられる、ということです。

先ほどのターミナルで、以下のコマンドを入力します。

brew install nodebrew

インストールが終わったら、以下のコマンドを入力します。

nodebrew -v

「nodebrew 1.0.1」のようなバージョンが表示されれば、Nodebrewのインストールは完了です。

node.js + npmをインストール

最後にnode.jsとnpmをインストールします。以下のコマンドを順に実行します。

mkdir -p ~/.nodebrew/src
nodebrew install-binary stable

インストールが終了したら、続けて以下のコマンドを入力します。

vi ~/.bash_profile

ターミナルでエディタが開くため、ファイルを以下のように編集し保存します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

保存したらこのコマンドを実行します。

source ~/.bash_profile

ここまでできれば、node.jsとnpmのインストールは終了です。最後に、node.jsとnpmのバージョンを確認してみましょう。

node -v
npm -v

どちらもバージョンが表示されれば、ようやくインストールは終了です。お疲れ様でした！

まとめ

今回は、パッケージ管理ツールについての紹介と、npmのインストール方法についてご説明しました。

次回の記事では、いよいよnpmを使ってみたいと思います。お楽しみに！

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

2019-11-13

コーディング練習(2) 隣接セレクタ(li + li)の使い方

未経験でWEB業界かなきち

f:id:mimipen:20191111211452j:plain こんにちは、かなきち(@kanakichi0801)です。

前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック！
f:id:mimipen:20191111210012j:plain

前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！

0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net

1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net

コーディング練習第二回目！
共通で使えるようにタイトルをパーツ化してみよう！また、よく使う3カラムのレイアウトにも挑戦してみよう！記事の最後には隣接セレクタ(li + li)の解説もあるので、よかったら見てみてね！

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

完成コード
コーディングルール
デザインデータを元に計画をたてる
それぞれのエリアで使えるタグ構造を考えよう
タイトルのパーツ化
固有のスタイル
3カラム作成する
- 3カラムのスタイル
隣接セレクタ (li + li)に挑戦してみよう
ABOUTの完成コード
まとめ
- HTMLをしっかり使ったコード

完成コード

サンプルページ

[html]

<div class="about">
  <div class="about__inner">
    <div class="base__title">
      <h2><div>ABOUT</div>カフェのこだわり</h2>
      <div class="deco"></div>
    </div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="about__3column">
      <div class="about__item">
        <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
        <h3 class="about__item__title">豆からこだわりました</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
        <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
        <h3 class="about__item__title">食後にデザートはいかが？</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
    </div>
  </div>
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/

/*前回の記事で追加した clearfix のパーツが入ります〜*/

/*title*/
.base__title{
  text-align: center;
  color: #74859f;
  font-weight: bold;
}
.base__title h2{
  font-size: 32px;
  font-weight: bold;
}
.base__title h2 div{
  font-size: 16px;
  margin-bottom: 13px;
  letter-spacing: .2rem;
}
.base__title .deco{
  display: block;
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

/*HEADER MVのスタイルが入ります〜*/

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__item{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}
.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}
.about__item + .about__item{
  margin-left: 40px;
}

コーディングルール

デザインデータを元に計画をたてる

まずは、デザインを確認しましょう！デザインデータはこちらをクリック。

デザインデータを元に以下のように考える。
f:id:mimipen:20191111210015j:plain

かなきちメモ
デザイン全体を見た時に、各エリアのコンテンツ幅は同じ。しかし、MENUエリアには背景があるため、背景を指定できるように大枠(クラス名：about、menu、access)を作ります。中のタグには、[エリア名]__innerという形でクラス名をつける。タイトルは各エリアで使いまわせそうなので、パーツ化してみよう。3カラムの部分は inline-block を使って横に並べてみよう...
などなどを事前に考えます。

それぞれのエリアで使えるタグ構造を考えよう

今回は、かなきちメモで紹介したように、大枠には、各エリア名のクラス名を使い、中のタグには、[エリア名]__innerという形でクラス名をつけるルールを作りました。

[ABOUTエリアの場合]

<div class="about">
  <div class="about__inner">

  <!-- 〜ここに中身を記述〜 -->

  </div>
</div>

タイトルのパーツ化

タイトルのHTML構造

どのエリアでも使えるようなクラス名を指定します。今回は、base__titleにしました。

    <div class="base__title">
      <h2><div>ABOUT</div>カフェのこだわり</h2>
      <div class="deco"></div>
    </div>

タイトルのスタイル

base__titleは共通で使用するので、「PARTS」の中に記述します。

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/

/*前回の記事で追加した clearfix のパーツが入ります〜*/

.base__title{
  text-align: center;
  color: #74859f;
  font-weight: bold;
}
.base__title h2{
  font-size: 32px;
  font-weight: bold;
}
.base__title h2 div{
  font-size: 16px;
  margin-bottom: 13px;
  letter-spacing: .2rem;
}

h2を含むタグ(base__title)に共通して適用されるスタイルを記述します。text-align: centerでテキストを中央寄せにし、font-weight: boldで太文字に、colorで文字色を指定しました。

ポイント！
パーツ化するコツは、パーツ自体に他の要素との余白は書かないことです。パーツ単体のスタイルを記述し、どこでも流用ができるようにします。

タイトルの下のライン装飾

最初は装飾に画像を使おうか考えるかもしれませんが、CSSで実装可能な部分はできるだけCSSで実装しましょう。どれが実装可能かわからない時は「CSS 装飾」で検索すればたくさんのサンプルコードが出てきますので練習で実装するのもおすすめです。

[ライン装飾のスタイル]

.base__title .deco{
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

幅20px高さ3pxの長方形を作成し、背景色(background-color: #ccc)を追加します。

ポイント！
長方形はdivを使って作成しています。divは、ブロック要素(display: block)なので、base__titleに使用したtext-align: centerでセンター寄せできません。その為、marginの左右にautoを指定して中央寄せにしています。

個人的に、この書き方(divを使った)は、あまり好きではないのでブログの下部では擬似要素を使った書き方を紹介しています。

固有のスタイル

ABOUTは、前回追加した「MV」の次に記述して行きます。ここは難しくないのでコードだけ載せておきますね。 f:id:mimipen:20191111210018j:plain

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

3カラム作成する

今回のポイントがここです！HTMLを書く時に同じスタイルが適用される部分を全部書いてからスタイルを修正していませんか？
[NG例]

<div class="about__3column">
  <div class="about__item">
    <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
    <h3 class="about__item__title">豆からこだわりました</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
    <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
    <h3 class="about__item__title">食後にデザートはいかが？</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
</div>

これだとabout__item中にタグを追加したいときに、全てのコードへの書き直しが発生してしまいます。手間を減らす為にパーツは１つだけ書き、スタイルが確定してからHTMLで要素を増やすようにしましょう。

[最低限のパーツだけ記述する]

<div class="about__3column">
  <div class="about__item">
    <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
    <h3 class="about__item__title">豆からこだわりました</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
</div>

3カラムのスタイル

about__itemの幅は320pxで指定します。about__itemの下部にボーダー(border-bottom)をつけるので、要素の高さを337pxで固定しました。

.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__item{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}

3カラムは、inline-blockを使用して実装して行きます。inline-blockの使い方は、以下の記事で使い方は説明しているので飛ばしますね。 blog.mimipen.net

以下のように、about__itemのタイトルとテキストのスタイルを指定します。

.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}

f:id:mimipen:20191111210024j:plain

about__itemのスタイルを指定し終わったら、HTMLを複製しましょう。

<div class="about__3column">
  <div class="about__item">
    <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
    <h3 class="about__item__title">豆からこだわりました</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
    <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
    <h3 class="about__item__title">食後にデザートはいかが？</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
</div>

f:id:mimipen:20191111210027j:plain

隣接セレクタ (li + li)に挑戦してみよう

最後に、絶品ピザとケーキ、それぞれの左側に余白を追加します。それぞれ固有のクラス名を追加するのもいいですがスマートに書きたいので、以下のセレクタを使用します。

.about__item + .about__item{
  margin-left: 40px;
}

隣接した要素に適用する、隣接セレクタです。よくリスト(li + li)で使われます。

同階層で隣接している次の要素に対してスタイルを適用することができます。

ここでは、about__item の次のabout__itemにスタイルを指定できます。これは同じ条件を持つ要素全てに適用されます。絶品ピザとケーキの要素、それぞれ左側に余白を指定しました。 f:id:mimipen:20191111210809j:plain

こちらで以上になります。以下に完成コードを載せておきますね！

ABOUTの完成コード

サンプルページ

[html]

<div class="about">
  <div class="about__inner">
    <div class="base__title">
      <h2><div>ABOUT</div>カフェのこだわり</h2>
      <div class="deco"></div>
    </div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="about__3column">
      <div class="about__item">
        <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
        <h3 class="about__item__title">豆からこだわりました</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
        <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
        <h3 class="about__item__title">食後にデザートはいかが？</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
    </div>
  </div>
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/

/*前回の記事で追加した clearfix のパーツが入ります〜*/

/*title*/
.base__title{
  text-align: center;
  color: #74859f;
  font-weight: bold;
}
.base__title h2{
  font-size: 32px;
  font-weight: bold;
}
.base__title h2 div{
  font-size: 16px;
  margin-bottom: 13px;
  letter-spacing: .2rem;
}
.base__title .deco{
  display: block;
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

/*HEADER MVのスタイルが入ります〜*/

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__item{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}
.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}
.about__item + .about__item{
  margin-left: 40px;
}

まとめ

お疲れ様です！よく使えそうなタイトルと3カラムを実装してみましたがいかがだったでしょうか？最後にHTMLタグをしっかり使ったコードも載せておくのでよかったら見比べてみましょう！

HTMLをしっかり使ったコード

[html]

<section class="about">
  <div class="about__inner w__base">
    <h2 class="base__title"><span>ABOUT</span>カフェのこだわり</h2>
    <p class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと<br>
    だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
    <ul class="about__3column">
      <li>
        <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
        <h3 class="about__item__title">豆からこだわりました</h3>
        <p class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
      </li>
      <li>
        <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
        <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
        <p class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
      </li>
      <li>
        <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
        <h3 class="about__item__title">食後にデザートはいかが？</h3>
        <p class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
      </li>
    </ul>
  </div>
</section>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/
/*前回の記事で追加した clearfix と w__base のパーツが入ります〜*/

/*title*/
.base__title{
  text-align: center;
  font-size: 32px;
  color: #74859f;
  font-weight: bold;
}
.base__title span{
  display: block;
  margin-bottom: 13px;
  font-size: 16px;
  letter-spacing: .2rem;
}
.base__title::after{
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

/*HEADER MVのスタイルが入ります〜*/

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__3column li{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}
.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}
.about__3column li + li{
  margin-left: 40px;
}

使ってるタグの意味
・section：一つのセクションであることを示す
・p：段落であることを示す※一塊の文章であるという意味
・ul：順序のないリストを表示する
・li：リストの項目を記述

今回、初心者用のコードと大きく違う点は、タイトルの下にあるライン装飾を::afterを使ってCSSで擬似的に要素を作り出したことでしょうか。これを擬似要素と言います。

ブログで紹介するのは、まだ先になりそうなので、気になった方は調べてみてくださいね!

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

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

2019-11-05

「ターミナルでGitを使うと幸せになれる」3つの理由

ボクが思う「ターミナルでGitを使うと幸せになれる」3つの理由

はじめに

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

今回の記事では、バージョン管理ツール「Git」をターミナル(コマンドラインツール)で利用するメリットを紹介していきます！

Gitのことはなんとなく分かっているけど、ツールの使い方を覚えるのに苦労したことはありませんか？今回の記事はそんな人に特に読んでほしい内容となっております！

なお、そもそもGitって何という方は、下のリンクをご覧ください。 backlog.com

この記事を読むと、ボクが考えるターミナル(コマンドラインツール)でGitを使うべき理由がわかるよ！使うか使わないかは自由なのでよかったら見てみてね！

こんな人に読んで欲しい

・Gitを使いたいと考えている方

・Gitを使いたての方

・Gitをグラフィカルツール(GUI)から使っている方

・ターミナル(コマンドラインツール)に苦手意識を持つ方

はじめに
メリット①「コマンドを直接入力できる」
メリット②「余計なツールをインストールする必要がない」
メリット③「どこでもコマンドは同じだから、人に説明するのも簡単」
まとめ

メリット①「コマンドを直接入力できる」

Gitを使う時に、一緒にSourceTreeやTortoiseGitなどをダウンロードしたことはありませんか？

視覚的には分かりやすいかもしれないですが、ツールごとに使い方を覚える必要があります。また、自分が今どういった作業をしているのか、次に何をしなければいけないかがわかりにくいです。

Gitもツールの使い方も両方覚えなくてはいけなく、ボクも最初はgitはなんかめんどくさいなという印象をもちました。

そこでターミナルです！

GUIを使うと、作業がGitそのものではなく、ツール依存になってしまいます、一方コマンドを覚えることで、操作の名前(プル、コミット)と操作内容を紐付けやすくなり、今している操作内容や次にすべきことがわかりやすくなります。

また、コマンドを実際に覚え、使うことで、どのような環境でも使いまわすことができます。

コマンドを意識して使うことで、「このコマンドではこういう操作をしているのか」ということを知るきっかけも作ることができます。

Gitを使っているときにトラブルがあったときも、コマンドでできる処理を知っておくことで、何が問題かを洗い出しやすくなります。コマンド入力もスムーズに、問題解決もサクサクできれば、作業効率をグッとあげることができますね！

話は変わりますが、「コマンドラインツールの画面ってなんか怖い」って方、いませんか？

例えば、「何か間違えて入力してしまったらどうしよう」とか、「触ったらPCが壊れちゃうんじゃないか、変な設定にならないか」とか。

Gitコマンドは単純でわかりやすいものが多いです。Gitの仕組みがなんとなく分かっていれば、そのまま使えてしまえるものばかりです。苦手意識がある方でも、覚えることが少なくGitを使えます

また、コマンドラインは、様々なプログラミング言語で利用できるのもいいですよね。

メリット②「余計なツールをインストールする必要がない」

当たり前ですが、GUIをインストールすることなくGitを利用できるようになります。

使うツールを増やせば増やすほど覚える必要が増えます。

一方、Gitはコマンドを知っていれば、Win標準のコマンドプロンプト/PowerShell、MacOS標準のターミナルから操作できるようになります。

コマンドラインツールにも様々ありますが、総じて言えるのは「Git以外にも使える」ということです。様々なことに使えるツールを覚えた方がお得感がありますよね。

メリット③「どこでもコマンドは同じだから、人に説明するのも簡単」

GUIを使うと、当然GUIによって使い方は異なります。

UIがよくないGUIだと、初期準備の段階でコマンドよりも使いづらいことも...(公開鍵の登録方法がわからない、そもそもGUIサービスにログインしないといけない、など)。

Gitのインストール手順などで少し異なる箇所もありますが、Gitのコマンドラインでの使い方はどのOSでもほぼ共通です。

ボクは前の会社でWindowsを利用していましたが、MacユーザーにGitコマンドの使い方を説明することもありました。GUIを使うよりも、スムーズに説明でき、Gitそのものの仕組みもなんとなく分かってもらえました。

まとめ

Gitをコマンドラインで使うメリットをざっと書いてみましたが、いかがだったでしょうか。

ボクはGitをターミナルではなくVisual Studio Codeで利用しています。VSCodeの中でターミナル画面を開けるので、少ない操作で使用できます。

エディタとターミナルが同じ画面だと操作もスムーズで、今の所はこれがベストかなと思っています。

この記事を読んでいる方で、「もっといい利用方法がある」という方は、ぜひコメントを残していっていただけると嬉しいです。

最後までお読みいただきありがとうございます！

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

2019-10-21

コーディング練習(1) ヘッダーとメインビジュアルを作ろう！

未経験でWEB業界かなきち

コーディング練習(1) ヘッダーとメインビジュアルを作ろう！こんにちは、かなきち(@kanakichi0801)です

今回から、ホームページの作成に入っていきます！しかし、これが必ずしも100%正解ではありません。コーディングにはいろんな組み方がありますのであくまで参考としてお読みください。

また、初心者向けということで以下の記事で紹介した4つHTMLのタグしか基本的に使いません。 blog.mimipen.net
ただ、最下部にHTMLをしっかり使ったコードも載せてるので、もう少しレベルを上げたい方はそちらを見てみてください。

以下の記事の続きです。先にコーディング準備は済ませておいてね！ blog.mimipen.net
準備完了という方は以下のリンクより素材をダウンロードしてください！
＞ダウンロードリンク

※LOGOデータを入れ忘れておりました。2019.10.21より前ダウンロードされた方は、お手数ですが再ダウンロードをお願いいたします。

コーディング練習第一回目！ヘッダーとメインビジュアルを作るよ！

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

完成コード
コーディング計画
- コーディング手順
- デザインデータを元にコーディングの流れを計画する
ヘッダーを作る
メインビジュアルを作成
まとめ
- HTMLをしっかり使ったコード

完成コード

サンプルページ

[html]

<div class="header cf">
  <h1 class="logo"><a href="./" target="_blank"><img src="./img/logo.png" alt="MiMiPEN みみぺんカフェ"></a></h1>
  <div class="gnav">
    <div class="gnav__link"><a href="#about">ABOUT</a></div>
    <div class="gnav__link"><a href="#menu">MENU</a></div>
    <div class="gnav__link"><a href="#access">ACCESS</a></div>
    <div class="gnav__link"><a href="#contact">CONTACT</a></div>
  </div>
</div>
<div class="mv">
  <img src="./img/mv.jpg" alt="みみぺんカフェのイメージ">
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/
/*clearfix*/
.cf{
  display: block;
}
.cf:after{
  content: "";
  display: block;
  clear: both;
}
.cf:before{
  content: "";
  display: block;
  clear: both;
}

/*--------------------------------------------------------------
   HEADER
--------------------------------------------------------------*/
.header{
  width: 1040px;
  margin: 0 auto;
  padding: 26px 0 24px;
}
.logo{
  float: left;
}
.gnav{
  float: right;
  font-size: 0;
}
.gnav__link{
  display: inline-block;
  margin-left: 40px;
}
.gnav__link a{
  display: block;
  padding: 17px 0;
  font-size: 14px;
  color: #74859f;
  letter-spacing: 0.2rem;
}

/*--------------------------------------------------------------
   MV
--------------------------------------------------------------*/
.mv{
  width: 1040px;
  margin: 0 auto;
}

もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてくださいね！

以下よりコードの説明をしていきます。

コーディング計画

コーディング手順

基本的な手順としては、以下の1 〜 3の順です。

1. ページ全体で使うスタイル(CSS)を記述
[例]

body{
  background: #fff;
  font-size: 1.4rem;
  color: #333;
}
a{
  color: #333;
  text-decoration: none;
}

2. 各セクションを上から順にコーディング(HTML&CSS)

3. 使いまわせるパーツを作成(HTML&CSS)( 2とほぼ同時で進めていく )

このやり方は初心者向けではありません。なぜなら[1]のページ全体で使うスタイルと言われても、何が共通で使えるか分からないからです。その為、このブログでは、[2]→[3]→[1]の順でコーディングしていきます。慣れてきたら[1]→[2]→[3]の順でコーディングしてみましょう。

デザインデータを元にコーディングの流れを計画する

デザインデータはこちらを見てね！

デザインデータを元に以下のように考える。 f:id:mimipen:20191021001816j:plain

かなきちメモ
全体をheaderで囲って、ロゴにはh1タグを使おう。ナビゲーションは gnavというclass名にして、ナビゲーションの各リンクはgnav__linkという名前にしよう。左右にそれぞれロゴとナビゲーションがあるのでFloatを使ってみよう。ナビゲーションは横に並んでるからdisplay: inline-blockを使おう…などなど。
コーディングに入る前に、計画を立てます。

ヘッダーを作る

ヘッダーHTMLコード

以下のコードをbodyタグの中に記述します。

<div class="header">
  <h1 class="logo"><a href="./"><img src="./img/logo.png" alt="MiMiPEN みみぺんカフェ"></a></h1>
  <div class="gnav">
    <div class="gnav__link"><a href="#about">ABOUT</a></div>
    <div class="gnav__link"><a href="#menu">MENU</a></div>
    <div class="gnav__link"><a href="#access">ACCESS</a></div>
    <div class="gnav__link"><a href="#contact">CONTACT</a></div>
  </div>
</div>

ポイント！
ロゴにはTOPページへのリンクを記述しよう！また、サイトの大見出しにはh1タグを使おう！今回は大見出しがなかったので LOGOをh1に設定しました。

ヘッダーCSSコード

Floatの下準備

先ほどの「かなきちメモ」で、headerの中身は、左右にそれぞれロゴとナビゲーションがあるのでFloatを使ってみようと書きました。Floatは、clearfixとセットで使うと以下の記事で紹介しました。 blog.mimipen.net

clearfixを使えるようにするため、以下のコードを記述をします。
[css]

.cf{
  display: block;
}
.cf:after{
  content: "";
  display: block;
  clear: both;
}
.cf:before{
  content: "";
  display: block;
  clear: both;
}

Floatを指定する要素の親要素のに cfというclassを追加します。
[html]

<div class="header cf">
  <h1 class="logo"><a href="./"><img src="./img/logo.png" alt=""></a></h1>
  <div class="gnav">
  ...

大きさを指定する
デザインデータを計ってみるとわかりますが、コンテンツ幅は1040pxです。

.header{
  width: 1040px;
}

f:id:mimipen:20191021001228j:plain

中央に配置する
margin: 0 auto;を使い、要素を中央寄席にする。

.header{
  width: 1040px;
  margin: 0 auto;
}

余白を記述する
上の余白は26px、下の余白は24px。ヘッダー自体の高さを100pxにしたいので、paddingを指定します。

上下をそれぞれ指定し、左右は同じ値でいい場合は、padding: [上の値] 0 [下の値]と指定する。今回の場合は、padding: 26px 0 24px。

.header{
  width: 1040px;
  margin: 0 auto;
  padding: 26px 0 24px;
}

marginとpaddingの違いや使いどころが分からない人はこちらの記事をチェック。 blog.mimipen.net

左右に配置したい要素にFloatを指定をする

ロゴを左に配置する。

.logo{
  float: left;
}

ナビゲーションを右に配置する。

.gnav{
  float: right;
}

inline-blockを使って、リンクを横に並べる

先ほどの「かなきちメモ」で、ナビゲーションにはdisplay: inline-blockを使うといいました。さっそく、並べたい要素にdisplay: inline-blockを指定します。
リンクを並べる

.gnav__link{
  display: inline-block;
}

display: inline-blockを指定する要素の親要素にfont-size: 0を追記する

.gnav{
  float: right;
  font-size: 0;
}

リンクの余白や肉付け

リンク同士に余白を持たせるため、marginを使用します。リンク同士の余白が40pxなので以下のように指定します。

.gnav__link{
  display: inline-block;
  margin-left: 40px;
}

margin-rightで指定するとナビゲーションの右側に余計な余白が出てしますので左に余白を持たせました。

ボタンを作る
リンク付きのボタンを作る場合は、aタグに肉付けしよう！

aタグとはユーザーがクリックする部分です。ユーザーがクリックしやすいように文字だけをリンクエリアにするのではなくその周りにもクリック領域を設けてあげましょう。

aタグを使う上での注意点
・aタグには各ブラウザで色がされているため直接指定しないと色が変わらない。
・aタグの初期値は、display: inline。

初期値がdisplay: inlineの要素は、paddingやmarginの指定ができませんので肉付け前に、display: blockを指定しましょう！

aタグに毎回色指定は面倒くさいという方は、以下の記事が良さそうですので参考にしてみてください。
> 参考リンク

上記の注意点を考慮して余白や色などを調整します。

.gnav__link a{
  display: block;
  padding: 17px 0;
  font-size: 14px;
  color: #74859f;
  letter-spacing: 0.2rem; 
}

親要素でfont-size: 0を使っているので、子要素もフォントサイズが０になっているので、フォントサイズを14pxで指定しました。また、文字間をletter-spacing: 0.2remで調整し、色をcolor: #74859fで指定しています

ヘッダー完成コード

[html]

<div class="header">
  <h1 class="logo"><a href="./"><img src="./img/logo.png" alt=""></a></h1>
  <div class="gnav">
    <div class="gnav__link"><a href="#about">ABOUT</a></div>
    <div class="gnav__link"><a href="#menu">MENU</a></div>
    <div class="gnav__link"><a href="#access">ACCESS</a></div>
    <div class="gnav__link"><a href="#contact">CONTACT</a></div>
  </div>
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/
/*clearfix*/
.cf{
  display: block;
}
.cf:after{
  content: "";
  display: block;
  clear: both;
}
.cf:before{
  content: "";
  display: block;
  clear: both;
}

/*--------------------------------------------------------------
   HEADER
--------------------------------------------------------------*/
.header{
  width: 1040px;
  margin: 0 auto;
  padding: 26px 0 24px;
}
.logo{
  float: left;
}
.gnav{
  float: right;
  font-size: 0;
}
.gnav__link{
  display: inline-block;
  margin-left: 40px;
}
.gnav__link a{
  display: block;
  padding: 17px 0;
  font-size: 14px;
  color: #74859f;
  letter-spacing: 0.2rem;
}

メインビジュアルを作成

メインビジュアルは要素の大きさが1040px、そして中央寄せです。.headerの部分と同じ指定を使いましょう！ [html]

  <div class="mv">
    <img src="./img/mv.jpg" alt="みみぺんカフェのイメージ">
  </div>

[css]

.mv{
  width: 1040px;
  margin: 0 auto;
}

以上になります！

まとめ

長めの記事になってしまいましたが、いかがでしたでしょうか。少しでも参考になれば幸いです。

HTMLをしっかり使ったコード

[html]

<header class="w__base cf">
  <h1 class="logo"><a href="./"><img src="./img/logo.png" alt="MiMiPEN みみぺんカフェ"></a></h1>
  <nav>
    <ul class="gnav">
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#menu">MENU</a></li>
      <li><a href="#access">ACCESS</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>
</header>
<div class="mv w__base">
  <img src="./img/mv.jpg" alt="みみぺんカフェのイメージ">
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/
/*clearfix*/
.cf{
  display: block;
}
.cf:after{
  content: "";
  display: block;
  clear: both;
}
.cf:before{
  content: "";
  display: block;
  clear: both;
}

/*width*/
.w__base{
  width: 1040px;
  margin: 0 auto;
}

/*--------------------------------------------------------------
   HEADER
--------------------------------------------------------------*/
header{
  padding: 26px 0 24px;
}
.logo{
  float: left;
}
nav{
  float: right;
}
.gnav{
  font-size: 0;
}
.gnav li{
  display: inline-block;
  margin-left: 40px;
}
.gnav li a{
  display: block;
  padding: 17px 0;
  font-size: 14px;
  color: #74859f;
  letter-spacing: 0.2rem;
}

使ってるタグの意味
・header：ヘッダーであることを示す
・nav：ナビゲーションであることを示す
・ul：順序のないリストを表示する
・li：リストの項目を記述

先ほどheaderと同じで幅を指定して中央寄せといいました。同じ指定の場合は使いまわせるようにしておきましょう！これをパーツ化すると言います。

.w__base{
  width: 1040px;
  margin: 0 auto;
}

次の記事がこちら↓ blog.mimipen.net

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

2019-10-06

CSSで横並びにする方法〜初心者はどれを選択すればいい？〜 Inline-block・Float・Flexbox〜【CSS初心者入門】

CSS初心者入門かなきち

CSSで横並びにする方法〜 Inline-block・Float・Flexbox〜どれを選択すればいい？こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第五回】ということで、CSSで横並びにする方法を紹介していくよ！

横並びにする方法は数あれど、初心者が選択すべき方法はどれなのか？迷うところですよね。

この記事では、Inline-block・Float・Flexbox それぞれの基本的な使い方と注意点をきちんと伝えていきます。

今回は難易度高めです。

いつも通り、CSSの設定方法を序盤に紹介してから本題に入っていくので、すぐに記事を読みたい方はスキップを押してね！

これからの記事を読むと
Float・Inline-block・Flexboxの基本的な使い方と注意点がわかるようになるよ！

こんな人に読んで欲しい

・コーディング初心者の方

・CSSで要素を横並びにする方法を知りたい方

・Floatの基本的な使い方を知りたい方

・Inline-blockの基本的な使い方を知りたい方

・Flexboxの基本的な使い方を知りたい方

先ずはCSSの復習
Inline-blockの基本的な使い方
- Inline-blockを使って要素を横に並べる基本コード
- Inline-blockの注意点
Floatの基本的な使い方
- Floatを使って要素を左右に並べ、clearfixで親要素に高さをつける基本コード
- Floatの注意点
Flexboxの基本的な使い方
- Flexboxで横に並べる
  - Flexアイテムの幅を指定して横に並べる
  - 画面幅に応じて横に均等に全てを配置する
- Flexアイテムの高さを揃えて並べる
まとめ
- Autoprefixer CSS onlineの使い方

先ずは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

Inline-blockの基本的な使い方

See the Pen oNvrOXQ by かなきち (@kanakichi) on CodePen.

使い方は簡単！横に並べたい要素にdisplay: inline-blockを指定します

特徴としては、要素が左から順に並び、要素が親要素の幅を越えると改行されます。しかし、指定するだけだと隣り合う要素の間に余白が入ります。※余白を取り除く方法は以下で解説しています。

昔からあるプロパティなので、ブラウザ対応は基本的に考えなくていいと言えます。安心して使えるので初心者にはおすすめですね！

Inline-blockを使って要素を横に並べる基本コード

/*親要素に font-size: 0 をして余白を消します*/
ul.ib{
  font-size: 0; 
}
/*子要素に display: inline-block と子要素が文字の場合は子要素の文字を指定してあげる*/
ul li{
  display: inline-block;
  font-size: 12px;
}

Inline-blockの注意点

先ほどもお伝えしたように、簡単に横並べができる Inline-block ですが、指定するだけだと要素同士に余白が入ってしまうんです。

それを回避するには、親要素にfont-size: 0または、letter-spacingを使う方法があります。余白と一言で言っても、ブラウザごとに余白の大きさが違います。そのため、各ブラウザの対応を考えると私はfont-size: 0をよく使用します。

ブラウザごとに余白の大きさが違うとは？
クロームで余白分を考慮して、width(幅)を指定しても他のブラウザ(サファリ)で崩れてしまうことがありました。親要素に font-size: 0 を指定すれば、余白分を考えて大きさの指定をしたり、実機チェック時に崩れる心配がないので、めんどくさくても指定するようにしましょう！

Floatの基本的な使い方

See the Pen xxKoNjw by かなきち (@kanakichi) on CodePen.

要素を左に詰めたい場合は、float: left。右に詰めたい場合は、float: rightを使用します

Floatは、Floatを使用すると親要素の高さが出ません。※親要素の高さの出し方は以下で解説しています。

また、要素の高さが変わる場合、このプロパティはおすすめしません。以下のように回り込んでしまいます。

では、どう言った場合にFloatを使うのでしょう。私がよく使うレイアウトは以下のような場合です。

Floatを使って要素を左右に並べ、clearfixで親要素に高さをつける基本コード

ul li.left{
  float: left;
  background-color: pink;
}
ul li.right{
  float: right;
  background-color: yellow;
}
.cf {
  display: block;
}
.cf:after {
  content: "";
  display: block;
  clear: both;
}
.cf:before {
  content: "";
  display: block;
  clear: both;
}

Floatの注意点

Floatは崩れやすいプロパティとも言われており、ただ横に要素を並べる場合は使用をおすすめしません。ただ、先ほどのように２つの要素を両サイドに並べるレイアウトの場合はこのプロパティを使うと良いでしょう。

また、Floatの特徴として親要素の高さが出ないという特徴があります。この場合ば以下のコードを親要素に指定します。
※cfというclass名にclearfixと呼ばれる指定をしています。

Floatの解除(clearfix)

.cf {
  display: block;
}
.cf:after {
  content: "";
  display: block;
  clear: both;
}
.cf:before {
  content: "";
  display: block;
  clear: both;
}

clear: bothのみで、Float解除する方法もありますが、メンテナンスしづらいのでclear: bothのみでの指定はおすすめしません。当ブログでは非推奨なので紹介することはないと思います。

Flexboxの基本的な使い方

Flexboxは、CSSプロパティの指定方法が根本的に違います。これまでは、変化を加えたい要素にプロパティを指定してきましたが、親要素にプロパティを指定します。

上級者向けのプロパティで、覚えることが多いのですが、その分できることもたくさんあります。この記事では全て紹介できないので使いやすそうなものだけ紹介します。

Flexを設定した親要素が「Flexコンテナ」と言われるものに性質を変え、その子要素は自動的に「Flexアイテム」と呼ばれるものに変わり、親要素に対するFlexプロパティの設定によって、要素の配置、順番を柔軟に変更できるようになります。

Flexboxで横に並べる

See the Pen yLLBVzq by かなきち (@kanakichi) on CodePen.

Flexアイテムの幅を指定して横に並べる

.flex01{
  display: flex;
  flex-wrap: wrap;
}
.flex01 li{
  width: 25%;
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex01{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.flex01 li{
  width: 25%;
}

画面幅に応じて横に均等に全てを配置する

.flex02{
  display: flex;
  justify-content: space-between;
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex02{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

Flexアイテムの高さを揃えて並べる

See the Pen eYYOgOw by かなきち (@kanakichi) on CodePen.

高さを揃えて並べる

.flex03{
  display: flex;
  align-items: stretch;
}
.flex03 li{
  width: 25%;
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex03{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.flex03 li{
  width: 25%;
}

上記の記述で高さは揃いますが注意点もあります。

例えばリンク付きのボタンを横に並べる場合、flexアイテム子要素のaタグの高さが出ません。

基本的にaタグに display: block を指定すると親要素の高さになります。しかし、aタグがflexアイテムの子要素の場合は指定しても反映されません。

Flexアイテムの子要素に高さを出す

See the Pen oNNvBgz by かなきち (@kanakichi) on CodePen.

flexアイテムにも同じように display: flex を指定することでaタグにも高さが出るようになりました。 ※わかりやすいように、aタグに薄い白色を指定しています。

.flex04{
  display: flex;
  align-items: stretch;
}
.flex04 li{
  width: 25%;
  display: flex; /*子要素にも指定*/
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex04{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.flex04 li{
  width: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /*子要素にも指定*/
}

Flexboxの注意点

便利なプロパティなのですが、仕事として使うのには致命的な注意点があります。それは ブラウザ対応です。以下のサイトで問題ないとの表示にはなってますが、ブラウザでのバグがまだあるなという印象です。
対応状況
https://caniuse.com/#feat=flexbox

便利で私自身使いたいのですが、自信を持って使おうと言えないのが歯がゆいところです。

当たり前ですが、このプロパティを使う場合は各ブラウザできちんと実機チェックをすることをおすすめします。また、ベンダプレフィックス表記が必要かも、きちんと確認しましょう！

まとめ

今回は、Inline-block・Float・Flexbox それぞれの基本的な使い方と注意点解説させていただきました。どれを使えばいいか、意見が分かれるところです。

私の場合は、基本的には Inline-block、Float を使い、工数に余裕がある案件でFlexboxを使用していますかね。

Autoprefixer CSS onlineの使い方

最後まで読んでいただいた方に便利なサイトを紹介します。 autoprefixer.github.io

使い方はいたって簡単です。リンクにアクセスし、左入力エリア(スマホは上)にソースコードを貼り付けます。自動でベンダプレフィックスの記述付きのコードを右に生成されます。

入力エリア下部にあるFilterに「last 2 versions」と書くと最新ブラウザから2バージョン前のブラウザまで対応させるためのベンダプレフィックスコードを生成してくれます。よかったら使ってみてください。

次回からは以下の記事で紹介したデザインを元に簡単なサイト制作に入っていくよ！ blog.mimipen.net

↓痒いところに手がとどく記事を日々更新中！ blog.mimipen.net blog.mimipen.net

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

2019-09-27

SVGでアニメーションを実装してみよう！可愛いサンプルもあるよ！

SVG かずん

SVG/CSSでアニメーションを実装してみよう！こいつ・・・動くぞ！

はじめに

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

前回の記事では、SVGに関する基礎的な知識、およびブラウザへの表示方法をざっとご紹介しました。 blog.mimipen.net 今回は、CSS/JSを使って、ブラウザでSVGにアニメーションをつけていこうと思います。

この記事を読むと、CSS/JSを使って、SVGのアニメーションを実装する方法がわかるよ！

こんな人に読んで欲しい

・Webコーダーの方

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

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

はじめに
よく使うSVGの属性
- rect
- circle
- path
よく使うSVGのプロパティ
いざアニメーション
まとめ

よく使うSVGの属性

PNGやJPEGと異なり、SVGはコードで図形を表現することができます。コードの中には、SVGの形を指定するものがあります。それぞれ見ていきましょう。

rect

See the Pen rect sample by kazoonLab (@kazoonLab) on CodePen.

rect属性を使うと長方形を描くことができます。上のコードでは、x, yで始点を、widthとheightで縦・横の大きさを指定しています。言い換えれば、この図形は「座標(0, 0)から縦・横それぞれ100の正方形」と言えます。

上のソースコードで、viewBoxという記述があるかと思います。viewBoxとは、SVGの表示領域を示すようなもの、と覚えてください。
上のソースコードでは、「座標(0, 0)から縦・横それぞれ800の領域」を指定しています。800×800の領域の中に100×100の正方形があるイメージですね。

viewBoxが小さくなる、すなわち表示領域が小さくなると、中の図形の大きさは相対的に大きくなります。下のソースコードを見てください。

See the Pen small viewBox by kazoonLab (@kazoonLab) on CodePen.

SVGのwidth, height値は同じですが、viewBoxの値が小さくなっているかと思います。このソースだと、viewBoxは「座標(0, 0)から縦・横それぞれ400の領域」となります。400×400の領域の中に100×100の正方形があるイメージのため、先ほどより大きく表示されるということです。

circle

See the Pen circle sample by kazoonLab (@kazoonLab) on CodePen.

circle属性で円をかくことができます。cxとcyで中心の座標を、rで円の半径を指定できます。この場合は「座標(100, 100)を中心に持ち、半径100の円」となります。

path

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

path属性では複雑な図形を表現することができます。<path>の中のd属性で、どのように線を描くかを指定しています。

前の記事でも登場した上のソースコードでは、鳥のアイコンを表現するためにpathを用いています。この記事では詳しくは触れませんが、d属性の中のアルファベット(Mとかcとか)は、線の描き方を命令するプロパティです。

ここまで、SVGの形を作る「属性」について見てきました。次のセクションでは、SVGの色・線などを調整する「プロパティ」について、代表的なものを見ていきましょう。

よく使うSVGのプロパティ

fill

See the Pen fill sample by kazoonLab (@kazoonLab) on CodePen.

[css]

rect {
  fill: #fda085;
}

fillプロパティで、SVGの背景色を指定できます。一般的なCSSだとbackground-colorですが、SVGでは異なることに注意してください。

fill-opacity

See the Pen fill-opacity sample by kazoonLab (@kazoonLab) on CodePen.

[css]

rect {
  fill: #fda085;
  fill-opacity: 0.2;
}

fill-opacityプロパティで、SVGの透過度を指定できます。opacityと同様、0から1の値で指定し、0に近づくにつれて透明になっていきます。

stroke

See the Pen stroke sample by kazoonLab (@kazoonLab) on CodePen.

[css]

rect {
  fill: #fda085;
  stroke: #000;
}

strokeプロパティで図形の外側に表示される色、すなわち枠線の色を指定できます。CSSでいうborder-colorですね。

また、pathにプロパティを指定することで、線を描くことができます。

See the Pen 例1: stroke を使用した直線 by kazoonLab (@kazoonLab) on CodePen.

stroke-width, stroke-opacity

See the Pen stroke-width, stroke-opacity sample by kazoonLab (@kazoonLab) on CodePen.

[css]

path {
  stroke: #fda085;
  stroke-width: 10px;
  stroke-opacity: .2;
}

stroke-widthプロパティで枠線の太さを、stroke-opacityで枠線の透過度を指定できます。

stroke-linecap, stroke-dasharray

See the Pen stroke-linecap, dasharray sample by kazoonLab (@kazoonLab) on CodePen.

stroke-linecapプロパティで線端の形を、stroke-dasharrayで点線のパターンを指定できます。

線端の形には他にも、butt(線の長さと等しく平らに)やsquare(四角く伸ばす)があります。

点線のパターンは、「3, 1.5」のようにコンマ区切りで指定することで、長さの異なる点を自由に組み合わせることができます。

いざアニメーション

今回は、「ホバーで色が変わるハートのアイコン」を実装してみます！

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

※スマートフォンで見ている方は、アイコンをタップしてみて下さい。

アイコンをホバーすると、アイコンの枠線が表示されたのち、アイコン自体の色が変化します。

アニメーション自体は、CSSのanimationで実装しています。

アニメーションの前半ではSVGのstroke関連を操作し、後半ではfillを変化させています。

まとめ

今回は、SVGの属性・プロパティを見ていった後、CSSでアニメーションを実装しました。

今回は、CSSでプロパティ値を変化させることで色の変化を実装しました。JavaScriptでpathなどの中身を変化させることで、SVGを変形させることができます。ぷるぷるしてるアイコンなんかは、この方法で実装していることが多いですね。

今後の記事で、これらもご紹介できればと思います。

余談ですが、<svg>をはじめとするタグ・属性・プロパティは、モダンブラウザであれば対応しています。

レガシーブラウザまで対応する場合は、前回の記事の「

はじめに

GASとは？

GASエディタを使ってみよう！

スプレッドシートの値を取得してみよう！

まとめ

完成コード

コーディングルール

デザインデータを元に計画をたてる

フッターのHTML

アンカーリンクの種類一覧

フッターのCSS

フッターの大枠を実装する

まとめ

HTMLタグをしっかり使ったコード

smallタグとは？

はじめに

Todoの完了

まとめ

positionとは

positionの基本的な使い方

z-indexで重ね順を変更する

position応用編コード

縦中央寄せ

縦横中央寄せ

ヘッダー追従

まとめ

はじめに

Todoリストって何？

今後の実装について

作る準備

Todoリストのひな形を作ろう！

Todoを登録しよう！

実際に動かしてみよう

まとめ

完成コード

コーディングルール

デザインデータを元に計画をたてる

アクセスエリアの大枠

アクセスエリアの大枠の構造をHTMLで実装

メニューエリアの大枠にCSSを指定する

Google mapを埋め込もう

Google mapからHTMLコードをコピーする手順

HTMLコードを貼り付ける

不要なHTMLコードを削除する

google mapのスタイルを整える

アクセス情報エリアを作ろう

アクセス情報エリアのHTML構造

アクセス情報エリアのCSS

サイトリンクを設置

サイトリンクのHTML構造

ターゲットブランク(target="_blank")とは？

ターゲットブランク(target="_blank")は、どういう場合に使うの？

メーラーを立ち上げる

サイトリンクのCSS

ACCESSの完成コード

まとめ

HTMLタグをしっかり使ったコード

はじめに

パッケージインストールの準備

パッケージを実際に使ってみよう

package.jsonの使い方

まとめ

完成コード

コーディングルール

デザインデータを元に計画をたてる

メニューエリアの大枠

メニューエリアの大枠の構造をHTMLで実装

メニューエリアの大枠にCSSを指定する

メニューをパーツ化しよう

メニューのHTML

特殊文字や記号がうまく表示されないのはなぜ？

メニューのCSS

メニュー表を流し込む

隣接セレクタを使いメニュー間に余白を指定する

MENUの完成コード

まとめ

HTMLをしっかり使ったコード

はじめに

「パッケージ」とは

パッケージ管理ツールとは