HTML/CSS

【JavaScript】Canvasで複数の画像を1つのimgタグで順番に出力してみよう【HTML5】

2020-06-25 2020-09-05

こんにちは。今回はJavaScriptでcanvas要素を使って、複数の画像を1つのimg要素へ出力する方法をご紹介します。 同じフォルダ構成＋ファイル名の画像さえあれば、コピペで再現できます！ HTML 今回のHTML […]

HTML/CSS

【JavaScript】アナログ時計を表示してみた

2020-06-24 2020-09-05

こんにちは。先日JavaScriptでカウントダウンタイマーを作成してみました！詳しくはこちらをご欄ください。 今回はDateオブジェクトを使用して、アナログ時計を作成してみました。良かったら試してみてください。 HTM […]

HTML/CSS

＜input type=”file”＞で読み込んだ画像を表示させよう【JavaScript】

2020-06-05 2020-09-05

前回は、＜input type = “file”＞で選択するボタンの装飾について説明しました。詳しくは、こちらをご覧ください。 今回はinput要素で読み込んだ画像を表示させてみようと思います。そ […]

HTML/CSS

ファイルを選択するボタンの画像やスタイルを設定する方法＜input type=”file”＞

2020-06-03 2020-09-05

input要素において、「確認する」ボタンを ＜input type = “image”＞ でsrc属性に画像のパスを設定すると、「確認する」ボタンを画像に設定することができます。 しかし、ファイ […]

HTML/CSS

【JavaScript】非同期処理と処理の順番について【初心者・入門】

2020-06-02 2020-09-05

JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後処理の順番について説明していきます。 同期処理と非同 […]

HTML/CSS

JavaScriptを使ってビンゴカードを作成してみた

2020-05-31 2020-09-05

こんにちは。今回はJavaScriptを使ってビンゴカードを作成してみました。Jqueryも使用していますので、ご注意ください。 HTMLの設定 まずは、枠作りのHTMLからです。 ビンゴカードの枠と作成用のボタンを設定 […]

HTML/CSS

object-fitをIEに対応させる方法【object-fit-imagesライブラリ】

2020-05-27 2020-09-05

前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。ただし、前回までの記事でも記載したように、このプロパティはIEには対応しておらず、別途対応する必要があります。今回 […]

HTML/CSS

【CSS】img要素の画像の配置を設定する方法【object-position】

2020-05-26 2020-09-05

前回はCSSで「object-fit」プロパティを使って、img要素などの置換要素に対してコンテンツをどのようにはめ込むかを設定しました。よければこちらの記事もご覧になってください。 今回は置換要素に対して、コンテンツを […]

HTML/CSS

【CSS】img要素の縦横比を固定する方法【object-fit】

2020-05-24 2020-09-05

画像の縦横比を固定する方法で、cssに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定のサイズで画像を配置することができます。他にも「object-fit」プロパティ […]

HTML/CSS

【HTML5】Canvasとは？使い方の紹介、入門編(1)

2020-05-20 2020-09-05

皆さんCanvasを使用したことはありますか？今回はCanvasを使って、2Dの簡単な図形を描画する方法を紹介していきます。 Canvasとは？ Canvasとは、HTML5から追加された2Dの図形を描画するための技術で […]