Flexboxで上下左右の中央揃えする方法 Flexboxで要素を中央揃えする方法です。 親要素に対して、display:flex;を指定し、justify-content:center;で上下の中央揃えをします。 そして、align-items:center;で左右の中央揃えをすると上下左右の中央揃えができます。 style.css .center { height:120px; display:flex; justify-content:center; align-items:center; }
@keyframes アニメーションの最初を0% 最後を100%で表現する 0% 100% CSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。 セレクタ – どのHTMLタグに対して見合えを調整するか プロパティ – どういった内容のデザインを施すか 値 – プロパティはどの程度か プロパティ 説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する .の場合はClass AAAA .test{ color:res; } の場合はID TEST{ color:red; }
超初心者なのですが、ハムスターを愛でるためのWEBアプリケーションを作ろうとしています。お遊びアプリには動きがないとね！！！ということで、WEBページでのアニメーションに触れてみました。ネット上で仕入れたサンプルをベースにとりえあずハムスターを動かすにはどうするのか？これを確認しつつ、アプリケーションで必要となる「現在地」から目標地点までの距離を測る機能を実装します。 出来上がったWEBアプリケーション netlify上にアップしましたのでご覧ください 画面イメージショット （実際はグレーのハムスターが右から左に横切ります） 参考）開発予定のプロダクト（note記事に飛びます） 確認したかった機能 ハムスターの画像をアニメーションさせる @keyframes でアニメーションできることがわかった 以下のサイト様の解説を参考にさせていただきました 現在地から目標地点までの距離を計測する 2点間の距離を計測するライブラリ「Geolib」で簡単に計測できることがわかった 以下のサイト様の解説を参考にさせていただきました ユーザーレビュー 家族ども（嫁・子供）にみてもらいました。コメントは以下の通り ハムスターがかわいい 背景のタッチもかわいい ハムスターがもうちょっと細かく動くといいかも いままで何をやりたいのかわからなかったがモノを見て分かった ハムちゃんの動きがすこし雑だよな、、とおもっていたところをやっぱり指摘されたのでここは要改善点。いろいろ調べて、もっとかわいらしく動くようにしたいと思う。 ４点目は、やはりそうか、、という感じだが、人はモノを見せてもらうまでは、なかなか理解できないものだなと思った。引きつづき「動くもの」を素早く作り、フィードバックが得られるようになりたいと思う。 ソースコード HTML index.html <!DOCTYPE html> <html lang="ja-jp"> <head> <meta charset="UTF-8"> <title>ハム旅</title> <link rel="stylesheet" href="css/style.css"> <script src="app.js" defer></script> </head> <body> <script src="https://cdn.jsdelivr.net/npm/geolib@3.3.1/lib/index.min.js"></script> <div class="board"> <H1>はむ旅</H1> <div class = "dist"><P><img width = "50" src = "grayham.png">グレハムちゃんちまで</P></div> <H3><div id = "kyori"></div></H3> </div> </body> </html> CSS style.css body { margin: 0; } .hamu { position: absolute; left: 110%; bottom: 100px; width: 200px; height: 158px; background-image: url(../hammask.png); animation: hamuwalk 0.6s 0s infinite steps(9), hamuMove 15s 0s linear; transform-origin: 50% 100%; } @keyframes hamuwalk { 100% { background-position: -1800px 0; } } @keyframes hamuMove { 0 { left: 100px; bottom: 100px; } 100% { left: -300px; bottom: 100px; } } .board { height: 1000px; position: relative; overflow: hidden; background: rgb(0, 0, 0); background-image: url(../bg.jpg); background-size: cover; background-position: center bottom; } H1 { text-align: center; font-size: 80px; color: rgb(1, 26, 250); } H3 { text-align: center; font-size: 50px; color: rgb(0, 0, 0); } .dist { text-align: center; font-size: 40px; } Javascript app.js var board = document.querySelector(".board") function start() { var div = document.createElement("div"); div.classList.add("hamu"); div.style.transform = "scale(1.2)"; div.style.animationDuration = "5s"; board.appendChild(div); div.addEventListener("animationend", function () { this.parentElement.removeChild(this); }); } navigator.geolocation.getCurrentPosition(successCallback, errorCallback); function successCallback(position) { //geolibで距離を計測 let distance = geolib.getDistance( {latitude: position.coords.latitude, longitude: position.coords.longitude}, //自分 {latitude: 35.6895014, longitude: 139.6917337} //都庁 ); console.log(distance); document.getElementById( 'kyori' ).innerHTML = '約' + distance / 1000 + 'キロメートル'; } function errorCallback(error) { //エラー時 } start();
スクロールして要素が表示されたら、 アニメーションが動くやり方は色々なサイトで見かけると思います！ 私も初めて検索したときには、参考にしたいサイトが多い分、たくさんの情報を目にしてしまい、 結果どの方法を使ったらいいのかわからなくなってしまいました。 jQueryではアニメーションのためのプラグインも多く存在し、 それぞれ複雑な動きをつけることができますが、 簡単な実装をする場合には、jQueryだけでも十分に行うことができるのだと気づきました！ そのため、今回はプラグインを一切利用せずに、 スクロール中に指定した要素が出現したら処理を実行する方法をご紹介したいと思います 内容はとても初学者用となっています、どなたかのお役に立てたら嬉しいです。 また、より良いやり方がございましたら、コメントお待ちしております。 今回行う実装 始めはhelloという言葉が見えていますが、 スクロールしていくとzoominという言葉が出てきます。 zoominが画面の半分まできたところで ふわっと浮かび出るズームインのアニメーションを実装しています。 使用するもの Animate.css jQuery Animate.cssとはdivなどにあらかじめ用意されたクラスを設定するだけで アニメーションを適用させることが出来るスタイルシートです。 jQueryとはJavaScriptでできることを、 より簡単な記法で実現できるようにされたJavaScriptライブラリの一種です。 それぞれ、リンク先に公式サイトを貼りましたので参考にしてください。 実装方法 まず、Animate.cssを読むと要素のクラス名に2つの名前をつけることで、 好きなアニメーションが行えるとあります！ 今回はズームインを実装したいので、 「animate_animated」「animate_zoomIn」という2つがクラス名に必要ということになりますね。 それを踏まえて、下記のコードで実装しましたのでご覧ください。 HTML test.html <!DOCTYPE html> <html> <head> <!-- 下記でjQueryを読み込む --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="test.js" type="text/javascript"></script> <!-- 下記でAnimate.cssを読み込む --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <script src="test.css" type="text/css"></script> </head> <body> <div class="text">hello</div> <!-- クラス命名に注意 --> <div class="animate__animated">zoomin</div> </body> </html> ※今回はCDNでAnimate.css、jQueryの２つとも読み込みましたが、自分にあった方法で行ってください。 zoominには本来、「animate_animated」「animate_zoomIn」という2つのクラス名が必要ですが 2つ付けてしまうと、ページが読み込まれた時点で処理してしまいます。 （スクロールする前にズームインしてしまう） スクロールしたときに処理されたいので、ここでは1つだけ付けます。 CSS test.css .text { font-size: 200px; margin: 500px; } .animate__animated { font-size: 200px; margin: 500px; /* 下記がアニメーションに必要なコード */ visibility: hidden; opacity: 0; transition: 1s; } /* jQueryによって追加されるコード */ .animate__zoomIn { visibility: visible; opacity: 1; } スクロールのアニメーションが目的のため、フォントサイズなどはとても適当です、、、すみません（笑） ご自身のcssに必要なコードのみコピーなど行ってください。 ページが読み込まれたときにはzoominの文字が見えないように設定し、 スクロールしたら、文字が現れるようにanimate_zoominで設定しておきます。 jQuery test.js $(window).on('scroll', function (){ var animate = $('.animate__animated'); var zoomIn = 'animate__zoomIn'; animate.each(function () { var animateOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); // 画面の半分に表示されたら、クラスを追加する if(scrollPos > animateOffset - wh + (wh / 2) ){ $(this).addClass(zoomIn); } }); }); ここでは、zoominの文字が画面の半分に表示されたら、 animate__zoomInのクラス名を追加する実装を行っています。 これを行うことで、後からクラス名が追加され、 スクロールして要素が表示されたらアニメーションを開始するよう実装できました。 jQueryの詳しい書き方などは検索したら、たくさん出てくるのでそちらを参考にしてください。 最後に これからも学習を続けて、プラグインの紹介などもできたらと考えています。 ご覧いただき、ありがとうございました。 参考 animate.css Animate.cssで遊んでみた
はじめに コメントアウトの方法をよく忘れるのでまとめておきます こちら[1][2]を参考にさせていただきました。 2021/6/13追記 コメントで指摘されたHTMLのコメントアウトについて修正しました。 コメントアウト 言語 1行コメントアウト 複数行コメントアウト HTML <!–- コメント -–> 左と同じ CSS /* コメント */ 左と同じ javascript //コメント /* コメント*/ JSX {//コメント} {/* コメント*/} おわりに HTMLとCSSのコメントアウトめんどくさい。 それではまた。 参考文献 [1]:【HTML】コメントアウトの書き方！注意点や便利な使い方も紹介 [2]:今更聞けない JSX のコメントアウトの構文
どうも7noteです。Twitterの広告で、画像を横に並べて一枚ずつスライドできるスライドショーを見かけたので、同じようなものをCSSで再現していきます。 ソース index.html <div class="box"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> </div> style.css .box { width: 300px; /* 適度な幅を指定 */ height: 300px; /* 適度な高さを指定 */ scroll-snap-type: x mandatory; /* スクロールスナップの指定 */ overflow-x: scroll; /* はみ出た部分をスクロールできる要素にする */ display: flex; /* 要素を横並びにする */ } .box section { scroll-snap-align: start; /* スクロールスナップの指定 */ width: 200px; /* 適度な幅を指定 */ height: 200px; /* 適度な高さを指定 */ text-align: center; /* 文字を左右中央にするため */ line-height: 200px; /* 文字を上下中央にするため */ flex: none; /* 自動伸縮をさせない */ } .box section + section { margin-left: 10px; /* 要素間に余白をとる */ } .box section:nth-of-type(even) { background: #ccc; /* 偶数番の背景色 */ } .box section:nth-of-type(odd) { background: #aaa; /* 奇数番の背景色 */ } 解説 JavaScript不使用で作ります。 scroll-snap-type: x mandatory;が今回のキーになるプロパティです。 これを指定することで、要素の左端に合わせてスクロール量を自動的に調整することができます。 あとは装飾的なCSSばかりですが、flexboxを使った横並びと、nth-childで色分けをして見やすくしたら完成です。 まとめ 身近にあるものの作りをどうやって作るかは普段から意識しています。 こういうものを作りたいと言われた時に、即答で「できますよ。」と答えられるとカッコいいから。 でもただ単純に新しい技術を身につけてみたいという欲が強いだけかもしれないです。 きっとこの記事を読んでいる方にもそういう方が多いのかなと思いますのでぜひほかの記事も読んでみてください。実用的なことからしょうもないCSSまでいろいろ書いています↓ 参考： https://qiita.com/drafts/eeba93e0275d8419f50b/edit https://www.mitsue.co.jp/knowledge/blog/frontend/202102/02_1740.html https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
CSSで要素を左右中央よせする方法 左右の中央寄せ 左右の中央寄せは「インライン要素」と「ブロック要素」で中央よせする方法が異なります。 インライン要素の左右中央寄せ インライン要素の左右の中央寄せは、中央寄せしたいインライン要素の親要素（divなど)にtext-align:center;を指定すると中央寄せになります。 例 index.html <div class="center"> <span>あいうえお</span> </div> この場合は「あいうえお」を中央とせしたいので、class="center"にtext-align:center;を指定します style.css .center { text-align:center; } そのテキストが含まれているブロック要素に対してtext-align:center;を指定してあげると中央寄せにすることができます。 ブロック要素の中央寄せ ブロック要素の左右の中央寄せは、ブロック要素の左右のmarginをautoにすることで中央寄せにすることができます。 左右のだけの中央寄せなのでmargin:0 auto;と指定します。 index.html <div class="center"> <span>あいうえお</span> </div> style.css .center { margin:0 auto; } と指定します。 これでもいいのですが、この指定だと親要素は中央寄せになってくれますがその中の「あいうえお」は親要素に対して中央寄せになってくれません。 そこで先ほど説明したtext-align:center;も指定します。 style.css .center { text-align:center; margin:0 auto; } このように指定すると、中央に寄せられた親要素の中でさらに左右中央に寄せることができます。 ここで注意したいのが、margin:0 auto;は指定した要素の親要素に対して中央寄せになることです。 中央寄せした要素の親要素が左寄せまたは右寄せになっていた場合はその分左または右に寄った状態となります。 画面の真ん中に表示したいけどできない時は、親要素も中央に寄せましょう。 それか、親要素の横幅をwidth:100%に指定する方法もあります。
