CSS

transitionプロパティを複数使ってCSSでアニメーションさせる方法を現役エンジニアが解説【初心者向け】

初心者向けにtransitionプロパティを複数使ってCSSでアニメーションさせる方法について解説しています。最初にtransitionプロパティの基本の値の指定方法を説明します。次に複数のプロパティを使ったアニメーション作成の書き方をサンプルコードで見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

transitionプロパティを複数使ってCSSでアニメーションさせる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

transitionプロパティを複数使ってアニメーションさせる方法について詳しく説明していくね！

お願いします！

transitionプロパティについて

transitionプロパティを設定することによって、初期時の表示から、変化が加えられた結果の表示にいたるまでの過程（プロセス）を動作として表現できます。なお、一部、変化ではないと判定されて無効になってしまうプロパティ（displayなどによる属性の変更）があります。

基本的な使い方

transitionプロパティの値として、変化の対象として捕捉するプロパティと、結果までにいたる過程の時間を指定します。変化を加えるための処理は、CSSの擬似クラスの:hoverなどを用いるか、JavaScriptにてスタイルを加える必要があります。

CSS

See the Pen
2019-12-23-sample-11 by YOHEI INAI (@yohei_inai)
on CodePen.

対象と定めている要素にマウスカーソルを乗せることによって、6秒をかけて幅が300pxから1200pxにまで伸びます。

JavaScript

See the Pen
2019-12-23-sample-10 by YOHEI INAI (@yohei_inai)
on CodePen.

対象と定めている要素がブラウザに識別されてから3秒後に、6秒をかけて幅が300pxから1200pxにまで伸びます。

[PR] Webデザインで副業する学習方法を動画で公開中

複数のプロパティを使う方法

値として設定してから、さらに、「,（カンマ）」を加えて、複数として連続させることができますが、allを設定することの方が簡単です。

See the Pen
2019-12-23-sample-12 by YOHEI INAI (@yohei_inai)
on CodePen.

アニメーションを作ってみよう

See the Pen
2019-12-23-sample-13 by YOHEI INAI (@yohei_inai)
on CodePen.

上記のサンプルコードのアニメーションは、ボタンにマウスカーソルが乗ることによって、ボタンの背景色を変化させて明暗を表現しています。

See the Pen
2019-12-23-sample-14 by YOHEI INAI (@yohei_inai)
on CodePen.

上記のサンプルコードのアニメーションは、メニューにマウスカーソルが乗ることによって、高さを収縮させることによって隠されていました各項目を表示させています。

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

CSSの記述場所 - CSSはどこに書けばいいのか？【初心者向け】

今回は、CSSの記述場所に関する解説を行います。そもそも、CSSはどこに書けばいいのか？そんな疑問をお持ちのCSS初心者の方は多いと思います。実...

CSS

CSSで複数のanimationを操作する方法を現役エンジニアが解説【初心者向け】

CSSで複数のanimationを操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSのスタイルの優先順位とは【初心者向け】

CSSの記述場所は、次の3つの記述場所があります。 HTML上のstyleタグに記述する HTML上のタグのインラインに直接記述する CS...

CSS

CSSでunderlineの色をスタイルする方法を現役エンジニアが解説【初心者向け】

CSSでunderlineの色をスタイルする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSのinline-blockの改行による隙間を消す方法【初心者向け】

CSSのinline-blockの改行による隙間を消す方法について解説します。ソースコード上で改行があるとインライン要素やインラインブロック要素に空白が...

CSS

CSSで偶数や奇数の要素にだけプロパティを適用させる方法【初心者向け】

CSSで偶数や奇数の要素にだけプロパティを適用させる方法について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説し...

CSS

