要はIEやFirefoxでは非対応であり、iPhone Safariでも表示されないですよ、という話です。 cssのみでデザインされたスクロールバーを実装する際は注意が必要です。 実際のものをブラウザごとに見ていただくのが早いかと思います。 今回実装したスクロールバー デモページ：https://hojihoji.net/scrollBar/ ::-webkit-scrollbar で実装 スクロールバーの実装には::-webkit-scrollbarというcssを用いています。 cssのみでデザインされたスクロールバーを実装することができる便利なものです。 参考サイト：https://qiita.com/hibikikudo/items/ee1b913479bceddb654c 問題点 JavaScriptいらずで実装できるため、とても便利なものですが、 使用には慎重になった方が良いです。 なぜならIEやFirefoxでは非対応のため、 標準のスクロールバーが表示されてしまうからです。 せっかくデザインにこだわった実装なのに、意味がなくなります。 ios13で表示されない？ またiPhone Safariで表示されない(標準のものが表示されます)という問題もあります。 ::-webkit-scrollbarは、webkit系のブラウザには対応しています。 参考サイト：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#Browser_compatibility ですのでiPhone Safariでも表示されるはずなのですが、 iOS13から表示されなくなったようです。 参考サイト： https://qiita.com/kakuta_yu/items/626d7feecf54e39f7127 https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/ まとめ デザインされたスクロールバーを実装する場合は、 IEやFirefox、iPhone Safariなどでは標準のものが表示されるという認識で実装する。
cssのみでデザインされたスクロールバーを実装する際は注意が必要です。 実際のものをブラウザごとに見ていただくのが早いかと思います。
今回実装したスクロールバー デモページ：https://hojihoji.net/scrollBar/
スクロールバーの実装には::-webkit-scrollbarというcssを用いています。 cssのみでデザインされたスクロールバーを実装することができる便利なものです。
参考サイト：https://qiita.com/hibikikudo/items/ee1b913479bceddb654c
JavaScriptいらずで実装できるため、とても便利なものですが、 使用には慎重になった方が良いです。 なぜならIEやFirefoxでは非対応のため、 標準のスクロールバーが表示されてしまうからです。 せっかくデザインにこだわった実装なのに、意味がなくなります。
またiPhone Safariで表示されない(標準のものが表示されます)という問題もあります。 ::-webkit-scrollbarは、webkit系のブラウザには対応しています。
参考サイト：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#Browser_compatibility
ですのでiPhone Safariでも表示されるはずなのですが、 iOS13から表示されなくなったようです。
参考サイト： https://qiita.com/kakuta_yu/items/626d7feecf54e39f7127 https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/
デザインされたスクロールバーを実装する場合は、 IEやFirefox、iPhone Safariなどでは標準のものが表示されるという認識で実装する。
はじめに 先日、チェックボックスとラベルのテキストのズレを直すのに少し手間取ってしまったので書いておきます。 解決方法 vertical-alignやpositionでの解決方法がネットでは多かったのですが、うまくいかなかったので（ヤバイCSSだったので何らかのプロパティが邪魔していたのだと思う）Flexboxで解決しました。 実践 チェックボックスやテキストを修飾していると両者のズレが目立ってきます。 HTML <div> <label><input class="checkbox">チェックボックス</label> </div> CSS .checkbox { font-size: 50px; } 以下のようにして修正することで解決しました。同様の手法はラジオボタン等でも有効でした。 CSS .checkbox { font-size: 50px; display: flex; align-items: center; } おわり Flexboxはとても便利なので思考停止で使ってしまいます。その一方で、Flexboxのプロパティ名やそれらの挙動は覚えきれないので下記のデモサイトをよく使っています。便利なので是非使ってみてください。 https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
先日、チェックボックスとラベルのテキストのズレを直すのに少し手間取ってしまったので書いておきます。
vertical-alignやpositionでの解決方法がネットでは多かったのですが、うまくいかなかったので（ヤバイCSSだったので何らかのプロパティが邪魔していたのだと思う）Flexboxで解決しました。
vertical-align
position
チェックボックスやテキストを修飾していると両者のズレが目立ってきます。
<div> <label><input class="checkbox">チェックボックス</label> </div>
.checkbox { font-size: 50px; }
以下のようにして修正することで解決しました。同様の手法はラジオボタン等でも有効でした。
.checkbox { font-size: 50px; display: flex; align-items: center; }
Flexboxはとても便利なので思考停止で使ってしまいます。その一方で、Flexboxのプロパティ名やそれらの挙動は覚えきれないので下記のデモサイトをよく使っています。便利なので是非使ってみてください。 https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
経緯 やんごとなき理由でhtml側をいじれなかったため、 jsでどうにかこうにか入れ替える必要がありました。 以下奮闘記です。 もっといい書き方があればコメント下さい。泣いて喜びます。 今回の要件 お店の開店時間が早い順にソートしたい 開店時間が同じ場合でも、閉店時間による並べ替えはしない 時間は24時間表記、30分刻みとする 営業時間は必ずHH:mm ~ HH:mmのフォーマットで表記される すべての店の営業時間は10:00 ~ 5:00の範囲内に収まる(5時オープンの店はない) デモ デモはこちら。 開店時間を変更しても、並び替わってくれます。 https://codepen.io/kotottt/pen/rNVWpVa HTML hoge.html <ul class="shop_lists"> <li> <div class="shop">HOGE食堂</div> <div class="time">12:00 ~ 18:00</div> </li> <li> <div class="shop">FUGA KITCHEN</div> <div class="time">10:00 ~ 20:00</div> </li> <li> <div class="shop">BAR NULL</div> <div class="time">1:00 ~ 4:00</div> </li> </ul> javascript hoge.js $('.shop_lists').html( $('.shop_lists > li').sort(function(a,b){ var str1 = $(a).find('.time').html(); var str2 = $(b).find('.time').html(); var num1 = str1.substr( 0, 4 ).split(':'); var num2 = str2.substr( 0, 4 ).split(':'); if(num1[0] < 5){ num1[0] = Number(num1[0]) + 24; num1[0] += Number(num1[1]) / 100; } if(num2[0] < 5){ num2[0] = Number(num2[0]) + 24; num2[0] += Number(num2[1]) / 100; } return num1[0] - num2[0]; })); 生意気にも解説 リストの入れ替え $('.shop_lists > li').sort(function(a,b){ sortメソッドで数値を複数回比較、比較した値を基に、 liタグの並べ替えを行います。 比較方法については次から。 基準となる数値を含む文字列を抽出 var str1 = $(a).find('.time').html(); var str2 = $(b).find('.time').html(); aとｂそれぞれに、リストがセットされて行くので、 その中から、timeクラスを持つブロックを指定し、 htmlメソッドで中身（今回だと12:00 ~ 18:00）を抽出します。 ただ、これだと~と閉店時間が含まれてしまうため、 次に開店時間のみ抽出していきます。 数値の抽出と比較の下準備 var num1 = str1.substr( 0, 4 ).split(':'); まず、セットされた文字列から先頭の４文字を指定substr( 0, 4 )します。 12:00 ~ 18:00だと12:0になりますね。 ※今回は時間が30分刻みで、1分単位での比較はしなくて良いので切り捨てています。 次に、文字列を：を基準に、分割し配列化します。 上の例だと、num1 = ['12', '0']となります。 では、この配列の値を基準に比較する処理に入ります。 比較方法 return num1[0] - num2[0]; 順番が前後しますが、結論から言うと、 配列の最初の値num[0]を比較します。 この比較結果を基にリストを並べ替えていくわけですね。（完全に理解） 問題点 ただこれだけだと、以下の問題が発生してしまいます。 リスト分単位での比較が出来ない 0時以降オープンのお店が、10時オープンのお店より先に表示されてしまう そのため今回は、 分単位部分のnum[1]を少数点以下の数値に変換し、num[0]に加算。 0時〜５時の場合は、num[0]に24を足す(24時〜28時に変換) これらの処理を挟むことにしました。 問題点を解決する処理 if(num1[0] < 6){ num1[0] = Number(num1[0]) + 24; num1[0] += Number(num1[1]) / 100; //結果(1時半オープンの場合)： num1[0] = 25.3 } この部分ですね。 暗黙の型変換でそのまま24を足したり100で割ることもできるみたいですが、 丁寧に書きましょうということで、Numberオブジェクトで型変換の後に計算。 これで、先程の問題は解決します。 あとは先程の比較式に値が渡るので、比較の後、並べ替え完了です！！！ 思うところ aとbで同じ処理してるので、うまいことまとめられないかなーというのが正直な所。 ループ回したりしてカッチョイイコードを書きたいものの、 正直わかりやすいし2回くらいならいっか()という惰性です。 あと、時間フォーマットの変更に強くないので、 その場しのぎ感は否めないかと。 自分のコードを呪う未来が見えるような、見えないような....。 間違い等あれば、ご指摘下さい。
やんごとなき理由でhtml側をいじれなかったため、 jsでどうにかこうにか入れ替える必要がありました。 以下奮闘記です。
もっといい書き方があればコメント下さい。泣いて喜びます。
HH:mm ~ HH:mm
デモはこちら。 開店時間を変更しても、並び替わってくれます。
https://codepen.io/kotottt/pen/rNVWpVa
<ul class="shop_lists"> <li> <div class="shop">HOGE食堂</div> <div class="time">12:00 ~ 18:00</div> </li> <li> <div class="shop">FUGA KITCHEN</div> <div class="time">10:00 ~ 20:00</div> </li> <li> <div class="shop">BAR NULL</div> <div class="time">1:00 ~ 4:00</div> </li> </ul>
$('.shop_lists').html( $('.shop_lists > li').sort(function(a,b){ var str1 = $(a).find('.time').html(); var str2 = $(b).find('.time').html(); var num1 = str1.substr( 0, 4 ).split(':'); var num2 = str2.substr( 0, 4 ).split(':'); if(num1[0] < 5){ num1[0] = Number(num1[0]) + 24; num1[0] += Number(num1[1]) / 100; } if(num2[0] < 5){ num2[0] = Number(num2[0]) + 24; num2[0] += Number(num2[1]) / 100; } return num1[0] - num2[0]; }));
$('.shop_lists > li').sort(function(a,b){
sortメソッドで数値を複数回比較、比較した値を基に、 liタグの並べ替えを行います。 比較方法については次から。
sort
var str1 = $(a).find('.time').html(); var str2 = $(b).find('.time').html();
aとｂそれぞれに、リストがセットされて行くので、 その中から、timeクラスを持つブロックを指定し、 htmlメソッドで中身（今回だと12:00 ~ 18:00）を抽出します。
a
ｂ
time
12:00 ~ 18:00
ただ、これだと~と閉店時間が含まれてしまうため、 次に開店時間のみ抽出していきます。
~
var num1 = str1.substr( 0, 4 ).split(':');
まず、セットされた文字列から先頭の４文字を指定substr( 0, 4 )します。 12:00 ~ 18:00だと12:0になりますね。
substr( 0, 4 )
12:0
※今回は時間が30分刻みで、1分単位での比較はしなくて良いので切り捨てています。
次に、文字列を：を基準に、分割し配列化します。 上の例だと、num1 = ['12', '0']となります。
：
num1 = ['12', '0']
では、この配列の値を基準に比較する処理に入ります。
return num1[0] - num2[0];
順番が前後しますが、結論から言うと、 配列の最初の値num[0]を比較します。
num[0]
この比較結果を基にリストを並べ替えていくわけですね。（完全に理解）
ただこれだけだと、以下の問題が発生してしまいます。
そのため今回は、
num[1]
これらの処理を挟むことにしました。
if(num1[0] < 6){ num1[0] = Number(num1[0]) + 24; num1[0] += Number(num1[1]) / 100; //結果(1時半オープンの場合)： num1[0] = 25.3 }
この部分ですね。
暗黙の型変換でそのまま24を足したり100で割ることもできるみたいですが、 丁寧に書きましょうということで、Numberオブジェクトで型変換の後に計算。
これで、先程の問題は解決します。
あとは先程の比較式に値が渡るので、比較の後、並べ替え完了です！！！
aとbで同じ処理してるので、うまいことまとめられないかなーというのが正直な所。
ループ回したりしてカッチョイイコードを書きたいものの、 正直わかりやすいし2回くらいならいっか()という惰性です。
あと、時間フォーマットの変更に強くないので、 その場しのぎ感は否めないかと。
自分のコードを呪う未来が見えるような、見えないような....。
間違い等あれば、ご指摘下さい。
経緯 やんごとなき理由でhtml側をいじれなかったため、 jsでどうにかこうにか入れ替える必要がありました。 以下奮闘記です。 もっといい書き方があればコメント下さい。泣いて喜びます。 今回の要件 お店の開店時間が早い順にソートしたい 開店時間が同じ場合でも、閉店時間による並べ替えはしない 時間は24時間表記、30分刻みとする 営業時間は必ずHH:mm ~ HH:mmのフォーマットで表記される すべての店の営業時間は10:00 ~ 5:00の範囲内に収まる(5時オープンの店はない) デモ デモはこちら。 開店時間を変更しても、並び替わってくれます。 https://codepen.io/kotottt/pen/rNVWpVa HTML hoge.html <ul class="shop_lists"> <li> <div class="shop">HOGE食堂</div> <div class="time">12:00 ~ 18:00</div> </li> <li> <div class="shop">FUGA KITCHEN</div> <div class="time">10:00 ~ 20:00</div> </li> <li> <div class="shop">BAR NULL</div> <div class="time">1:00 ~ 4:00</div> </li> </ul> javascript hoge.js $('.shop_lists').html( $('.shop_lists > li').sort(function(a,b){ var str1 = $(a).find('.time').html(); var str2 = $(b).find('.time').html(); var num1 = str1.substr( 0, 4 ).split(':'); var num2 = str2.substr( 0, 4 ).split(':'); if(num1[0] < 5){ num1[0] = Number(num1[0]) + 24; num1[0] += Number(num1[1]) / 100; } if(num2[0] < 5){ num2[0] = Number(num2[0]) + 24; num2[0] += Number(num2[1]) / 100; } return num1[0] - num2[0]; })); 生意気にも解説 リストの入れ替え $('.shop_lists > li').sort(function(a,b){ sortメソッドで数値を複数回比較、比較した値を基に、 liタグの並べ替えを行います。 比較方法については次から。 基準となる数値を含む文字列を抽出 var str1 = $(a).find('.time').html(); var str2 = $(b).find('.time').html(); aとｂそれぞれに、リストがセットされて行くので、 その中から、timeクラスを持つブロックを指定し、 htmlメソッドで中身（今回だと12:00 ~ 18:00）を抽出します。 ただ、これだと~と閉店時間が含まれてしまうため、 次に開店時間のみ抽出していきます。 数値の抽出と比較の下準備 var num1 = str1.substr( 0, 4 ).split(':'); まず、セットされた文字列から先頭の４文字を指定substr( 0, 4 )します。 12:00 ~ 18:00だと12:0になりますね。 ※今回は時間が30分刻みで、1分単位での比較はしなくて良いので切り捨てています。 次に、文字列を：を基準に、分割し配列化します。 上の例だと、num1 = ['12', '0']となります。 では、この配列の値を基準に比較する処理に入ります。 比較方法 return num1[0] - num2[0]; 順番が前後しますが、結論から言うと、 配列の最初の値num[0]を比較します。 この比較結果を基にリストを並べ替えていくわけですね。（完全に理解） 問題点 ただこれだけだと、以下の問題が発生してしまいます。 リスト分単位での比較が出来ない 0時〜５時オープンのお店が、10時オープンのお店より先に表示されてしまう そのため今回は、 分単位部分のnum[1]を少数点以下の数値に変換し、num[0]に加算。 0時〜５時の場合は、num[0]に24を足す(24時〜28時に変換) これらの処理を挟むことにしました。 問題点を解決する処理 if(num1[0] < 6){ num1[0] = Number(num1[0]) + 24; num1[0] += Number(num1[1]) / 100; //結果(1時半オープンの場合)： num1[0] = 25.3 } この部分ですね。 暗黙の型変換でそのまま24を足したり100で割ることもできるみたいですが、 丁寧に書きましょうということで、Numberオブジェクトで型変換の後に計算。 これで、先程の問題は解決します。 あとは先程の比較式に値が渡るので、比較の後、並べ替え完了です！！！ 思うところ aとbで同じ処理してるので、うまいことまとめられないかなーというのが正直な所。 ループ回したりしてカッチョイイコードを書きたいものの、 正直わかりやすいし2回くらいならいっか()という惰性です。 あと、時間フォーマットの変更に強くないので、 その場しのぎ感は否めないかと。 自分のコードを呪う未来が見えるような、見えないような....。 間違い等あれば、ご指摘下さい。
１. Sassとは SassとはCSSの機能を拡張した言語です。Sassを利用することで、CSSを効率的に書けるようになります。SassはCSSに非常に似ていますが異なる言語です。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。また、SassにはSASS記法とSCSS記法の2種類の書き方があります。 今回は、SCSS記法について書いていきます。※拡張子も.scssになるので気をつけてください。 ２. Sassのメリット Sassには以下のようなメリットがあります。 記述の簡略化ができる 同じ値を使い回すことができる 引数を使った応用ができる 記述の簡略化ができる 親子関係にあるセレクタを入れ子にして書くことができます。 CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sassはネストさせることで、同じ親のセレクタをまとめることができます。 つまり、htmlを書くときのような思考でかけるので、書きやすい。 例えば以下のような感じ。 sample.html <div class="block"> <h1 class="title">Hello world</h1> <p class="text">Sass is <span>greate!</span> </div> sample.scss .block { background-color: #000; .title { color: #FFF; font-size: 70px; text-align: center; } .text { font-size: 15px; color: #FFF; span { color: red; font-size: 20px; } } } 同じ値を使い回すことができる 変数 Sassでは、変数を使用することができます。 何度も使用する値を変数を定義することで、変数名で何度も使用することができます。 変数を定義するには、$変数名: 値;のように記述します。 sample.scss $mainColor: #FFEC00; /* #FFEC00という色をmainColorという変数名で定義する */ mixin mixinとは、まとまったスタイルを定義することができる機能です。 変数は値を定義するものでしたが、mixinはスタイルを定義するものです。 mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。 mixinを定義するには、@mixin mixin名() {}のように記述します。 sample.scss @mixin mainContents1 { border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: #FFF; } こちらのmixinは、@includeで呼び出します。 sample.scss .main{ @include mainContents1; } 一度の定義で使いまわせるので、本当に便利ですよね。 引数を使った応用ができる 先ほど紹介した変数や、mixinを見ると、使いたくなりますよね。 しかし、定義しまくっていると、似たような中身ができてしまいます。 こんな感じ sample.scss @mixin mainContents1{ border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: #FFF; /* background-colorが#FFFか#EEEかの違い */ } sample.scss @mixin mainContents2{ border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: #EEE; /* background-colorが#FFFか#EEEかの違い */ } 記述量は減るのでメリットはあるのですが、もっといい方法でスマートにできます。 そこで出てくるのがみんな大好き引数です。 こんな感じ sample.scss @mixin mainContents1($color) { /* 関数 */ border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: $color; /* (#FFF)や(#EEE)が場合に応じて入る */ } sample.scss .main1{ @include mainContents1(#FFF); /* #FFFと記述するだけでいい */ } .main2{ @include mainContents1(#EEE); /* #EEEと記述するだけでいい */ } ３. 最後に sassを最近、progateで復習しましたので、書いてみました。 今度は、今勉強しているLaravelでなんか書きます。
SassとはCSSの機能を拡張した言語です。Sassを利用することで、CSSを効率的に書けるようになります。SassはCSSに非常に似ていますが異なる言語です。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。また、SassにはSASS記法とSCSS記法の2種類の書き方があります。 今回は、SCSS記法について書いていきます。※拡張子も.scssになるので気をつけてください。
Sassには以下のようなメリットがあります。
親子関係にあるセレクタを入れ子にして書くことができます。 CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sassはネストさせることで、同じ親のセレクタをまとめることができます。 つまり、htmlを書くときのような思考でかけるので、書きやすい。 例えば以下のような感じ。
<div class="block"> <h1 class="title">Hello world</h1> <p class="text">Sass is <span>greate!</span> </div>
.block { background-color: #000; .title { color: #FFF; font-size: 70px; text-align: center; } .text { font-size: 15px; color: #FFF; span { color: red; font-size: 20px; } } }
Sassでは、変数を使用することができます。 何度も使用する値を変数を定義することで、変数名で何度も使用することができます。 変数を定義するには、$変数名: 値;のように記述します。
$mainColor: #FFEC00; /* #FFEC00という色をmainColorという変数名で定義する */
mixinとは、まとまったスタイルを定義することができる機能です。 変数は値を定義するものでしたが、mixinはスタイルを定義するものです。 mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。 mixinを定義するには、@mixin mixin名() {}のように記述します。
@mixin mainContents1 { border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: #FFF; }
こちらのmixinは、@includeで呼び出します。
.main{ @include mainContents1; }
一度の定義で使いまわせるので、本当に便利ですよね。
先ほど紹介した変数や、mixinを見ると、使いたくなりますよね。 しかし、定義しまくっていると、似たような中身ができてしまいます。 こんな感じ
@mixin mainContents1{ border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: #FFF; /* background-colorが#FFFか#EEEかの違い */ }
@mixin mainContents2{ border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: #EEE; /* background-colorが#FFFか#EEEかの違い */ }
記述量は減るのでメリットはあるのですが、もっといい方法でスマートにできます。 そこで出てくるのがみんな大好き引数です。 こんな感じ
@mixin mainContents1($color) { /* 関数 */ border-radius: 50%; margin: 10px; text-align: center; height: 64px; width: 64px; background-color: $color; /* (#FFF)や(#EEE)が場合に応じて入る */ }
.main1{ @include mainContents1(#FFF); /* #FFFと記述するだけでいい */ } .main2{ @include mainContents1(#EEE); /* #EEEと記述するだけでいい */ }
sassを最近、progateで復習しましたので、書いてみました。 今度は、今勉強しているLaravelでなんか書きます。
画像を希望ページへリンクさせてクリックしたら遷移させる 上記の機能を実装する際、手こずったので備忘録として残しておきます。 aタグでリンクさせようと思い、書き方を調べて相対パスで記述する事にした。 aタグ パス指定 下記のコードで実行したが、Routing Errorが起きた。 tops/index.html.erb <a href="groups/index.html.erb"><img src="assets/1.png" class="img-fluid" alt="Responsive image"></a> 下記の方法も試したが、同様にRouting Eroorが起きた。 | ◆ リンク先などの記述例 | 同じフォルダ内にリンクするときは、ファイル名のみ(または ./ に続けてファイル名)を記述します。 下位階層にリンクするときは、フォルダ名に続けて / を入れ、ファイル名を記述します。 上位階層にリンクするときは、../ に続けてファイル名を記述します。2つ上の階層を指定するときは、../../ に続けてファイル名を記述します。 並列した階層のフォルダにリンクするときは、../ に続けてフォルダ名と / を入れ、ファイル名を記述します。 解決法 link_toを使用して、記述することにした。 まずは、ルーティングの設定 routes.rb Rails.application.routes.draw do devise_for :users root 'tops#index' resources :groups, only: :index end 次に、コントローラー groups_controller.rb class GroupsController < ApplicationController def index end end 最後にビュー tops/index.html.erb <%= link_to (groups_path) do%> <img src="assets/1.png" class="img-fluid" alt="Responsive image"> <% end%> 上記手順で画像リンクに成功した。 なぜaタグでできなかったのか？ ・railsでリンクさせる場合は相対パスが使用できない？ ・rails,rubyのバージョンが相対パスの仕様に対応してない？ (rails 5.0.7.2 , ruby 2.5.1) 確証が持てないのでわかる方はぜひコメントお願いします！！！！！
上記の機能を実装する際、手こずったので備忘録として残しておきます。
aタグでリンクさせようと思い、書き方を調べて相対パスで記述する事にした。 aタグ パス指定 下記のコードで実行したが、Routing Errorが起きた。
<a href="groups/index.html.erb"><img src="assets/1.png" class="img-fluid" alt="Responsive image"></a>
下記の方法も試したが、同様にRouting Eroorが起きた。
| ◆ リンク先などの記述例 | 同じフォルダ内にリンクするときは、ファイル名のみ(または ./ に続けてファイル名)を記述します。 下位階層にリンクするときは、フォルダ名に続けて / を入れ、ファイル名を記述します。 上位階層にリンクするときは、../ に続けてファイル名を記述します。2つ上の階層を指定するときは、../../ に続けてファイル名を記述します。 並列した階層のフォルダにリンクするときは、../ に続けてフォルダ名と / を入れ、ファイル名を記述します。
link_toを使用して、記述することにした。 まずは、ルーティングの設定
Rails.application.routes.draw do devise_for :users root 'tops#index' resources :groups, only: :index end
次に、コントローラー
class GroupsController < ApplicationController def index end end
最後にビュー
<%= link_to (groups_path) do%> <img src="assets/1.png" class="img-fluid" alt="Responsive image"> <% end%>
上記手順で画像リンクに成功した。
・railsでリンクさせる場合は相対パスが使用できない？ ・rails,rubyのバージョンが相対パスの仕様に対応してない？ (rails 5.0.7.2 , ruby 2.5.1)
確証が持てないのでわかる方はぜひコメントお願いします！！！！！
100日チャレンジの246日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 246日目は、 おはようございます246日目・udemyで、webサイト模写・udemyで、バナー作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode#webデザイン— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 21, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
246日目は、
おはようございます246日目・udemyで、webサイト模写・udemyで、バナー作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode#webデザイン— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 21, 2020
おはようございます246日目・udemyで、webサイト模写・udemyで、バナー作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode#webデザイン
label要素を用いたチェックエリアの装飾。 選択が行われたことを判定し、送信ボタンを押せるようにする。 デモページ github https://github.com/koko77777/formTrial
label要素を用いたチェックエリアの装飾。 選択が行われたことを判定し、送信ボタンを押せるようにする。
デモページ
github https://github.com/koko77777/formTrial
フレームワークRailsの作成手順（ほぼ備忘録） ディレクトリ作成からRailsのひな形作成までを簡単にアウトプット練習も兼ねて書いていく。（DB設計は割愛） 開発環境↓ Railsバージョン5.2.3 データベース MySQL ここからはターミナルを実行してひな形を作っていく。 ターミナル # ディレクトリ作成 $ mkdir ~/test Rails newコマンドで作成 ターミナル $ rails new アプリケーション名 -オプション test #test-appファイルの作成 $ rails _5.2.3_ new test-app -d mysql $ cd test-appでtest-appファイルに移動 test-app # bundle installしておく $ bundle install これでRailsフレームワークのひな形が完成。 htmlファイルやcssファイル、routes.rbがあることを確認しておく。 これからDBとモデルを作成する。 以上
ディレクトリ作成からRailsのひな形作成までを簡単にアウトプット練習も兼ねて書いていく。（DB設計は割愛）
開発環境↓
ここからはターミナルを実行してひな形を作っていく。
# ディレクトリ作成 $ mkdir ~/test
Rails newコマンドで作成
Rails new
$ rails new アプリケーション名 -オプション
#test-appファイルの作成 $ rails _5.2.3_ new test-app -d mysql
$ cd test-appでtest-appファイルに移動
$ cd test-app
test-app
# bundle installしておく $ bundle install
これでRailsフレームワークのひな形が完成。
htmlファイルやcssファイル、routes.rbがあることを確認しておく。
これからDBとモデルを作成する。
以上
