20210511のCSSに関する記事は6件です。

【Javascript】clip-pathでスライドアニメーションを作ってみた

初めに 学習した内容をもとにスライドーアニメーションを作ってみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 完成形のイメージ 矢印ボタンを押すとイメージが左から右へとスライドします。 Main Concept ① イメージが入っている箱を横に並べます。(親要素のpositionをrelativeにし、子要素のイメージ箱をabsoluteにする) ② イメージコンテナ(イメージが入っている5つの箱の親要素)にclip-pathで四角い形で切り抜きます。これが可視領域になります。 ③ ボタンをクリックした時にsetIntervalを使って、イメージの位置(left)が徐々に増えるようにします。また、一定の数(count)が実行されたらclearIntervalを指定し止まるようにします。 ④image0.jpg 〜 image4.jpgの絶対位置(left)を全て左から右へずらすことによってスライド効果が生まれます。 htmlで箱を用意する slide_mainタグの中にイメージが入るslide_main_imagesとボタンになるslide_buttonnext要素を作成します。ボタンの場合javascriptの処理が必要なのでslide_buttonという名前のidも用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/app.css"> <title>Slide</title> </head> <body> <section class="slide"> <div class="slide_main"> <div class="slide_main__images"> <div class="s0"></div> <div class="s1"></div> <div class="s2"></div> <div class="s3"></div> <div class="s4"></div> </div> <div id="slide__button" class="slide_buttons__next"></div> </div> </section> <script src="main.js"></script> </body> </html> sassの記述 slideのイメージが入る部分とボタンの部分を分けて記述します。ボタンの作り方は前回の記事の通りです。 また、clip-pathをslide_main__images要素に指定します。四角い形で大きさはそれぞれのイメージと同じです。 slide要素にpositionをrelativeにし、5つのイメージのdiv要素はabsoluteでそれぞれ親要素を基準にして位置を決めておきました。こうすることによってイメージの箱が横にずらりと並びます。はみ出るイメージはoverflow:hiddenを指定して隠します。 .slide { height: 400px; margin: 0 auto; position: relative; &_main { height: 400px; margin: 0 auto; &__images { position: relative; padding: 5% 0 5%; margin: 0 auto; width: 90%; height: 280px; clip-path: inset(10% 25% 10% 25%); overflow: hidden; & div { height: 280px; cursor: pointer; &.s0 { top: 70px; width: 50%; position: absolute; } &.s1 { top: 70px; width: 50%; position: absolute; } &.s2 { top: 70px; width: 50%; position: absolute; } &.s3 { top: 70px; width: 50%; position: absolute; } &.s4 { top: 70px; width: 50%; position: absolute; } } } } } .slide_buttons__next { position: absolute; top: 200px; right: 300px; cursor: pointer; color: lightgray; width: 30px; height: 30px; &:hover { transition-duration: 0.2s; transform: translateX(10px); } &::after { content: ""; display: block; width: 15px; height: 15px; position: absolute; margin-top: 2.5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(45deg); } } javascriptの記述 イメージファイルが入っている配列imagesを用意します。それぞれのイメージが入るdivタグをquerySelectorで指定し、styleでイメージをアサインします。また、ボタンをクリックしたらそれぞれのイメージのleft位置をずらすようにしました。setIntervalでクリックイベントが走る回数をcountでコントロールします。また、countが49回をオーバーするとclearIntervalでsetIntervalを止めます。 "use strict"; const images = [ "images/0.jpg", "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", ]; let increase = -1; let init = -75; const displayImage0 = document.querySelector(".s0"); displayImage0.style.backgroundImage = `url(${images[0]})`; const displayImage1 = document.querySelector(".s1"); displayImage1.style.backgroundImage = `url(${images[1]})`; const displayImage2 = document.querySelector(".s2"); displayImage2.style.backgroundImage = `url(${images[2]})`; const displayImage3 = document.querySelector(".s3"); displayImage3.style.backgroundImage = `url(${images[3]})`; const displayImage4 = document.querySelector(".s4"); displayImage4.style.backgroundImage = `url(${images[4]})`; function slide_next() { increase = increase + 1; displayImage0.style.left = `calc(${init}% + ${increase}%)`; displayImage1.style.left = `calc(${init + 50}% + ${increase}%)`; displayImage2.style.left = `calc(${init + 100}% + ${increase}%)`; displayImage3.style.left = `calc(${init + 150}% + ${increase}%)`; displayImage4.style.left = `calc(${init + 200}% + ${increase}%)`; if (displayImage0.style.left == `calc(25%)`) { init = init - 200; displayImage4.style.backgroundImage = `url(${images[0]})`; displayImage2.style.backgroundImage = `url(${images[4]})`; } } slide_next(); document.getElementById("slide__button").addEventListener("click", () => { let count = 0; const intervalId = setInterval(() => { slide_next(); count++; if (count > 49) { clearInterval(intervalId); } }, 25); }); 参考記事 https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval https://techacademy.jp/magazine/5537 https://techplay.jp/column/548
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

備忘録 Goでginを使う時に、cssやjsのファイルが読み込めない問題の解決