あわせてよく読まれている記事

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次transitionプロパティについて基本的な使い方複数のプロパティを使う方法アニメーションを作ってみよう監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する学習方法を動画で公開中calcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。目次transitionプロパティについて基本的な使い方複数のプロパティを使う方法アニメーションを作ってみよう監修してくれたメンター【動画の解説はこちら】田島悠介今回はCSSの基本的な書き方について勉強していこう。大石ゆかり田島メンター！！CSSの構文ではどんなものを使うんですか〜？田島悠介まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。大石ゆかりはい！ CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。スタイルシートが必要な理由以前はHTMLのタグによってスタイルの指定も行われていました。文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。 HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。同じ内容をHTMLとCSSで指定した場合の例 HTML <p>テキスト<p> CSS p{font-size:20px; color:red;} [PR] Webデザインで副業する学習方法を動画で公開中CSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。セレクタ – どのHTMLタグに対して見合えを調整するかプロパティ – どういった内容のデザインを施すか値 – プロパティはどの程度か簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。ほかのタグに設定したいときも同様です。例）pタグ p {color: red; } 最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。田島悠介セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。大石ゆかりこの場合段落<p>のcolor、文字色をredの赤にするということですね。田島悠介そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。プロパティを複数指定したいときひとつのセレクタに対して、プロパティは複数指定することができます。たとえば、フォントサイズを20px・文字の色を青にしたいときには、 h1{font-size: 20px, color: blue;} のように書きます。また、コードには空白部分は無視されるという性質があるので、{ }で囲んだ設定を見やすく並列に並べてもいいでしょう。 h1{ font-size: 20px, color: blue; } プロパティの種類プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。プロパティ説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する実践〜スタイルを作ってみよう〜では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。今回は、次のHTMLコードをもとに進めます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p> </body> </html> ブラウザ画面ではこのように表示されます。これを、最終的に次のようなデザインにしたいと思います。スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。 <head> <meta charset=“UFT-8”>

CSS

JavaScriptでlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】

JavaScript文字数をカウントする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。文字列の長さ（文字数）や配列の要素数などを調べるとき「length」を使用します。この「length」は文字列（String）や配列（Array）などのオブジェクトに定義されているプロパティです。目次transitionプロパティについて基本的な使い方複数のプロパティを使う方法アニメーションを作ってみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 ※オブジェクトとはデータ（値）とそのデータを処理する機能（関数）を1つにまとめた集合体です。オブジェクトについて、詳しくは公式ドキュメントの「JavaScript オブジェクトの基本」をご覧ください。大石ゆかり JavaScriptで文字数を数えるにはどうしたらいいですか？田島悠介 JavaScriptで文字数を数えるにはlengthプロパティが使えるよ。ただ、lengthプロパティで取得できるのは文字数だけじゃないんだ。配列のlengthプロパティは要素数、関数のlengthプロパティは引数の数も取得できるんだよ。大石ゆかり lengthプロパティって文字数だけじゃないんですね。田島悠介そうなんだ。 lengthプロパティを使うオブジェクトによっていろいろ使い方が変わるんだ。じゃあ、さっそくJavaScriptで文字数をカウントする方法について詳しく説明していくね！大石ゆかりお願いします！ lengthプロパティとは文字列の長さや配列の要素数を取得するプロパティがlengthです。他にも関数の引数の数を調べたり、数値の桁数を取得したりできます。 lengthプロパティの使い方書式 // 文字列文字列の文字数 = 文字列.length; // 配列配列の要素数 = 配列.length; // 関数関数の引数の数 = 関数名.length; 文字列のlengthプロパティで、文字列の文字数を取得します。文字列が空ならlengthプロパティは 0 です。全角と半角文字の区別はなく数えられます。配列なら要素数、関数なら引数の数がlengthプロパティの戻り値です。 [PR] Webデザインで副業する学習方法を動画で公開中文字列の文字数（length）を取得する文字列の文字数を取得するサンプルコードです。ソースコード const str = 'TechAcademyマガジン'; // HTMLに文字数を出力 document.body.textContent = str.length; 表示結果 See the Pen js_length_string by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 const str = 'TechAcademyマガジン'; 文字数を調べたい文字列を定数 strに代入します。 document.body.textContent = str.length; Webページに文字数を出力します。変数 strに入っている文字列「TechAcademyマガジン」は全部で15文字なので、str.lengthの値は「15」です。 ※「const」は固定された値である定数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。【参考】数値の桁数を取得する文字数を取得するlengthプロパティを応用して、数値の桁数を取得できます。 String( 数値 ).lengthで指定された数値の桁数が求められます。数値の変数でも同じように求められますが、数値の変数なら数値の変数.toString().length で求める方法もあります。 See the Pen js_length_int by mentor-inoue-y (@mentor-inoue-y) on CodePen. 配列の要素数（length）を取得する配列の要素数を取得するサンプルコードです。ソースコード const fruits = ['りんご', 'バナナ', 'ぶどう']; //配列の要素数を取得 document.body.textContent = fruits.length; 表示結果 See the Pen js_length_array

JavaScript

CSSスタイルでfloatされる範囲を現役エンジニアが解説【初心者向け】

