searchカテゴリー選択
chevron_left

メインカテゴリーを選択しなおす

カテゴリーのご意見・ご要望はこちら
cancel

1件〜100件

  • IntersectionObserver(インタレセクションオブザーバー)を使うためにHTMLを書いていこう

    ページ内HTMLで見出し、段落、画像を配置し、main.jsを作成していきます。 要素の配置 main.jsの作成   要素の配置 前回で画像の準備とコンソールの使い方について見てきました。

  • IntersectionObserver(インタレセクションオブザーバー)を扱うための素材の準備とコンソールの表示

    写真や画像などの取り込みとコンソールの表示にについて学んで行きます。 素材の準備 コンソールの表示 素材の準備 ・前回まででVS CodeとChromeの準備とindex.htmlファイルの作成をして

  • intersectionObserverAPI(インタレセクションオブザーバー)を使うために VS CodeとChromeの準備をする

    VS CodeとChromeを使ってindex.htmlファイルを作る。 VS Code Chrome index.html VS Code ・前回IntersectionObserverAPI(イン

  • IntersectionObserverAPI(インタレセクションオブザーバー・エーピーアイ)の使い方

    JavaScriptを使ってIntersectionObserverAPI(インタレセクションオブザーバー・エーピーアイ)という要素の監視するシステムを使いこなしてみましょう   Inter

  • カルーセルの完成

    ウィンドウの大きさを変えたときに画像がずれる不具合を修正していきます。 リサイズイベント リサイズイベント ・前回までで進む、戻るや下のボタンをクリックすると指定の位置に移動し、今どこの画像が表示され

  • カレントクラスの移動

    進む、戻るボタンを押したときにもカレントクラスが移動するように修正していきます。 関数を作る 関数を配置する 関数を作る ・前回まででボタンにクリックイベントをつけてボタンを押すと指定の画像を表示する

  • クリックイベントの設定

    ボタンにクリックイベントを設定し、画像が指定した位置に移動するようにしていきます。 クリックイベントの追加 カレントクラスの移動 クリックイベントの追加 ・前回まででボタンをJavaScript生成出

  • JavaScriptでボタンを作る

    JavaScriptでボタンを動的に生成する方法について見ていきます。 関数を作ろう 余白の設定 関数を作ろう ・前回まででHTMLとCSSで丸いボタンを作ってい行きコメントで消しておきました。 ボタ

  • ボタンのスタイリング

    ボタンのスタイルを整え、ボタンを動的に生成するための準備をしていきます。 ボタンのスタイリング ボタンのコメント化 CSS コメント ボタンのスタイリング ・前回でHTMLを使ってボタンの配置をしてき

  • 下の丸い点を配置する

    画像の下にボタンを配置しカルーセル全体をセクションでまとめておきます。 ボタンの配置 セクションの配置 navタグ ボタン body全体 ボタンの配置 ・前回までで戻る、進むボタンが出来て、重複してい

  • データの重複

    重複しているコードを一つの関数にまとめていきます。 関数を作ろう 関数の配置 関数を作ろう ・前回までで進むボタンと戻るボタンの動作を確認してきました。 ・今回は重複しているコードを関数で一つにまとめ

  • ボタンの動作

    updateButtons()メソッドを呼び出し、ボタンの状態が更新されるか確認していきます。 関数のの呼び出し 進むボタン 戻るボタン updateButtons() の呼び出し ・前回まででボタン

  • ボタンを隠す

    ボタンの状態を更新することで、不具合を直していきます。 非表示 関数 通常時 非表示 ・前回までで進むボタンと戻るボタンをうまく機能させることに成功しました。 ・今回は進みすぎてしまったり戻り過ぎてし

  • 戻るボタンを機能させる

    ボタンをクリックしたら前の画像にスライドするようにイベントを設定していきます。 戻るボタンの情報を取得 動作させる 戻るボタンの情報を取得 ・前回までで進むボタンを完成させて行きました。 ・今回は戻る

  • 進むボタンを完成させよう

    何番目のスライドを表示したいかを変数で管理していきます。 次の画像まで移動 Javascriptの書き方 次の画像まで移動 ・前回までで進むボタンを押すと次の画像が表示するようにJavaScriptで

  • スライドの長さを計算する

    画像が1枚分だけ横にスライドするように修正していきます。 ulの子要素を取得 スライドの情報を取得 テンプレートリテラル ulの子要素を取得 ・前回まででスライドをアニメションすることができるようにな

  • 画像をアニメーションする

    ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。 Id取得 イベントを追加 トランジションプロパティ Id取得 ・前回まででJavaScriptのファイルを作ってきました

  • JavaScriptを書いていく

    ボタンにマウスを ホバーしたときのスタイルを付けたあとに、JavaScriptを書く準備をしていきます。 ホバー JavaScriptファイルの作成 ホバー ・前回まででボタンのスタイリングをやってき

  • 新年のご挨拶

    新年あけましておめでとうございます。 みなさま健やかに新春をお迎えのこととお慶び申し上げます。 昨年は当ブログを見に来ていただきありがとうございました。 みなさまのお役に立てたことがとても幸せでした。

  • ボタンのスタイリング

    ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。 ボタンのスタイリング ボタン位置の修正 ボタンのスタイリング ・前回はボタンの配置をやってきました。 ボタンの配置

  • ボタンの配置

    画像をスライドさせるためのボタンを配置していきます。 ボタンの配置 ボタン位置の設定 ボタンの配置 ・前回までで画像の配置が終わったと思います。 画像の調整 ・今回は画像をスライドさせるためのボタンを

  • 画像の調整

    object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。 画像の縦横比 フレックスボックスの指定 画像を縮まないようにする 画像の縦横比 ・前回までで領域内に画像を入れることが

  • 画像を領域に収めていく

    画像がカルーセルの領域に収まるように修正していきます。 画像の大きさ調整 親要素の高さ指定 画像の大きさ調整 ・前回までで画像を配置し簡単なスタイリングめでしてきました。 画像の配置 ・ただ、まだ画像

  • 画像の配置

    リストのタグを使ってカルーセルで使う画像を配置していきます。 画像の配置 リストのスタイリング 画像の配置 ・前回までで領域を作っていきました。 画像を表示する領域 ・今回はその作った領域に画像を配置

  • 画像を表示する領域

    カルーセルで画像を表示するための領域を作り、スタイリングをしていきます。 雛形コード 表示領域の作成 style.cssの作成 雛形コード ・前回まででHTMLのファイルの作成と必要な画像ファイルの作

  • カルーセルの作り方

    JavaScriptでWEBサイトでよく見る横に画像などをスライドさせるカルーセルの作り方 完成版の確認 開発環境の確認 ファイルの作成 完成版の確認 ・今回からはJavaScriptを使ってのカルー

  • タブメニューの完成

    どのメニューにactiveクラスがついているかに応じて、表示するタブの内容を切り替える処理を完成させます。 Idの紐付け data属性の利用 Idの紐付け ・前回まででコンテンツのactiveクラスを

  • タブの内容を切り替える

    内容を切り替えるための処理として、まず全てのcontentからactiveクラスを削除します。 コンテンツからクラスを削除 コンテンツからクラスを削除 ・前回まででメニューを切り替えることができたので

  • クラスの付け替え

    activeクラスを追加する前に、元からついていたactiveクラスは外すことで、移動するようにします。 activeクラスの付け替え activeクラスの付け替え ・前回まででクリックをするとact

  • JavaScriptでメニューにイベントをつけていく

    メニューのliにclickイベントを設定して、クリックされたらactiveクラスが追加されるようにしていきます。 イベントの設定 ページ遷移のキャンセル イベントの設定 ・前回まででCSSでの全体的な

  • 擬似クラス

    細かい部分のスタイルを調整とホバー擬似クラスをつけていきます。 細かいスタイリング 擬似クラス 細かいスタイリング ・前回activeクラスをつけてそちらのスタイルを整えてきました。 ・今回はさらに見

  • メニューのスタイリングとクラスの追加

    activeクラスがついているメニューにスタイルをつけていきます。 メニューのスタイリング コンテンツのスタイリング displayプロパティの操作 メニューのスタイリング ・前回までで全体のスタイリ

  • CSSでスタイリングをしていく

    CSSで、画面全体とメニューのスタイルを調整していきます。 全体のスタイリング コンテイナーのスタイリング メニューのスタイリング 全体のスタイリング ・前回まででHTMLでのマークアップを終えました

  • マークアップ

    HTMLでマークアップをしていきます。 全体のマークアップ メニューのマークアップ 中身のコンテンツのマークアップ 全体のマークアップ ・前回まででCSSのファイルとJavaScriptのファイルを読

  • その他のファイルの読み込み

    CSSファイルとJavaScriptをファイルを読み込んで行きます CSSファイル JavaScriptファイル CSSファイル ・前回まででタブメニューを作るための全体像の把握とHTMLファイルを作

ブログリーダー」を活用して、こうへいさんをフォローしませんか?

ハンドル名
こうへいさん
ブログタイトル
Teatree webブログ
フォロー
Teatree webブログ

にほんブログ村 カテゴリー一覧

商用

フォローできる上限に達しました。

新規登録/ログインすることで
フォロー上限を増やすことができます。

フォローしました

リーダーで読む

フォロー