書いた理由 go言語でginを使っていたら、htmlからjsが読み込めない問題が発生したので、忘れないようにメモっておきます。また、ginを使わない場合でも同様の操作が必要らしいです。 cssの読み込みも同様にやるので、省略します。 ディレクトリについて githubに今回のコードはおいてあります。 correct.goが正常に動作するプログラムで、incorrect.goが正常に動作しないプログラムです。 ./ ├── correct.go ├── incorrect.go └── src ├── index.html └── js └── main.js htmlとjs ボタンを押すと、alertでPushed!!と出るだけの簡単なプログラムです。 index.html <html> <head> <title>gin-js</title> <script defer="defer" src="./js/main.js" ></script> </head> <body> <button id="btn">Push!!</button> </body> </html> main.js document.getElementById("btn").onclick=function(){ alert("Pushed!!") } 失敗するプログラム /に接続すると、index.htmlが表示されるいたって簡単なプログラムです。 incorrect.go package main import "github.com/gin-gonic/gin" func main() { router := gin.Default() router.LoadHTMLGlob("src/*.html") router.GET("/", func(ctx *gin.Context) { ctx.HTML(200, "index.html", gin.H{}) }) router.Run() } 実行すると/js/main.jsにGETリクエストをして、404が返ってきています。 成功するプログラム correct.go package main import "github.com/gin-gonic/gin" func main() { router := gin.Default() router.Static("/js", "src/js/") // ここを追加するだけ! // router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所") router.LoadHTMLGlob("src/*.html") router.GET("/", func(ctx *gin.Context) { ctx.HTML(200, "index.html", gin.H{}) }) router.Run() } 実行すると/js/main.jsにGETリクエストをして、200が返ってきて成功しています! 静的なファイルにはこのメソッドを使用するらしいです。(詳しくは自分で調べて...) router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所") 最後に 調べても全然出てこなく、30分ぐらいかかったので備忘録&周知のために記事を書きました。 誰かの役に立ったら幸いです。 今回のリポジトリ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者でもわかる】マウス操作だけで動きをつけたり見た目が変わるHTML、CSSたち

どうも7noteです。JavaScriptを使わなくてもマウス操作だけで見た目に動きをつけたり変化ができるHTML・CSSについて。 HTMLやCSSの中には、マウス操作によって見た目を変える方法がいくつかあります。 JavaScriptを使ってCSSを変更したり、クラスを付与して変化をつけなくても、HTML、CSSだけでこれだけできるんだっていうのを共有できたらと思います。 マウス操作で変化するHTML・cssたち。 「マウスホバー(:hover)」 style.css a:hover { text-decoration: none; } 「フォーカス(:focus)」 style.css input[type="text"]:focus { background: #fcc; } 「チェック(:checked)」 style.css input[type="checkbox"] { display: none; } input[type="checkbox"] + span { position: relative; } input[type="checkbox"] + span::before { content: '□'; } input[type="checkbox"]:checked + span::after { content: '✓'; color: #f00; position: absolute; left: 0; bottom: -2px; } 「details & summary」 index.html <details> <summary>みだし</summary> 内容内容<br>内容内容 </details> 「#idでスクロール」 index.html <div><a href="#hogehoge">ほげほげへ移動</a></div> <div id="fugefuge">ふがふが</div> <div id="hogehoge">ほげほげ</div> まとめ JavaScriptを使わなくても、簡易的な動きをつけるだけならHTML・CSSだけでも十分可能です。 とくに:checkedを使ったチェックボックスの方法は自由度が高いので、覚えておくと使えるタイミングがあるかなと思います。 他にもあるような気がするので、思いつき次第追記していきます。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

メインビジュアル(背景画像)に対して画像中央にテキスト表示をする方法

画像配置してテキストを中央におきたかったのでメモ (すぐ忘れる) index.html <div class="mainvisual"> #メインビジュアルの画像を背景画像に <div class="text__content"> #position: absolute;で動かす <div class="title">テキストテキスト</div> </div> </div> index.css .mainvisual { height: 300px; width: 100%; background: url(../img/mainvisual.png) no-repeat center center / cover; position: relative; } .text__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mvの背景画像を設定する。 background: url(../img/mv.png) no-repeat center center / cover; で一括設定が可能。 position: relative;とposition: absolute;で配置関係を設定。中央に揃えることができる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【CSS】clearfixについて

概要 floatプロパティによって浮いた要素の回り込みを解除できる(バリアを張るイメージ) 具体例 <div class="clearfix"> <div class="box1"></div> <div class="box2"></div> </div> <div class="box3"></div> .clearfix::after{ content: ""; display: block; clear: both; } .box1{ background-color: red; width: 200px; height: 200px; float: left; } .box2{ background-color: green; width: 200px; height: 200px; float: left; } .box3{ background-color: yellow; width: 200px; height: 200px; } 実行 yellowがredの下に回り込むのを解除している .clearfix::after clearfixというクラス名を付けた要素の直後 content:""; contentプロパティで任意の文字を挿入 display: block; clearfixを付けた要素の直後に要素を作る clear: both; float解除 参考
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

cursor とは

■ cursorとは 要素にカーソルが乗ったときにカーソルの形を変える事を言います。 e] 何か検索をする際に検索する場所にカーソルを移動させるとカーソルが変わる 下はイメージ図です⬇️ https://gyazo.com/4b1c2760de5137503bed608196eab955 ■ cssの書き方 cursor: text, ↪︎ この書き方をすると上のイメージ図みたいなカーソルに変化します。 今日の投稿は以上です。 これからもアウトプットの方頑張っていきたいと思います!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む