CSSスタイルのfloatプロパティが適用される範囲について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次transitionプロパティについて基本的な使い方複数のプロパティを使う方法アニメーションを作ってみよう監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 CSSスタイルのfloatプロパティが適用される範囲について詳しく説明していくね！大石ゆかりお願いします！ floatプロパティとは？ floatプロパティとは、画像などに対してテキストを回り込ませたい時に用いられています。要素を横並びにしたいときにも使えますが、近年はFlexbox（フレックスボックス）と呼ばれる一連のレイアウトプロパティで横並びにするやり方が主流です。しかし、サイト改修時にfloatプロパティを適用している箇所に手を入れることもあるでしょう。 floatプロパティに出会ったときに備えておく知識として、このプロパティの特性および適用される範囲について学んでおきましょう。 floatプロパティを使う場面以下のサンプルコードのように、テキストを回り込ませたい時に、画像に対してfloatプロパティを使用します。 See the Pen 2020-01-20-sample01 by YOHEI INAI (@yohei_inai) on CodePen. また、要素を横並びにする時にもfloatプロパティが使用できます。以下のサンプルコードでは、画像をfloat: left; という指定で左方向に寄せ、後続の要素を回り込ませることで横並びを実現しています。 5つの画像の幅をすべて20%に指定することで、親要素の幅いっぱいまで横並びにできます。 See the Pen 2020-01-20-sample02 by YOHEI INAI (@yohei_inai) on CodePen. [PR] Webデザインで副業する学習方法を動画で公開中floatプロパティ使用時のよくある問題点と対処方法ここでは誰もが一度はつまずく代表的な課題と、その対処法を解説していきます。 floatの対象になった子要素を含める親要素は、正確に高さを算出できない float指定をした要素は、浮動・浮遊しているような状態になり、周囲の要素とは異なる流れでブラウザに解釈されます。そのため、親要素はfloat指定された要素を識別することができず、他のfloat指定されていない要素からのみ高さを算出するようになります。つまり、親要素の高さはfloat指定された子要素の高さを含みません。 See the Pen 2020-01-20-sample03 by YOHEI INAI (@yohei_inai) on CodePen. 上記のサンプルコードは高さを揃えるために、float指定された子要素と親要素のそれぞれにheight: 300px;と指定しています。 float指定された子要素と親要素のそれぞれに同じ高さを指定している場合、高さが揃っていますので、背景色も画像と同じ高さに色がついています。背景色をつけた下記の例もご覧ください。 See the Pen 2020-01-20-sample04 by YOHEI INAI (@yohei_inai) on CodePen. 下記のサンプルコードでは、親要素の高さ指定height: 300px;をなくしています。背景色がついている部分が親要素の高さですが、float指定していない子要素のみで高さを算出していることがわかります。 See the Pen 2020-01-20-sample05 by YOHEI INAI (@yohei_inai) on CodePen. float指定された子要素も含めた高さを算出させるには See the Pen 2020-01-20-sample06 by YOHEI INAI (@yohei_inai) on CodePen. 各要素に高さを指定するのはではなく、clearfix（クリアフィックス）と呼ばれる手法を使用します。親要素にclearfixの指定をすることで、正確な高さを算出できます。まとめ前述の背景色を設定した例にて、floatされる範囲を確認できました。親要素の高さに、float指定された子要素の高さを含ませるためには、親要素にclearfixの指定をすることで解決できます。 floatされる範囲を正しく知っておくことで、レイアウトが思うようにいかない場合の原因究明に役立ちますので、ぜひ覚えておきましょう。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ CSSを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

CSS

JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法について解説します。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。なお本記事は、オンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次組み込み関数のDateオブジェクトとは Dateオブジェクトを実際に生成してみよう Dateオブジェクトのプロパティを呼び出してみよう　プロパティ1. getFullYear()（現時点での年を取得する）　プロパティ2. getMonth()+1（現時点での月を取得する）　プロパティ3. getDate()（現時点での日を取得する）　プロパティ4. getDay() （現時点での曜日を取得する）　5. 最後に（現時点での年・月・日・曜日を一気に取得する）組み込み関数のDateオブジェクトとは組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Dateオブジェクトは、組み込み関数の1つで、日付を扱う際に使います。参考までに、組み込み関数の代表的なものには次のようなものがあります。 <組み込み関数（代表的なもの）> String　文字列を扱う Number　数値を扱う Boolean　論理値を扱う Array　配列を扱う Date　日付を扱う Math　数値計算で扱うはじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。 var オブジェクト名= new object(); 大石ゆかり田島メンター！日付を扱うにはどうしたらいいでしょうか？田島悠介 Dateオブジェクトっていう組み込みオブジェクトが用意されているので、それを使うといいね。大石ゆかり日付を処理する関数は最初から用意されてるんですね。田島悠介他のプログラミング言語でもそうなんだよ。さっそくDateオブジェクトについて見てみよう！ [PR] Webデザインで副業する学習方法を動画で公開中Dateオブジェクトを実際に生成してみよう適当なオブジェクト名（today）をつけ、Dateオブジェクトを生成してみましょう。日付に関する様々なプロオパティやメソッドを出力することができます。 var today = new Date(); <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> var today = new Date(); </script> </body> </html> ここまでできたら、console.logを使って日付に関する様々なプロオパティやメソッドを呼び出してみます。次の章から見ていきましょう。 Dateオブジェクトのプロパティを呼び出してみよう Dateオブジェクトでの文字列の操作の仕方を、4つのプロパティを例に見ていきましょう。プロパティ1. getFullYear()（現時点での年を取得する）プロパティ2. getMonth()+1（現時点での月を取得する）プロパティ3. getDate()（現時点での日を取得する）プロパティ4. getDay() （現時点での曜日を取得する） 5. 最後に（現時点での年・月・日・曜日を一気に取得する）プロパティ1.

JavaScript

JavaScriptでDOMを操作する方法【初心者向け】

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。目次transitionプロパティについて基本的な使い方複数のプロパティを使う方法アニメーションを作ってみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。（動画は2つに分かれています）テキストと動画で、解説に少し違う部分があります。テキストは、JavaScriptの「ES6(ES2015)」というバージョンに基づいて解説しています。動画は、その1つ前の「ES5」というバージョンに基づいて解説しています。 DOMとは JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。そして、その特徴を支えているのがDOM（Document Object Model）です。大石ゆかり田島メンター！DOMというのは何でしょうか？田島悠介簡単に言うと、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりする仕組みのことなんだ。大石ゆかり HTMLをJavaScriptで操作できるってことですか？田島悠介その通り！実際にDOMがどんなものなのか詳しく解説していくね。 Windowオブジェクト DOMを理解するには、まずWindowオブジェクトを知る必要があります。 Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。ブラウザのコンソールに以下のように記述すると、Windowオブジェクトの中身が見られます。 console.log(window); Windowオブジェクトが持っている、プロパティやメソッドがずらりと出てきます。開発でよく使われるWindowオブジェクトのプロパティ / メソッドには、以下のようなものがあります。 location : 現在開いているページのURLに関する情報が格納されるプロパティです。 innerWidth / innerHeight : ブラウザ画面の幅や高さの情報が格納されるプロパティです。 alert : アラートを表示するためのメソッドです。 setTimeout / setInterval : 一定時間後や一定時間おきに処理を行うためのメソッドです。また、Windowオブジェクトのプロパティ / メソッドのアクセスの際には、windowの記述を省略できるという特性があります。 console.log(window.location); console.log(location); //どちらも現在のURLの情報が入ったオブジェクトが表示される！まとめると、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトということです。 Documentオブジェクト DocumentオブジェクトはWindowオブジェクトのプロパティの1つで、こちらも現在のサイトに関する情報を保持しています。 Windowオブジェクトがブラウザそのものに関する情報だったのに対し、Documentオブジェクトはブラウザで表示しているHTMLに関する情報と言えるでしょう。中身をみていくと、いろいろプロパティがありますね。たとえば、bodyはHTMLのbodyタグの中身をあらわしています。本題のDOMに戻ります。名前の通り、DOM（Document Object Model）ではDocumentオブジェクトを通して、個々の要素を取得・操作できるのです。次の章からは、DOMの仕組みやDOMの操作方法を具体的に見ていきましょう。 DOMのツリー構造それでは、DOMの操作の仕方について見ていきましょう。個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。ツリー構造は簡単に言えば、1つの親要素の下に子要素があって、さらにその子要素がそれぞれ親になり、またその下に子要素を持つ……というぶら下がり構造を意味します。実際のHTMLのコードも、ツリー構造として捉えられます。 <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>見出し</h1> <div> <p>テキスト1</p>

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

transitionプロパティを複数使ってCSSでアニメーションさせる方法を現役エンジニアが解説【初心者向け】

transitionプロパティについて

基本的な使い方