GASを使ってGoogleスプレッドシートのデータを取得してみよう!
はじめに
こんにちは、かずん(@kazoonLab)です。
Googleスプレッドシートを使ったアプリを作るのが比較的簡単だったので、それを題材に記事を書こうと思いました。
使用するのはGAS(Google Apps Script)というスクリプト言語です。
GASを使うことで、GoogleスプレッドシートやGoogleドライブを操作することができます!
グーグルアカウントさえあれば環境構築などが必要ないので、初心者の方にもオススメです!
またコードがJavaScriptによく似ているため、Web系プログラミングの1つとして勉強のテーマにはぴったりかと思います!
今回の記事では、GASの基本的な使い方や、Google スプレッドシートの値を取得したりしてみます!
この記事を読むと、GASの基本的な使い方がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
・Google Apps Script(GAS)をよく知らない方
・プログラミングに興味がある方
GASとは?
GASとは、ドライブやスプレッドシート、フォームなど、Google系サービスをカスタマイズできるスクリプト言語です。
JavaScriptベースで書かれているため、JavaScriptの簡単な知識があればとっつきやすい言語となっています(というか、文法はJavaScriptとほとんど変わりません)。
JavaScriptと同様、インストール作業は不要です。また、ウェブブラウザ上で動作するエディタでコーディング・デバッグができます。
GASエディタを使ってみよう!
GASを書くにあたって、まずエディタを開いてみましょう。
Googleアカウントをお持ちの方はログイン、持っていない方はアカウントを新規作成してください。また、 今回ブラウザはGoogle Chromeを使用します。
お使いのGoogleアカウントのホーム画面で、Google アプリを開き、「ドライブ」をクリックします。
ドライブに移動したら、今回の作業用フォルダを作成しましょう。
フォルダを作成し移動したら、「右クリック」→「その他」→「Google Apps Script」と選択します。
選択すると、空のエディタ画面が開くかと思います。GASは、このエディタでコーディング・デバッグなどを行うことができます。試しに、下の画像のようなサンプルコードを入力してみましょう。
function myFunction() { var data = 'Hello World!'; Logger.log(data); }
Logger.log()関数は、JavaScriptでいうconsole.log()のようなものです。後ほどログを見るために使用しています。
入力したら、「ファイル」->「保存」もしくは「ctrl + s」でプロジェクトを保存します。プロジェクト名は好きな名前を入れてください。
保存したら、コードを実行してみましょう。メニューバーの下に、再生アイコンや虫アイコンが並んでいるかと思います。実行する関数名が正しいことを確認し、再生ボタンをクリックします。
コードを実行すると、実行ダイアログが一瞬表示されます。ダイアログが消えたら、「ctrl + Enter」でログを表示してみましょう。
変数定義した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を触ってみていかがだったでしょうか。
個人的にはExcelをJSで操作する感じがあり、Excelのマクロよりとっつきやすいんじゃないかな、と思います。
引き続きGASの記事を書いていくので、よかったら見ていってくださいね。
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
コーディング練習(5) positionを使用してトップへ戻るボタンを実装しよう
こんにちは、かなきち(@kanakichi0801)です。
この記事で、トップへ戻るボタンをposition
プロパティを使用して実装していきます。
今回コーディングする箇所はフッターです。フッターにはよくコピーライトがあります。コピーライトの記述する際に使用するタグについても最下部でしっかり説明しているので、確実にマスターしたいという方は最下部までご覧ください。
さっそく作成するという方はこちらをクリック!
また、前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう!
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]
<div class="footer"> <div class="totop"><a href="#"><span class="arrow"></span></a></div> <div class="copy">Copyright © 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など、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。
デザインデータを元に計画をたてる
まずは、デザインを確認しましょう!デザインデータはこちらをクリック。
フッターエリアのデザインデータを元に以下のように考える。
かなきちメモ(クラス名や使用するプロパティを考える)
青い帯の部分は、コピーライトの周りに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 © 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
フッターの大枠を実装する
フッターの大枠というのは、青い帯状の部分のことです。
.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%するという意味。
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にそれぞれボーダープロパティを追加します。イメージは以下の通りです。
矢印を作り、transform
プロパティで[-45度]回転させています。軸や大きさの調整は、margin
とbox-sizing
で行いました。また、自由に動かすためposition: absolute
を指定しています。
.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 © 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>
タグはコピーライトに使うと覚えておきましょう。
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
JavaScriptでTodoリスト作成しよう〜Todoを完了させてみよう〜
はじめに
こんにちは、かずん(@kazoonLab)です。
前回の記事では、Todoリスト用のディレクトリを作って、Todoの登録・削除機能を実装しました。
前回の記事をまだ見てない方は、以下のリンクからご覧いただけます!
今回の記事では、Todoが終わったら、完了の目印をつける機能を実装してみたいと思います。
イメージとしては以下の通りです。
Todoが終わったとき削除させてもよいのですが、終わったことをわかりやすくしてみようと思います。
blog.mimipen.net
この記事を読むと、JavaScriptでDOM(html要素)を更新する方法がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
・DOM(html要素)がピンっときていない方
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
は他にも様々な値が適用できます。適用できる値は、以下リンクに詳細があります。
ここまでの実装で、下のような動きが実装できるかと思います。
これで、Todoを完了したときの動きをつけることができました。
まとめ
今回は、タスクの変更・完了機能を実装してみました。いかがだったでしょうか。
次回の記事では、殺風景なTodoリストにスタイルを当ててみたいと思います!お楽しみに!
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
position プロパティまとめ!基本から応用まで徹底解説!(relative・absolute・fixed・static)【CSS初心者入門】
こんにちは、かなきち(@kanakichi0801)です。今回は、CSSプロパティposition
について解説していきます!
要素を自由な位置に配置する方法がこの記事で分かります!
コーディングを始めたばかりの人でも、このプロパティの存在はなんとなくご存知なのではないでしょうか?
「CSS 自由な位置 配置」などで検索していると出てきますよね! でも、試してみると上の方に要素が飛んで行ってしまったり...
そう、position
には、少々癖があります。癖と実務で使える基本的な使い方をこの記事では紹介していきます!
さっそく記事を読みたい方は スキップ を押してね!
これからの記事を読むとposition
の癖と実務で基本的な使い方が分かるよ!
こんな人に読んで欲しい
・コーディングをしていて、要素を自由に配置したいと思った方
・簡単に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(最上部)までの値で指定します。
.下{ position: relative; z-index: 0; } .中{ position: relative; z-index: 250; } .上{ position: relative; z-index: 500; }
「2147483647」まで指定できますが、基本的には指定しないですよね。職場のコーディングルールによって違いがあると思いますが、私の場合は、0〜500の間で10刻みを基本として指定するようにしています。最上部に表示したいものが500で、最下部に表示するのが0です。
position応用編コード
縦中央寄せ
.box__wrap{ position: relative; } .box{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
縦横中央寄せ
.box__wrap{ position: relative; } .box{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
ヘッダー追従
スクロールしても同じ位置に固定して表示させたい場合は、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
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
JavaScriptでTodoリストを作ろう!(1)〜Todoの登録/削除まで〜【JavaScript初心者入門】
はじめに
こんにちは、かずん(@kazoonLab)です。
今回の記事から、JavaScriptを使って「Todoリスト」を作っていきます!
今回は、タスクを追加して削除するまでを作ります!イメージは↓の通りです。
複数回に分けて、少しずつアップデートしていく予定です。
なお、Todoリストって何、と思われた方は、下に概要を載せていますので、そちらをご参照ください。
この記事を読むと、JavaScriptで生成したDOMの表示方法がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
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一つ一つに付属する削除ボタン)が必要です。
上記をまとめると、以下のようなイメージになるかと思います。
イメージが出来たら、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に設定していますが、こうすることでタスク登録後インプットの中身が空になり、再び新しく登録できるようになります。
実際に動かしてみよう
ここまでの実装で、どのような挙動になるのでしょうか。あらためてイメージを見てみましょう。
インプットにタスクを追加すると、入力したタスクがリストに追加されます。タスクにつく削除ボタンを押すと、タスクごと削除されるのが確認できるかと思います。
ここまでできれば、今回の実装はOKです!
まとめ
途中まで実装しましたがいかがだったでしょうか。
機能数は決して多くないけれど、JavaScriptのイベントや要素取得など、ここまででも大切なことがいくつか登場してきました。
今後の記事でも、Todoリストをエンハンスしつつ、JavaScriptの重要事項に触れていけたらと思います。
↓次の記事はこちら!
blog.mimipen.net
↓作りながら楽しく学べる記事を日々更新しています!よかったら読んでみてくださいね!
blog.mimipen.net
blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
コーディング練習(4) Google mapの埋め込み方&拡大方法を解説
こんにちは、かなきち(@kanakichi0801)です。
前回の続きで、今回は以下の部分をコーディングしていきます。さっそく作成するという方はこちらをクリック!
今回はちょっと長めです。めげずに一緒にやりきりましょう!
前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう!
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の使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
- 完成コード
- コーディングルール
- デザインデータを元に計画をたてる
- アクセスエリアの大枠
- Google mapを埋め込もう
- アクセス情報エリアを作ろう
- サイトリンクを設置
- 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>東京都千代田区千代田1−1</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@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タグをしっかり使ったコードも載せてあるので参考してみてね!
以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入ります。
コーディングルール
初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。
1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。
デザインデータを元に計画をたてる
まずは、デザインを確認しましょう!デザインデータはこちらをクリック。
メニューエリアのデザインデータを元に以下のように考える。
かなきちメモ(クラス名や使用するプロパティを考える)
全体を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
になります。
Google mapを埋め込もう
Google mapからHTMLコードをコピーする手順
1.google map にアクセスする。
2.埋め込みたい住所を検索する
3.[共有]をクリックする。
4.地図を埋め込むをクリック
5.HTMLをコピー
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が出てきてしまいます。それも合わせて整えていきましょう。
[CSS]
.access__map iframe{ width: 100%; height: 425px; border: none; }
access__map
に幅を指定していたので、widthは100%とします。frameborderを消し、グレー線が見えてしまっていたのでborder: none;
で線を消しました。
以下のような状態になればOKです!
このままでも良いのですが、これだと近くの駅などの周辺情報がわかりませんね。そんな時は倍率を変えましょう。
先ほどのリンクを見ます。
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の倍率に関しては こちらサイトを参考にしました。
アクセス情報エリアを作ろう
アクセス情報エリアの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>東京都千代田区千代田1−1</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@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@test.com"><img src="./img/icon__mail.png" alt="メーラーが開きます"></a></div>
<a href="mailto:info@test.com">
の部分です。※@
は特殊文字コードで@の意味です。
ボタンを押した時に以下のように、パソコンやスマートフォンに入っているメーラーが立ち上がります。
この動きを実装するには、メールアドレスの先頭に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]の大きさになります。
縦方向の中央寄せは、初心者のうちは少し難しいので今回は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>東京都千代田区千代田1−1</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@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>東京都千代田区千代田1−1</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@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
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
コマンド操作でパッケージ管理ツール「npm」を使ってみよう!
はじめに
こんにちは、かずん(@kazoonLab)です。
前回の記事では、パッケージ管理ツール「npm」についてとインストール方法にについてご説明しました。
blog.mimipen.net
今回の記事では、npmを使ってパッケージをインストールし、コードの中で使ってみようと思います。
この記事を読むと、コマンドを使用したパッケージのインストール方法とその使い方がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
・パッケージを使ってみたい方
パッケージインストールの準備
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でできることに関してもっと深い内容を、今後の記事でご紹介していければと思います!
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
コーディング練習(3)特殊文字を使いメニュー表を実装しよう!
こんにちは、かなきち(@kanakichi0801)です。
前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック!
前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう!
0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net
1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net
2. 3カラムの実装と隣接セレクタ(li + li)でコーディングした記事↓
blog.mimipen.net
コーディング練習 第三回目!
今まで使ったプロパティを使ってメニュー表をコーディングしてみよう!特殊文字円マークを文字コードを使用して表示させよう
こんな人に読んで欲しい
・HTMLとCSSの使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
- 完成コード
- コーディングルール
- デザインデータを元に計画をたてる
- メニューエリアの大枠
- メニューをパーツ化しよう
- メニュー表を流し込む
- 隣接セレクタを使いメニュー間に余白を指定する
- MENUの完成コード
- まとめ
完成コード
サンプルページ
[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">¥270</span></p> </div> <div class="menu__box__item"> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">カフェラテ<span class="price">¥340</span></p> </div> <div class="menu__box__item"> <p class"cf">ホットティー<span class="price">¥300</span></p> </div> <div class="menu__box__item"> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </div> <div class="menu__box__item"> <p class"cf">ココア<span class="price">¥330</span></p> </div> <div class="menu__box__item"> <p class"cf">オレンジジュース<span class="price">¥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">¥780</span></p> </div> <div class="menu__box__item"> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </div> <div class="menu__box__item"> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </div> </div> <div class="menu__box"> <h3>DESSERT / デザート</h3> <div class="menu__box__item"> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">ティラミス<span class="price">¥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タグをしっかり使ったコードも載せてあるので参考してみてね!
以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。
コーディングルール
初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。
1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。
デザインデータを元に計画をたてる
まずは、デザインを確認しましょう!デザインデータはこちらをクリック。
メニューエリアのデザインデータを元に以下のように考える。
かなきちメモ(クラス名や使用するプロパティを考える)
左メニューを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">
メニューエリアの大枠に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">¥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">¥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">¥270</span></p> </div> <div class="menu__box__item"> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">カフェラテ<span class="price">¥340</span></p> </div> <div class="menu__box__item"> <p class"cf">ホットティー<span class="price">¥300</span></p> </div> <div class="menu__box__item"> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </div> <div class="menu__box__item"> <p class"cf">ココア<span class="price">¥330</span></p> </div> <div class="menu__box__item"> <p class"cf">オレンジジュース<span class="price">¥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">¥780</span></p> </div> <div class="menu__box__item"> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </div> <div class="menu__box__item"> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </div> </div> <div class="menu__box"> <h3>DESSERT / デザート</h3> <div class="menu__box__item"> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">ティラミス<span class="price">¥400</span></p> </div> </div> </div> </div>
隣接セレクタを使いメニュー間に余白を指定する
メニューが増えた時も想定し、隣接セレクタを使い上に余白を指定します。
.menu__cts .menu__box + .menu__box{ margin-top: 44px; }
隣接セレクタについては以下の記事で紹介しているのでそちらを参照してください。
blog.mimipen.net
MENUの完成コード
サンプルページ
[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">¥270</span></p> </div> <div class="menu__box__item"> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </div> <div class="menu__box__item"> <p class"cf">カフェラテ<span class="price">¥340</span></p> </div> <div class="menu__box__item"> <p class"cf">ホットティー<span class="price">¥300</span></p> </div> <div class="menu__box__item"> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </div> <div class="menu__box__item"> <p class"cf">ココア<span class="price">¥330</span></p> </div> <div class="menu__box__item"> <p class"cf">オレンジジュース<span class="price">¥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">¥780</span></p> </div> <div class="menu__box__item"> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </div> <div class="menu__box__item"> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </div> </div> <div class="menu__box"> <h3>DESSERT / デザート</h3> <div class="menu__box__item"> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </div> <div class="menu__box__item"> <p class"cf">ティラミス<span class="price">¥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で特殊文字を文字コードを使用して表示させてみましたがいかがだったでしょうか?
最初はデザインデータを見ても、どんなふうに実装すれば良いかわからないものです。たくさんのデザインを実装していく中で複雑なデザインも実装できるようになっていきますので、焦らず着実にコーディングしていきましょう!
慣れてくれば、以下のように吹き出しやタイトル、ボタンなどもコーディングできるようになります。
以下に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">¥270</span></p> </li> <li> <p class"cf">アメリカンコーヒー<span class="price">¥290</span></p> </li> <li> <p class"cf">エスプレッソ<span class="price">¥290</span></p> </li> <li> <p class"cf">カフェラテ<span class="price">¥340</span></p> </li> <li> <p class"cf">ホットティー<span class="price">¥300</span></p> </li> <li> <p class"cf">ロイヤルミルクティー<span class="price">¥360</span></p> </li> <li> <p class"cf">ココア<span class="price">¥330</span></p> </li> <li> <p class"cf">オレンジジュース<span class="price">¥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">¥780</span></p> </li> <li> <p class"cf">ビアンケッティ<span class="price">¥980</span></p> </li> <li> <p class"cf">カルボナーラ<span class="price">¥780</span></p> </li> </ul> </div> <div class="menu__box"> <h3>DESSERT / デザート</h3> <ul> <li> <p class"cf">ショートケーキ<span class="price">¥400</span></p> </li> <li> <p class"cf">パンナコッタ<span class="price">¥400</span></p> </li> <li> <p class"cf">ティラミス<span class="price">¥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
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
便利なパッケージ管理ツール「npm」をインストールしてみよう!
はじめに
こんにちは、かずん(@kazoonLab)です。
今後、何記事かにわたり、パッケージ管理ツール「npm」の使い方を解説していきます。
今回の記事では、パッケージ管理ツールの役割とパッケージ管理ツール「npm」のインストール方法をご紹介します。
「npm」を一通り使えるようになると、Reactを入れてみたりTypeScriptを導入したりなど、モダンなJavaScriptで開発をする準備ができますので是非試してみてください!
この記事を読むと、パッケージ管理ツールの使い方とnpmのインストール方法がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
・おすすめのパッケージ管理ツールを知りたい方
・node.js / npmをインストールしていない方
「パッケージ」とは
そもそも「パッケージ」とはなんでしょう。
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」を選択します。
ダウンロードしたファイルからインストーラを展開します。インストーラでいくつか質問されますが、すべて「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を使ってみたいと思います。お楽しみに!
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
コーディング練習(2) 隣接セレクタ(li + li)の使い方
こんにちは、かなきち(@kanakichi0801)です。
前回の続きで、今回は以下の部分をコーディングして行きます。 さっそく作成するという方はこちらをクリック!
前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう!
0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net
1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net
コーディング練習 第二回目!
共通で使えるようにタイトルをパーツ化してみよう!また、よく使う3カラムのレイアウトにも挑戦してみよう!記事の最後には隣接セレクタ(li + li)の解説もあるので、よかったら見てみてね!
こんな人に読んで欲しい
・HTMLとCSSの使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
- 完成コード
- コーディングルール
- デザインデータを元に計画をたてる
- それぞれのエリアで使えるタグ構造を考えよう
- タイトルのパーツ化
- 固有のスタイル
- 3カラム作成する
- 隣接セレクタ (li + li)に挑戦してみよう
- 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; }
もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね!
以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。
コーディングルール
初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。
1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。
デザインデータを元に計画をたてる
まずは、デザインを確認しましょう!デザインデータはこちらをクリック。
デザインデータを元に以下のように考える。
かなきちメモ
デザイン全体を見た時に、各エリアのコンテンツ幅は同じ。しかし、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」の次に記述して行きます。ここは難しくないのでコードだけ載せておきますね。
/*-------------------------------------------------------------- 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
中にタグを追加したいときに、全てのコードへの書き直しが発生してしまいます。手間を減らす為にパーツは1つだけ書き、スタイルが確定してから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; }
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>
隣接セレクタ (li + li)に挑戦してみよう
最後に、絶品ピザとケーキ、それぞれの左側に余白を追加します。それぞれ固有のクラス名を追加するのもいいですがスマートに書きたいので、以下のセレクタを使用します。
.about__item + .about__item{ margin-left: 40px; }
隣接した要素に適用する、隣接セレクタです。よくリスト(li + li)で使われます。
同階層で隣接している次の要素に対してスタイルを適用することができます。
ここでは、about__item
の次のabout__item
にスタイルを指定できます。これは同じ条件を持つ要素全てに適用されます。絶品ピザとケーキの要素、それぞれ左側に余白を指定しました。
こちらで以上になります。以下に完成コードを載せておきますね!
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
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
「ターミナルで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の中でターミナル画面を開けるので、少ない操作で使用できます。
エディタとターミナルが同じ画面だと操作もスムーズで、今の所はこれがベストかなと思っています。
この記事を読んでいる方で、「もっといい利用方法がある」という方は、ぜひコメントを残していっていただけると嬉しいです。
最後までお読みいただきありがとうございます!
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
コーディング練習(1) ヘッダーとメインビジュアルを作ろう!
こんにちは、かなきち(@kanakichi0801)です
今回から、ホームページの作成に入っていきます! しかし、これが必ずしも100%正解ではありません。コーディングにはいろんな組み方がありますのであくまで参考としてお読みください。
また、初心者向けということで以下の記事で紹介した4つHTMLのタグしか基本的に使いません。
blog.mimipen.net
ただ、最下部にHTMLをしっかり使ったコードも載せてるので、もう少しレベルを上げたい方はそちらを見てみてください。
以下の記事の続きです。先にコーディング準備は済ませておいてね!
blog.mimipen.net
準備完了という方は以下のリンクより素材をダウンロードしてください!
> ダウンロードリンク
※LOGOデータを入れ忘れておりました。2019.10.21より前ダウンロードされた方は、お手数ですが再ダウンロードをお願いいたします。
コーディング練習 第一回目!ヘッダーとメインビジュアルを作るよ!
こんな人に読んで欲しい
・HTMLとCSSの使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
完成コード
サンプルページ
[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]の順でコーディングしてみましょう。
デザインデータを元にコーディングの流れを計画する
デザインデータはこちらを見てね!
デザインデータを元に以下のように考える。
かなきちメモ
全体を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"> ...
大枠(.header)から指定をする
大きさを指定する
デザインデータを計ってみるとわかりますが、コンテンツ幅は1040pxです。
.header{ width: 1040px; }
中央に配置する
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
を使っているので、子要素もフォントサイズが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
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
CSSで横並びにする方法 〜初心者はどれを選択すればいい?〜 Inline-block・Float・Flexbox〜 【CSS初心者入門】
こんにちは、かなきち(@kanakichi0801)です
今回は、CSS初心者入門【第五回】ということで、CSSで横並びにする方法を紹介していくよ!
横並びにする方法は数あれど、初心者が選択すべき方法はどれなのか? 迷うところですよね。
この記事では、Inline-block・Float・Flexbox それぞれの基本的な使い方と注意点をきちんと伝えていきます。
今回は難易度高めです。
いつも通り、CSSの設定方法を序盤に紹介してから本題に入っていくので、すぐに記事を読みたい方は スキップ を押してね!
これからの記事を読むと
Float・Inline-block・Flexboxの基本的な使い方と注意点がわかるようになるよ!
こんな人に読んで欲しい
・コーディング初心者の方
・CSSで要素を横並びにする方法を知りたい方
・Floatの基本的な使い方を知りたい方
・Inline-blockの基本的な使い方を知りたい方
・Flexboxの基本的な使い方を知りたい方
先ずはCSSの復習
以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net
CSSとは?
ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。
CSSの基本構造
h1タグにCSSを使って見た目を指定した場合。
[HTMLの中身]
<h1>たいとる</h1>
[CSSの指定]
h1{ font-size: 32px; }
セレクタ:どこのデザインを変更するか(※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は崩れやすいプロパティとも言われており、ただ横に要素を並べる場合は使用をおすすめしません。ただ、先ほどのように2つの要素を両サイドに並べるレイアウトの場合はこのプロパティを使うと良いでしょう。
また、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
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
SVGでアニメーションを実装してみよう!可愛いサンプルもあるよ!
はじめに
こんにちは、かずん(@kazoonLab)です。
前回の記事では、SVGに関する基礎的な知識、およびブラウザへの表示方法をざっとご紹介しました。
blog.mimipen.net
今回は、CSS/JSを使って、ブラウザでSVGにアニメーションをつけていこうと思います。
この記事を読むと、CSS/JSを使って、SVGのアニメーションを実装する方法がわかるよ!
こんな人に読んで欲しい
・Webコーダーの方
・SVGについて最初から知りたい方
・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>
をはじめとするタグ・属性・プロパティは、モダンブラウザであれば対応しています。
レガシーブラウザまで対応する場合は、前回の記事の「
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)
widthとheightの使い方まとめと注意点について【CSS初心者入門】
こんにちは、かなきち(@kanakichi0801)です
今回は、CSS初心者入門【第四回】ということで、width(幅)とheight(高さ)の使い方と注意点を紹介していくよ!
「width:100%
と指定したら要素がはみ出てしまう。。。なんで?」とこの記事に辿り着いた方、そのもやもや解決できますよ!早速問題を解決したい方はスキップを押してね!
以下の記事を読んでいる前提で話していきます。【まだ読んでいないという方!】【ブロックレベル要素とインライン要素をイマイチわかっていない】という方は先に以下の記事を読んでみてね!
いつも通り、CSSの設定方法を序盤に紹介してから本題に入っていくので、すぐに記事を読みたい方は スキップ を押してね!
これからの記事を読むと
width(幅)とheight(高さ)の基本的な使い方と使う上での注意点が分かるようになるよ
こんな人に読んで欲しい
・CSS初心者の方
・HTML初心者の方
・width(幅)とheight(高さ)の使い方を知りたい方
・width(幅)とheight(高さ)の注意点を先に知っておきたい方
・width:100%と指定して要素がはみ出てしまった方
先ずはCSSの復習
以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net
CSSとは?
ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。
CSSの基本構造
h1タグにCSSを使って見た目を指定した場合。
[HTMLの中身]
<h1>たいとる</h1>
[CSSの指定]
h1{ font-size: 32px; }
セレクタ:どこのデザインを変更するか(※h1タグ)
プロパティ:どの要素に変更を加えるか(※font-size=文字の大きさ)
値:どのように変えるか(※32pxという大きさに変える)
HTMLファイルにCSSファイルを読み込ませる方法
HTMLファイルのhead内に以下を記述します。
<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">
CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。
blog.mimipen.net
width(幅)とheight(高さ)とは?
なんとなく意味を理解している方も多いはず。
widthとは、「要素の横幅」のこと
heightとは、「要素の高さ」のこと
実際にwidthとheightを書いてみよう
width(幅)を100px、height(高さ)を100pxと指定しました。
See the Pen widthとheightの指定の基本 by かなきち (@kanakichi) on CodePen.
widthとheightが指定できない場合がある
width(幅)とheight(高さ)を指定するためには前提条件があります。
ブロックレベル要素とインライン要素の記事で紹介しました。
ブロック要素(display: block;)は、widthとheightの指定が反映されるけどインライン要素(display: inline)は反映されません。
実際のコードを見るのが早いですね。ブロックレベル要素のdivタグ
はwidthとheightの指定が反映されましたが、インライン要素のspanタグ
は指定が反映されません。
See the Pen oNvoBVw by かなきち (@kanakichi) on CodePen.
widthとheightの初期値
width(幅)とheight(高さ)の初期値は auto になります。
基本的には autoとは、親の要素の設定に順ずるといった意味が近いです。
NGな使い方と副作用
width(幅)とheight(高さ)って、使い方が分かりやすいので簡単なプロパティと思われがちですが、実は width(幅)とheight(高さ)はあまり指定はしません。NGな使い方と、なぜ指定を減らすのかを以下で説明していきます。
親要素のwidthとheightを超えて指定してはいけない
原則として、親要素の大きさを超えて指定してはいけません。
副作用
先ほども書きましたが、あまりwidthやheightの指定はしないのが望ましいです。その理由が単純で コードが長くなる ためです。
width: 100%の使いどころ
よく見かける無駄コードが以下になります。
width: 100%;
width: 100%;
とは、親要素の大きさまで幅をいっぱいに広げるという意味です。
ブロックレベル要素(display: block)は、親要素の大きさまで幅いっぱいに広がるのが特徴と以下の記事で説明しました。
blog.mimipen.net
そのため、基本的に ブロックレベル要素にwidth: 100%;
の指定は必要ありません。
width: 100%を指定を減らす理由
もう一つ理由があります。それはpaddingの問題。
width: auto(初期値)
の場合、paddingは幅に含まれますが、width: 100%
をかけた場合はpaddingの分、親要素を超えてはみ出てしまいます。
width: 100%
とコードを増やすと paddingも中に含まれなくなる上にコードの量も増えます。
box-sizing: border-box
です。このプロパティと値により幅の中にpaddingやborderを含めることができます。
heightは基本的に指定しない
ホームページを作成していて、高さが出ないって時(floatやpositionなど)ありますよね。ただ、HTML、CSSはブラウザのバグでない限り嘘はつきません。
必ず高さは出ますし、出ないのには何かしらの理由があります。
そのため、高さが出ないからといって height(高さ) を指定して高さを出すのはNG行為です。
また、このブログでは紹介していませんが、レスポンシブという手法がコーディングでは必須不可欠となってきました。
レスポンシブとは?
ワンソース(同じソースコード)でマルチデバイス(PC、タブレット、スマホ)に対応させることです。
こんなサイト見かけたことありませんか? スマホでホームページを開いた時にPC画面が小さくなって表示されていること。
これは対応できていないサイトです。
ホームページは、PC、タブレット、スマホユーザーに最適な形で表示してあげることが大切です。単純なことですが、見づらいサイトはサイトを見ている人(ユーザー)が離脱してしまいます。
PCとスマホのみ対応するコーディングをすることがあります。つまり、タブレットは未対応のパターンです。厳密に言うと、これはレスポンシブコーディングではありません。それはなぜかというと、マルチデバイスに対応していないからです。
heightは可変する
レスポンシブについて説明しました。レスポンシブは width(幅) に合わせて見え方が変わります。そして、要素の height(高さ) も変わります。
要素の height(高さ) が変わるとして、height(高さ)を固定したらどうなるでしょうか?想像してみましょう。
要素の height(高さ) が、固定した高さを越えてはみ出てしまう場合や余白があまってしまう場合があります。
要素の height(高さ) が変わることを考えると、height(高さ)を指定するところは滅多にないことが分かるかと思います。
まとめ
今回は、width(幅)とheight(高さ)の指定方法と使う上での注意点を説明しました。指定方法を説明する記事は多くあるので、今回は使う上での注意点を多めで書いてみました。
注意点の復習になりますが、width(幅)とheight(高さ)は使いすぎないのがコツです。使いどころを間違うと指定が増える場合があるので、使う必要がない箇所は使わないようにしましょう。
↓痒いところに手がとどくCSSプロパティの記事を他にも書いてます!
blog.mimipen.net
blog.mimipen.net
blog.mimipen.net
↓コーディング初心者向けに作りながら学べる記事を日々更新してます!
blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)