- 投稿日：2021-05-03T21:34:21+09:00
【初心者でもわかる】CSSで鏡文字にする方法
どうも7noteです。鏡文字の作り方を解説 CSSで鏡文字を作る方法を解説します。 文字を反転させれば鏡文字になるので、反転させるためにtransformを使います。 transformの中でも2つの方法で反転を再現することができます。 鏡文字の作り方 ・scaleX()を使った方法 style.css span.mirror { transform: scaleX(-1); display: inline-block; } ・rotateY()を使った方法 style.css span.mirror { transform: rotateY(180deg); display: inline-block; } 解説 ※インライン要素には効かないので注意！ 左右に反転させるにはscaleもしくはrotateを使います。 scaleは本来大きさを変更するものですが、値がマイナスになると反転するので等倍のマイナス値を指定することで反転ができます。 rotateは回転をさせるときに使います。y軸(縦)を中心に回転させ、文字を反転させます。 まとめ ２つの方法を紹介しました。 どちらの方法でも簡単なので、好きな方でいいかなと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-05-03T20:54:47+09:00
カルーセル（HTML,CSS,jQueryで作成）
webページ作成でよく使用するカルーセルをコピペで作成できるようにコードをここにまとめます。 完成イメージ フォルダ構成 フォルダ構成は下のようにしています。 root/ ├ index.html ├ styles.css ├ main.js └ img ├ carousel1.jpg ├ carousel2.jpg └ carousel3.jpg 下のHTML、CSS、JavaScriptのコードをそのままコピペし、画像のURLを変えればそのまま使えます。 コード HTML HTML <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSSの読み込み--> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="carousel"> <!--写真表示部分--> <ul class="carousel-area"> <li class="carousel-list"> <img class="carousel-img" src="img/carousel1.jpg" alt="carousel1"> </li> <li class="carousel-list"> <img class="carousel-img" src="img/carousel2.jpg" alt="carousel2"> </li> <li class="carousel-list"> <img class="carousel-img" src="img/carousel3.jpg" alt="carousel3"> </li> </ul> <!--「次へ」「前へ」移動する矢印--> <div class="arrow-wrap"> <div class="arrow-left"> <button class="arrow-btn js-btn-back" type="button"></button> </div> <div class="arrow-right"> <button class="arrow-btn js-btn-next" type="button"></button> </div> </div> <!--ページネーション--> <div class="pagination"> <span class="pagination-circle target"></span> <span class="pagination-circle"></span> <span class="pagination-circle"></span> </div> </div> <!--jQueryの読み込み--> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <!--javascriptファイルの読み込み--> <script src="./main.js" type="text/javascript"></script> <body> </html> CSS CSS * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } body { overflow: hidden; } button { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; vertical-align: middle; color: inherit; font: inherit; border: 0; background: transparent; padding: 0; margin: 0; outline: none; border-radius: 0; } .carousel { width: 600px; height: calc(600px * 0.5625); margin: 0 auto; position: relative; overflow: hidden; } .carousel .carousel-area { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; } .carousel .carousel-area .carousel-list { width: 600px; height: calc(600px * 0.5625); margin-right: 30px; background-size: cover; background-position: center; background-repeat: no-repeat; } .carousel .carousel-area .carousel-list:nth-child(1) { background-image: url(./img/carousel1.jpg); } .carousel .carousel-area .carousel-list:nth-child(2) { background-image: url(./img/carousel2.jpg); } .carousel .carousel-area .carousel-list:nth-child(3) { background-image: url(./img/carousel3.jpg); } .carousel .carousel-area .carousel-list .carousel-img { width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); margin: -1px; padding: 0; overflow: hidden; position: absolute; } .carousel .arrow-wrap { width: 96%; height: 100%; margin: 0 auto; position: absolute; top: 0; left: 2%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .carousel .arrow-wrap .arrow-btn { width: 48px; height: 48px; background-color: rgba(113, 135, 245, 0.8); border-radius: 50%; -webkit-transition: .2s; transition: .2s; } .carousel .arrow-wrap .arrow-btn:focus { -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8); } .carousel .arrow-wrap .arrow-btn:hover { background-color: #334fd8; -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8); } .carousel .arrow-wrap .arrow-left { position: relative; } .carousel .arrow-wrap .arrow-left button:before { content: ""; width: 10px; height: 10px; border-top: 2px solid #fefefe; border-left: 2px solid #fefefe; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-30%, -50%) rotate(-45deg); transform: translate(-30%, -50%) rotate(-45deg); } .carousel .arrow-wrap .arrow-right { position: relative; } .carousel .arrow-wrap .arrow-right button:before { content: ""; width: 10px; height: 10px; border-top: 2px solid #fefefe; border-left: 2px solid #fefefe; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-70%, -50%) rotate(135deg); transform: translate(-70%, -50%) rotate(135deg); } .carousel .pagination { width: 16%; margin: 5% auto 0; position: absolute; bottom: 3%; left: 42%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .carousel .pagination .pagination-circle { width: 10px; height: 10px; border: 1px solid #333; border-radius: 50%; background-color: rgba(10, 10, 10, 0.5); } .carousel .pagination .pagination-circle.target { background-color: rgba(10, 10, 100, 0.8); } @media screen and (max-width: 600px) { .carousel { width: 300px; height: calc(300px * 0.5625); } .carousel .carousel-area .carousel-list { width: 300px; height: calc(300px * 0.5625); margin-right: 0; } } JavaScript JavaScript $(function(){ // スライドリストの合計幅を計算⇒ＣＳＳでエリアに代入 let width = $('.carousel-list').outerWidth(true); //.carouse-listの１枚分の幅 let length = $('.carousel-list').length; //.carousel-listの数 let slideArea = width * length; //レール全体幅＝スライド１枚の幅 × スライドの合計数 $('.carousel-area').css('width', slideArea); //カルーセルレールに計算した合計幅を指定 //スライド現在値と最終スライド let slideCurrent = 0; //スライドの現在値（１枚目のスライド番号としての意味も含む） let lastCurrent = $('.carousel-list').length - 1; //スライドの合計数＝最後のスライド番号 //スライドの切り替わりを「changeslide」として定義 function changeslide(){ $('.carousel-area').stop().animate({ //stopメソッドを入れることでアニメーション１回毎に止める left: slideCurrent * -width //代入されたスライド数 × リスト１枚分の幅を左に動かす }); //ページネーションの変数を定義（＝スライド現在値が必要） let pagiNation = slideCurrent + 1; //nth-of-typeで指定するため0に+1をする $('.pagination-circle').removeClass('target'); //targetクラスを削除 $(".pagination-circle:nth-of-type(" + pagiNation + ")").addClass('target') //現在のボタンにtargetクラスを追加 }; //-----一定時間毎に処理実行する関数「startTimer」を定義 let Timer; function startTimer(){ Timer = setInterval(function(){ if (slideCurrent === lastCurrent){ slideCurrent = 0; changeslide(); }else{ slideCurrent++; changeslide(); }; }, 3000); }; function stopTimer(){ clearInterval(Timer); //crearInterval:setIntervalで設定したタイマーを取り消す }; startTimer(); //-----------ボタンクリック時の「changeslide」関数を呼び出し---------------- //NEXTボタン $('.js-btn-next').click(function(){ stopTimer(); startTimer(); if (slideCurrent === lastCurrent){ //現在のスライドが最終スライドの場合 slideCurrent = 0; changeslide(); //スライド初期値の値を代入して関数実行（初めのスライドに戻す） }else{ slideCurrent++; changeslide(); //そうでなければスライド番号を増やして（次のスライドに切り替え）関数実行 }; }); //BACKボタン $('.js-btn-back').click(function(){ stopTimer(); startTimer(); if (slideCurrent === 0){ //現在のスライドが初めのスライドの場合 slideCurrent = lastCurrent; changeslide(); //最後のスライド番号を代入して関数実行（最後のスライドに移動） }else{ slideCurrent--; changeslide(); //そうでなければスライド番号を減らして（前のスライドに切り替え）関数実行 }; }); }) 蛇足：CSS(SCSSバージョン) ※下のコードは不要です 下のコードは不要ですが、上のCSSコードは下のSCSSコードをコンパイルしたものですので、一応このコードもこちらに記載しておきたいと思います。 CSS *{ margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body{ overflow: hidden; } button{ cursor: pointer; -webkit-appearance: none; -moz-appearance: none; vertical-align: middle; color: inherit; font: inherit; border: 0; background: transparent; padding: 0; margin: 0; outline: none; border-radius: 0; } .carousel{ width: 600px; height: calc(600px * 0.5625); margin: 0 auto; position: relative; overflow: hidden; .carousel-area{ // width: 3150px; height: 100%; display: flex; position: absolute; .carousel-list{ width: 600px; height: calc(600px * 0.5625); margin-right: 30px; background-size: cover; background-position: center; background-repeat: no-repeat; &:nth-child(1){background-image: url(./img/carousel1.jpg)}; &:nth-child(2){background-image: url(./img/carousel2.jpg)}; &:nth-child(3){background-image: url(./img/carousel3.jpg)}; .carousel-img{ width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); margin: -1px; padding: 0; overflow: hidden; position: absolute; } } } .arrow-wrap{ width: 96%; height: 100%; margin: 0 auto; position: absolute; top: 0; left: 2%; display: flex; justify-content: space-between; align-items: center; .arrow-btn{ width: 48px; height: 48px; background-color: rgba(113, 135, 245, 0.8); border-radius: 50%; transition: .2s; &:focus{ box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8); } &:hover{ background-color: rgb(51, 79, 216); box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8); } } .arrow-left{ position: relative; button:before{ content: ""; width: 10px; height: 10px; // cursor: pointer; border-top: 2px solid #fefefe; border-left: 2px solid #fefefe; position: absolute; top: 50%; left: 50%; transform: translate(-30%, -50%)rotate(-45deg); } } .arrow-right{ position: relative; button:before{ content: ""; width: 10px; height: 10px; border-top: 2px solid #fefefe; border-left: 2px solid #fefefe; position: absolute; top: 50%; left: 50%; transform: translate(-70%, -50%)rotate(135deg); } } } .pagination{ width: 16%; margin: 5% auto 0; position: absolute; bottom: 3%; left: 42%; display: flex; justify-content: space-around; .pagination-circle{ width: 10px; height: 10px; border: 1px solid #333; border-radius: 50%; background-color: rgba(10, 10, 10, 0.5); &.target{ // background-color: rgba(10, 10, 10, 0.8); background-color: rgba(10, 10, 100, 0.8); } } } } @media screen and (max-width: 600px){ .carousel{ width: 300px; height: calc(300px * 0.5625); .carousel-area{ // width: 1500px; .carousel-list{ width: 300px; height: calc(300px * 0.5625); margin-right: 0; } } } } 参考サイト
- 投稿日：2021-05-03T20:16:10+09:00
div要素とspan要素の違い
span要素やdiv要素は意味をもたない要素であるが、どんな違いがあるのか、復習がてらまとめてみました。 この２つは実務上ではcssで装飾したいときなどに使われます。そしてclass属性をつけることができます。class属性とはその要素が所属するグループ名のことで自由につけることができます。 まず例として <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>これはテスト</title> <style> .red{ color: red; } .blue{ color: blue; } </style> </head> <body> <p>私はただいま<span class ="red">html</span>と<span class ="blue">css</span>を学習中です</p> </body> </html> 結果 このようにclass属性を定義してcssで色をつけることができます。 ではdivとの違いは何かというとまず１つ目は改行がされるかどうか、ということです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>これはテスト</title> </head> <body> これは<div>div</div>要素です <hr> これは<span>span</span>要素です </body> </html> このようにdiv要素は改行されますが、span要素は改行されません。 もう１つはdivの中にspanは書けますが、spanの中にdivは書けないので注意です。 OK <div><span>テスト</span></div> NO <span><div>テスト</div></span> まとめると div要素とspan要素はどちらも意味をもたない要素 div要素は改行されるがspan要素は改行されない div要素は中にspan要素を書けるがspan要素の中にdiv要素は書けない
- 投稿日：2021-05-03T19:30:25+09:00
JavaScriptでテキスト入力チェック方法
JavaScriptでテキスト入力チェック方法です。 今回はテストプログラムでテストしています。 <!DOCTYPE html> <html lang="ja"> <style> body { padding:50px; background-color: greenyellow; } body #title { color:red; font-size : 50px; } body #name { width:200px; } body #mail { width:400px; } body #button1 { background-color: blue; } </style> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1 id = "title">送信フォーム</h1> <form action = "index4.html" method="POST"> Name:<input type="text" id="name"><br> Mail:<input type="email" id="email"><br> Detail:<textarea id="detail" value="detail" cols="50" rows="3" maxlength="150"></textarea></br> year：<select id = "year"> <option value="2021" id="2021">2021年</option> <option value="2022" id="2022">2022年</option> <option value="2023" id="2023">2022年</option> </select> month:<select id = "month"> <option value="1" id="1">1月</option> <option value="2" id="2">2月</option> <option value="3" id="3">3月</option> <option value="4" id="4">4月</option> <option value="5" id="5">5月</option> <option value="6" id="6">6月</option> <option value="7" id="7">7月</option> <option value="8" id="8">8月</option> <option value="9" id="9">9月</option> <option value="10" id="10">10月</option> <option value="11" id="11">11月</option> <option value="12" id="12">12月</option> </select> <input type="button" id="button1" value="送信" onclick="func1()"> </form> <div id="div1"></div> <script language="javascript" type="text/javascript"> //変数の定義 const name = document.getElementById('name'); const mail = document.getElementById('email'); const detail = document.getElementById('detail'); const button1 = document.getElementById('button1'); //入力チェック処理 const func1 = () => { if((name.value.length == 0 ) && (mail.value.length == 0 ) && (detail.value.length == 0 )){ alert('名前、メールアドレス、詳細が入力されていません。'); } else if ((name.value.length == 0 ) && (mail.value.length == 0 )){ alert('名前、メールアドレスが入力されていません。'); } else if ((mail.value.length == 0 ) && (detail.value.length == 0 )){ alert('メールアドレス、詳細が入力されていません。'); } else if ((name.value.length == 0 ) && (detail.value.length == 0 )){ alert('名前、詳細が入力されていません。'); } else if (name.value.length == 0){ alert('名前が入力されていません。'); } else if (mail.value.length ==0){ alert('メールアドレスが入力されていません。'); } else if (detail.value.length ==0){ alert('詳細が入力されていません。'); } else { if (window.confirm('送信してもよろしいですか？')) { div1.innerText = `Name:${name.value}、Mail:${mail.value}、Detail:${detail.value}、year:${year.value}、month:${month.value}`; } } } </script> </body> </html> length=0の部分でテキストに文字が入っていない場合はアラートメッセージで確認を促すようにしています。
- 投稿日：2021-05-03T15:46:09+09:00
transitionプロパティを理解するために基礎のbuttonを作ってみた
transitionを使ってbuttonにアニメーションをつけてみる 完成版 本当は、アニメーションも付いた画像を掲載したかったが、方法が解らなかったので画像のみ掲載しました。 掲載方法教えてあげてもいいぜ！という心お優しい方ご連絡お待ちしております 目標：transitionの基礎を理解するため テキストエディターはVSCode. ↓下記の方のtransitionの説明を参考にしました @7968様 とても解りやすかったです！！ 今回はcodePenで書いてみました♪ ※head部分は省略 See the Pen qBReXEr by トモゑ☛Web作成の37? (@swan2pink) on CodePen. 詳しくcodeを書いてみます .button { cursor: pointer; outline: none; font-size: 30px; width: 200px; height: 100px; background: pink; color: white; border-radius: 10px/10px; box-shadow: 10px 10px 10px #706b6b; transition-property: transform, background, box-shadow, color; ※ transition-duration: 2s; ※ } .button:hover { ※ box-shadow: 3px 3px 3px #8a7070; transform: scale(.5); background: red; color: #8a7070; } transitionは『変化前』 と 『変化後』のcodeの両方を書いてあげます 『変化前』 と 『変化後』の中間を補完する役割をもっています transition-property は、変化が摘要されるcssのプロパティを指定します。 今回だと、 transform, background, box-shadow, color です。 transition-duration: 2s; で、変化が始まって終わるまでの時間を指定してます 『変化後』にどうするかは .button:hoverで指示してます。 ちなみに、transform: scale(.5); は、大きさを変形させるプロパティで、大きさ０．５倍にしています。 大きくしたい場合は scale(2)とかに変更すれば良いと思います！ まとめ 今回は、transitionの基本について書いてみました。 引き続き応用にもチャレンジしていきたいと思います 今回は以上です！ ありがとうございます
- 投稿日：2021-05-03T00:06:42+09:00
Railsでフォームを作成していたときに知った２点
はじめに プログラミング初学者のため、自分の理解できている範囲内で言語化しています。 何か間違っている情報や改善点などありましたら、コメントいただけますと幸いです。?♂️ 今回はRailsでフォームを作るときにハマったことを紹介しています。 1 エラーメッセージ 表示によるレイアウトの形崩れ バリデーションエラーの文言を表示したときに、元のレイアウトが崩れてしまう問題が発生、、、 原因: field_with_errorsクラスを持つdivタグの出現 エラーメッセージを表示するときは、検証するとわかるが、field_with_errorsクラスのdivが現れる。 これによって形崩れしていた? 解決策 他にもあるが、ここではCSSに追記をするだけで良い方法を紹介 .field_with_errors { display: contents; } これを追記するだけ。 2 text-areaの縮小拡大について text-areaはデフォの状態では、横と縦にドラッグすることで縮小や拡大が可能だが、 今回の実装の際には左右の縮小はいらなかったので、その抑制方法の紹介 方法 textarea{ resize: vertical; } これで横の縮小を抑制できる 横方向 → vertical 縦方向 → horizontal 全方向 → both デフォでなっている 縮小無 → none 参考文献