TeatreeLIFE » ビジネス本で人生を豊かにする情報ブログサイト - Page 14

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

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

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

: ボタンの配置
画像をスライドさせるためのボタンを配置していきます。ボタンの配置ボタン位置の設定ボタンの配置・前回までで画像の配置が終わったと思います。画像の調整 object-fitプロパティを使って画像 ...

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

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

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

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

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

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

« Prev 1 … 12 13 14 15 16 … 34 Next »