はじめに 今回は下記の画像のように、 ひとつのページで複数の設問にラジオボタンで答えていただくページを作成する際に Bootstrapのラジオボタンを使用する場合の注意点について記述させていただきます。 Bootstrapのラジオボタンは下記URLへ飛んでいだたければ使用できます！ （ https://getbootstrap.jp/docs/5.0/forms/checks-radios/ ） また、Bootstrapの使い方についてご不明な方は、 別の記事をご覧いらだければと思います。 開発環境 Bootstamp バージョン５ Ruby on Rails バージョン2.6.5 ラジオボタンのはめ込み Bootstrapのラジオボタンのページを飛んでいただき、下記の記述をラジオボタンもはめ込みたいところに記述します。 （ ラジオボタンのURL : https://getbootstrap.jp/docs/5.0/forms/checks-radios/ ） <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label> </div> これでこのようなラジオボタン設置が可能です。 ラジオボタンをひとつのページで複数設定する場合 先程のコードを記述することでラジオボタンの設置は可能です。 ですが、ひとつにページで複数のラジオボタンを設置する場合は、 そのまま二つ目以降をそのまま記述してしまうと問題が発生します。 その問題とは、1ページで選択できるラジオボタンがひとつだけになってしまうという状況が起こります。 例）下記画像の場合、、、 設問１で回答Dと答え、設問２で回答Bを選択したとき、 設問１の回答Dの回答は消えてしまい、設問２の回答のみが残ってしまいます。 問題を解決する方法 こちらの問題を解決する方法は、２つ目以降のラジオボタンを設置する際に、 <input>タグのname属性の名前を変更します！ 設問１ <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label> </div> 設問２では <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault-1" ※ここを変える id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault-1" ※ここを変える id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label> </div> こうすることで、設問の数だけラジオボタンを選択することが可能となります！
はじめに 絶賛HTMLとCSSを復習中！ 今回は Saasという言語を学び始めたのでアウトプットします Saasとは 公式サイト Saasとは「Syntactically Awesome StyleSheet」の略で Syntactically（文法的に） Awesome（最高・素晴らしい） StyleSheet（スタイルシート） という言語です。 公式抜粋 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. 略 Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。 めちゃくちゃ凄そう！ 自分なりに簡単にまとめてみると・・・ CSSをより便利に記述できるようにしたもので、cssでいっぱい記述するよりも完結に記述ができ、関数を設定してコードを再利用したりできます。 しかし、ブラウザ上ではSaasは読み込む事は出来ません。 そのため必ずSaasからCSSに変換してブラウザー上に反映させます。 変数 CSSの場合、 style.css #container { color: white; } .btn { color: white; } CSSでは変数は定義出来ないがSaasの中では定義する事ができます。 共通の数値や色の指定などに便利だと思います。 style.scss //色を定義 $cWhite: white; #container { color: $cWhite; } .btn { background-color: $cWhite; } ネスト 入れ子という言葉はrailsでよく使いました。 CSSでは1つのブロックの中に他のブロックを含める事は出来ませんが、Saasの中では異なるブロックを含める事ができます。 本来のCSSの記述 style.css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } Saasの場合 style.scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 上記のように、Sassではネストで書くことができ、コードの可読性が向上します。 終わり もっともっと良いメリットがあると思いますが、これから学習していきます！
私がプログラミングの勉強をしたいと思うようになった理由の１つに、 世の中にあるものを、私も自分の手で作れるようになりたいと思ったからです。 とりあえず簡単な基礎学習を終えた段階で、 かねてより作ってみたいと思っていたものを作成してみました。 サイズや文字の大きさが全く違うけれど、今は良しとしておきます… また理解が増えたときに修正をできたらと思います。 参考画像 私の作成したもの
久しぶりにフロントエンド周りです。 ボタンを押すとアコーディオンが開く、というよくある実装をCSSアニメーションを用いて実装します。 これが結末 .foo max-height: 0 padding: 0 20px transition: max-height 0.3s, padding 0.3s overflow: hidden &.is-open max-height: 100vh padding: 20px つまずきやいポイント1: heightとtransition 最初に思いつきそうなのが、heightの高さを可変にして、transitionを使おう、というものだと思います。 .foo height: 0 transition: height 0.2s &.is-open height: auto 全くうまくいっていないのがわかるかと思います。 これは、transitionがheightをサポートしていないからです。 ではどうすれば良いかと言いますと、いくつかの方法がありますが今回はmax-heightを使用する方向で実装します。 max-heightであればtransitionが効きます。 .foo max-height: 0 transition: max-height 0.2s overflow: hidden; &.is-open max-height:100vh // ここは適宜変更ください つまづきやすいポイント2: display: none display:none から display: blockへの変化などは、途中推移がないため当然transitionが効きません。 上記のようにmax-heightで指定してもうまくいかないので気をつけましょう。 max-hegihtとoverflowでコントロールしていれば、概ねdispalyでコントロールする必要はないパターンが多いかと思います。 どうしても非表示を行いたいケースではopacityを使います。 この場合、伸び縮みだけではなく「ふわっとでる」ようになることに注意してください。 // ダメな例 .foo display: none max-height: 0 transition: max-height 0.2s &.is-open display: block max-height: 100vh // これならいける .foo display: none transition: max-height 0.2s max-height: 0 opacity: 0 &.is-open display: block max-height: 100vh opacity: 1 つまづきやすいポイント2: padding max-heightを調整したのに、開いていない状態でも高さが残ってしまう...なんて場合は、paddingを考慮し忘れているかもしれません。 .foo max-height: 0 padding: 20px transition: max-height 0.2s overflow: hidden &.is-open max-height:100vh ↓閉じた状態にもかかわらずpaddingが残っているとこうなる ではpaddingを全部消せば良いのかというと、左右paddingをショートハンドなどで巻き込んでしまっていると、 徐々に左右のpaddingが出てしまうという変な動きになってしまいます。 // 左右のpadding変な動き .foo max-height: 0 padding: 0 transition: max-height 0.2s, padding 0.2s // ここにpadding-left・padding-rightも入っている overflow: hidden &.is-open max-height:100vh padding: 20px 解決方法としては、 transitionでの指定を律儀にpadding-top: ..padding-bottom: ..とする 開いていない状態の上下paddingだけを削る の二つがありますが、今回は後者で行きます。 .foo max-height: 0 padding: 0 20px transition: max-height 0.3s, padding 0.3s overflow: hidden &.is-open max-height: 100vh padding: 20px これで実現したい動きを実装できました?
どうも7noteです。某人気ゲーム「ゼルダ○伝説」に出てくるルピーをCSSだけで作る 私事ですが、普段からゲームは結構好きで、京都に本社のある花札を作っていたことで有名な大手ゲーム会社のゲームも昔からよく遊んでました。 その中でよく遊んでいたゲームの中に「ゼルダ○伝説」という種類のゲームがあるのですが、 そのゲーム無いで出てくるルピーという通貨のお金をCSSで再現してみました。 （※ゲームタイトルは一応伏せ字しておきます。） ちなみにインドルピーではないので、インドルピーだと思った方はブラウザバックボタンを押して前のページにお戻りください。 ゲーム内で出てくるルピーは宝石みたいできれいなので、応用すれば他のことにも使えるかも？ ソース index.html <div class="rupee"> <div class="base"></div> <div class="center"></div> </div> style.css .rupee { width: 100px; /* 全体の基準になります。 */ height: 200px; /* 横幅の2倍 */ position: relative; } .base { width: 100%; height: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, #287e27 50%, #1f511e 50%); margin: auto; } .base::before, .base::after { content: ""; width: 0; right: 0; transform: rotate(45deg); position: absolute; left: 0; right: 0; margin: auto; } .base::before { border-top: 35px solid #23361a; /* 横幅の35%の値 */ border-right: 35px solid #23361a; border-bottom: 35px solid #9cf859; border-left: 35px solid #9cf859; top: -35px; } .base::after { border-top: 35px solid #2d9d2f; /* 横幅の35%の値 */ border-right: 35px solid #2d9d2f; border-bottom: 35px solid #1e3a14; border-left: 35px solid #1e3a14; bottom: -35px; } .center { width: 60%; height: 30%; background: #26a824; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .center::before, .center::after { content: ''; width: 0; height: 0; position: absolute; left: 0; right: 0; margin: auto; } .center::before { border-top: 0 solid transparent; border-left: 30px solid transparent; /* 横幅の30% */ border-bottom: 30px solid #26a824; border-right: 30px solid transparent; top: -30px; } .center::after { border-top: 30px solid #26a824; /* 横幅の30% */ border-left: 30px solid transparent; border-bottom: 0 solid transparent; border-right: 30px solid transparent; bottom: -30px; } 解説 作り方は上のソースをまるまるコピーしてください。 borderなど一部はpx指定の必要があるので、全体の横幅を基準としてコメントの%分のpxを指定してください。 そして作り方の解説としては大きく3つのパーツに分かれているので、それぞれで解説します。 パーツ① 「ベース」 これが左右になる部分です。このベースを作ります。 cssは「.base」となっている部分ですね。 パーツ② 「上下」 ベースに擬似要素で上下部分も作ります。 cssは「.base::before」と「.base::after」です。 パーツ③ 「中心部」 最後に中心の6角形を作ります。 cssは「.center」です。 6角形の作り方は過去に記事を書いているので、詳しく知りたい方は以下の記事もご覧ください。 まとめ 上で解説した3つのパーツをすべて重ねることで、ルピーをCSSだけで再現することができます。 もっとこだわりを入れるのであれば、 若干グラデーションをかけてもっと立体感を出すこともできるかもしれませんね。 気が向いたときに違う色でも作ってみたいなと。紫ルピーの透明感とかは再現しようと思うと結構苦戦しそう・・・ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
はじめに CDNからスクリプトを読み込むようにしてて、CDNに障害が発生した場合 複数候補指定できたら解決するんじゃね？ というハナシ ざっくり方法 スクリプトの候補を複数準備しておく 第１候補から繰り返す 1. 候補が存在するか確認する 2. 存在する場合、SCRIPTタグとして追加して終了 サンプル 構成 localhost:8082 │ index.html ├─test1 ├─test2 │ hello.js └─test3 hello.js URL http://localhost:8082/index.html 本体 http://localhost:8082/test1/hello.js 第１候補のスクリプト（存在しない） http://localhost:8082/test2/hello.js 第２候補のスクリプト http://localhost:8082/test3/hello.js 第３候補のスクリプト ソース hello.js const hello = () => { alert("Hello, world!"); } "Hello, world!"というダイアログを表示するhello関数のみ！ index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>スクリプトを読み込むサンプル</title> <script> /** * スクリプトを読み込む * @param {string} src 読み込むソース * @return 読み込み結果 */ const loadScript = (src) => { // ソースの存在チェック const request = new XMLHttpRequest(); request.open("GET", src, false); request.send(null); // ソースが存在した場合、スクリプトタグを追加 if (request.status === 200) { let head = document.getElementsByTagName("head")[0]; let script = document.createElement("script"); script.src = src; head.appendChild(script); return true; } return false; }; // スクリプトのソース一覧 const srcArray = [ "http://localhost:8082/test1/hello.js", "http://localhost:8082/test2/hello.js", "http://localhost:8082/test3/hello.js" ]; // ソースの配列を先頭から、読み込めるまで読み込んでいく for (let i = 0; i < srcArray.length; i++) { if (loadScript(srcArray[i])) { console.log("Loaded script: " + srcArray[i]); break; } } window.onload = function () { hello(); }; </script> </head> <body> <button onclick="hello();">hello</button> </body> </html> 表示時とhelloボタン押下時に、読み込んだスクリプトのhello関数を実行する サンプルを実行 画面 表示時 "Hello, world!"というダイアログが表示されている helloボタン押下時 "Hello, world!"というダイアログが表示されている コンソール １行目のワーニングは、XMLHttpRequestを使って同期でリクエストを送るのは非推奨なので表示 ２行目のエラーは、第１候補のスクリプトが存在しないため表示 ３行目のログは、第２候補のスクリプトが読み込まれたという表示 かんそう 思いつきで書いたので、サンプルをそのまま使うのは厳しい… 折角なのでメモの代わりに記事として残しておきます。
「px」 →絶対単位。 親要素の影響を受けずに、どんな状況でも指定したpxになる。 ユーザー操作による文字サイズの拡大／縮小に対応できなかったり、タブレットやスマートフォンなどの高解像度のディスプレイで表示をした場合、端末ごとに見た目の文字サイズが異なって表示されたりする場合がある。 「em」 →相対単位。 親要素のフォントサイズを基準とする。 <div class="box"> <p class="text">テキストテキストテキスト</p> </div> html { font-size: 16px; /* 1em = 16pxとなる。 */ } .box { font-size: 2em; /* 16px × 2 = 32px */ } .text { font-size: 1.5em; /* 32px × 1.5 = 48px */ } 入れ子構造が深くなるとフォントサイズ指定がし辛くなる。 「rem」 →相対単位。 ルート要素（html）のフォントサイズを基準とする。 <div class="box"> <p class="text">テキストテキストテキスト</p> </div> html { font-size: 16px; /* 1rem = 16pxとなる。 */ } .box { font-size: 2rem; /* 16px × 2 = 32px */ } .text { font-size: 1.5rem; /* 16px × 1.5 = 24px */ } font-size: 62.5%;って何？ フォントサイズの単位にremを使いたい場合、htmlのフォントサイズが16pxのままだと分かりづらい。 html { font-size: 62.5%; } 16px（ブラウザの基本のフォントサイズ） × 0.625 = 10px htmlのフォントサイズが10pxになるので、 1rem = 10pxに設定することがきる。 こうすることによって計算がしやすくなる。 例） 10pxにしたい場合 = 1.0rem 16pxにしたい場合 = 1.6rem 36pxにしたい場合 = 3.6rem 補足 アクセシビリティ的にフォントサイズのpx指定はNGらしい
はじめに webページに画像が多い場合、lazysizesなど、画像を遅延させて読み込ませる時もあるかと思います。本記事ではlazysisesを用いた際に、ページ内スクロールがずれてしまう問題の対処法を書いておきます。また、ページ内スクロールに使うjsのコードは今回割愛します。 原因 lazysizesで画像を遅延読み込みさせると、読み込むまで元の画像の高さが取得できないので、href属性でスクロール先を設定しても、画像の高さがない分ずれてしまう。 解決策 表示させる画像とは別に、imgタグにダミーの画像を設定します。 表示させる画像と同じアスペクト比でダミー画像に高さを設定する。 ダミー画像に高さを設定するにはlazysizesの拡張プラグインdata-aspectratioを使用します。 では、順を追って解説します。 念のためにpictureタグのおさらい 解説の前に、lazysizesとpictureタグを組み合わせることも多いと思うので、pictureタグの使い方を記載しておきます。 <picture> <source data-srcset="sample-sp.png" media="(max-width: 500px)"> <img data-src="./sample-pc.png" class="lazyload"> </picture> lazysizesを使う場合、「src」と「srcset」にそれぞれ「data-」をつけます。 あとは、imgタグにlazyloadのクラスをつければOKです。 解決策 ①data-aspectratioの読み込み ②ダミー画像の設定 ③ダミー画像に高さを設定 ①data-aspectratioの読み込み lazysizesをダウンロードすると、 /lazysizes/plugins/aspectratio/ の中にls.aspectratio.min.jsがあるので、このファイルを読み込みます。 <picture> <source data-srcset="sample-sp.png" media="(max-width: 500px)"> <img data-src="./sample-pc.png" class="lazyload"> </picture> ========================= 省略 ============================== <script src="./js/lazysizes.js" ></script> <script src="./js/ls.aspectratio.min.js" ></script> これでlazysizesのプラグインファイルの読み込みはOKです。 手順③でダミー画像に高さをつけるので、そのときにこのファイルが必要になります。 ②ダミー画像の設定 ダミー画像はこちらの方の記事を引用しました。 1x1の最小GIF・PNGファイル（透過/base64） こちらからコードを借りて、imgタグにダミー画像を設定します。 ダミー画像はsrc属性に設定します。 <picture> <source data-srcset="sample-sp.png" media="(max-width: 500px)"> <img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="./sample-pc.png" class="lazyload"> </picture> src属性で先ほどコピーしたコードを貼り付けます。 これでダミー画像の設定は完了です。 ③ダミー画像に高さを設定 では、最後にダミー画像に高さをつけて、表示させたい画像が読み込まれてなくても高さを保てるようにします。 data-aspectratio属性を用いて、ダミー画像に高さを付けます。 data-aspectratio属性には表示したい画像のサイズ(横幅/高さ)を設定します。 例として、表示させたい画像が横幅×高さ=200×100であれば、data-aspectratio="200/100"と記述します。 <picture> <source data-srcset="sample-sp.png" media="(max-width: 500px)"> <img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="./sample-pc.png" data-aspectratio="200/100" class="lazyload"> </picture> これで、webページの下の方にある読み込まれていない画像にも高さが設定されるようになります。ページ内スクロールを実行すると、画像の高さが取得できているので、ずれることなく目的の箇所へスクロールできるようになります。 レスポンシブ対応 pictureタグを使った場合、PC、スマホで表示させたい画像の大きさが変わると思います。 その場合はsourceタグにもdata-aspectratioでスマホ用の画像の大きさを設定すれば大丈夫です。 例として、表示させたいスマホの画像が横幅×高さ=100×50の場合は、 <picture> <source data-srcset="sample-sp.png" data-aspect-ratio="100/50" media="(max-width: 500px)"> <img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="./sample-pc.png" data-aspectratio="200/100" class="lazyload"> </picture> このようにコードを書けば、スマホでもページ内スクロールが問題なく動きます。 おわりに 画像遅延読み込みさせると、ページ内スクロールがうまくいかず悩んだので、同じ境遇の方はぜひこの方法を試してみてください。
