- 投稿日：2021-09-07T18:16:00+09:00
[Html/Rails]画像の大きさを調整をしたい
初めに この記事の対象者 ・画像を貼ったのはいいけど、大きすぎて/小さすぎてなんか見にくい。。。ヒト用 環境 ・Macbook Air (Retina, 13-inch,2019) ・プロセッサ 1.6GHz デュアルコアIntel Core i5 ・メモリ 8GB 2133 Mhz LPDDR3 ・MacOS Big Sur バージョン 11.5.2 記事の目次 １）cssを使って画像の大きさを変える方法 ２）rubyを使って画像の大きさを変える方法 ３）画面の大きさに応じて画像の大きさを変える方法 ４）最後に cssを使って画像の大きさを変える方法** １）html内に画像を添付 <img src ="画像の名前.png" src="画像のファイルの場所" class="sample"> ２）cssで画像のクラス名を指定して横幅、縦幅を設定 .sample{ width:50px; height: 50px; } rubyを使って画像の大きさを変える方法** １）html内<%= image_tag>を使って画像を添付 <%= image_tag "ファイル名.png" %> ２）<%= image_tag>内にsize: "縦幅x横幅"を追加 <%= image_tag "ファイル名.png", size: "50px＊50px" %> 画面の大きさに応じて画像の大きさを変える方法** 大きさの単位に気をつけて！ ※幅の単位をpxにすると、その大きさに固定されるためユーザが画面の大きさを変えても画像の大きさはそのままとなる ※幅の単位を%にすると、html内は入れ子構造（親子関係）になっているため、親の幅より大きくなることはない＝画面に応じて大きさが変わる 最後に もし自分のアプリに画像を使っているなら、見た目が悪いとユーザは使いたいと思わなくなると思うからレイアウトは大事だとおもう！ ここまで読んでくださってありがとうございます！
- 投稿日：2021-09-07T17:28:45+09:00
[Html/Rails]範囲指定について
初めに なぜこの記事を書こうと思ったのか フロントサイドの実装をするとき、クラス名を直前に決めているせいかcssで装飾をするときに名前を忘れてしまったクラス名は思い出すのにどの部分に当たるのか曖昧の場合があるので自分中でルールを決めてここにメモしたいと思ったから。 環境 ・Macbook Air (Retina, 13-inch,2019) ・プロセッサ 1.6GHz デュアルコアIntel Core i5 ・メモリ 8GB 2133 Mhz LPDDR3 ・MacOS Big Sur バージョン 11.5.2 記事の目次 1)土台 2)状況に応じてのテンプレート 3)最後に 土台 ・基本的にheaderとfooterは部分テンプレートとして使う頻度が多いのでスルー ・いままで作ったアプリはメイン部分を２−3分割で分けていた application.html.erb <!DOCTYPE html> <html> <head> <title>タイトル名</title> <script type="text/javascript" src="https://js.pay.jp/v1/"></script> <%= stylesheet_link_tag 'application', media: 'all'%> <%= javascript_pack_tag 'application' %> </head> <body> <%= yield %> </body> </html> index.html.erb(縦に２−３分割のとき) <div class= 'main'> <div class= 'top-box'> <div class= 'top-container'> このサイトについて説明したいこと</div> </div> <div class= 'middle-box'> <div class= 'middle-container'> どんなことができるのか</div> </div> <div class= 'bottom-box'> <div class= 'bottom-container'> このサイトのサービスや表</div> </div> </div> index.html.erb(横に２−３分割のとき) <div class= 'main'> <div class= 'left-box'> <div class= 'left-container'> このサイトについて説明したいこと</div> </div> <div class= 'middle-box'> <div class= 'middle-container'> どんなことができるのか</div> </div> <div class= 'right-box'> <div class= 'right-container'> このサイトのサービスや表</div> </div> </div> 状況に応じたテンプレート _header.html.erb(上の部分) <header> <div class='header-box'> <div class='left-box'> <div class='logo-box'> <%= link_to "ロゴの名前や画像" root_path %> <%# ロゴのみの場合%> <a href "#" id "side-btn"><i class= "他のサイトからロゴを持ってくる"></i></a> <%# サイドバーがいるとき%> <div> </div> <div class='right-box'> <div class='right-container'> <%= link_to 'リンク先の名前',oooo_path, class: " リンクの名前（英語表記）" %> <%= link_to 'リンク先の名前',oooo_path, class: " リンクの名前（英語表記）" %> <%= link_to 'リンク先の名前',oooo_path, class: " リンクの名前（英語表記）" %> </div> </div> </div> </header> _footer.html.erb(下の部分) <footer> <div class='footer-box'> <div class='left-box'> <div class='logo-box'> <%= link_to "ロゴの名前や画像" root_path %> <div> </div> <div class='right-box'> <div class='right-container'> <%= link_to 'リンク先の名前',oooo_path, class: " リンクの名前（英語表記）" %> <%= link_to 'リンク先の名前',oooo_path, class: " リンクの名前（英語表記）" %> <%= link_to 'リンク先の名前',oooo_path, class: " リンクの名前（英語表記）" %> </div> </div> </div> </footer> _sidebar.html.erb(左右部分) <div id ="bars"> <div class= "sidebar-container"> <div class= "bar"> <%= link_to "トップページ", oooo_path %> </div> <div class= "bar"> <%= link_to "好きな遷移先", oooo_path %> </div> <div class= "bar"> <%= link_to "好きな遷移先", oooo_path %> </div> <div class= "bar"> <%= link_to "好きな遷移先", oooo_path %> </div> <div class= "bar"> <%= link_to "ログアウト", destroy_user/session_path, method: :delete %> </div> </div> </div> 最後に 今までは、これから書く機能を連想しそうなクラス名にしていたが、親子関係がわからなくなり無駄な時間が過ぎてしまったので、今日からは基本的にこのテンプレートを使ってアプリの実装する！みなさんはアプリケーションを作るとき自分の中でルールとかつくってるのかな？ ここまで読んでくださってありがとうございます！
- 投稿日：2021-09-07T10:44:21+09:00
【CSS】フレックスボックス (flexbox) の使い方
はじめに フレックスボックスの学習備忘録です。 学習方法 FLEXBOX FROGGYは、ゲーム形式にフレックスボックスを楽しく学べます。 FLEXBOX FROGGYを最後まで行うと下記のスタイルがわかるようになります。 Q24 #pond { display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; justify-content: center; align-content: space-between; } フレックスボックスのまとめ justify-content: 横方向に移動する * flex-start: アイテムはコンテナーの左側に並びます * flex-end: アイテムはコンテナーの右側に並びます * center: アイテムはコンテナーの中央に並びます * space-between: アイテムはその間に等しい間隔を空けて表示されます * space-around: アイテムはその周囲に等しい間隔を空けて表示されます * space-around: 周辺に等しいスペースを空ける * space-between: 間に対して均等にスペースを空ける justify-contentの例 #pond { display: flex; justify-content: flex-end; } align-items : 縦方向に移動する * flex-start: アイテムはコンテナーの上部に並びます。 * flex-end: アイテムはコンテナーの下部に並びます。 * center: アイテムはコンテナーの垂直方向中央に並びます。 * baseline: アイテムはコンテナーのベースラインに表示されます。 * stretch: アイテムはコンテナーの大きさに合うよう広がります。 align-itemsの例 #pond { display: flex; justify-content: center; align-items:center; } flex-direction : 軸の方向を変える row: アイテムは文章と同じ方向に配置されます。 row-reverse: アイテムは文章と逆の方向に配置されます。 column: アイテムは上から下に向かって配置されます。 column-reverse: アイテムは下から上に向かって配置されます。 order : アイテムの順序を指定する アイテムはデフォルトでは0の値を取ります。 １以上は右へ移動します。 左に置きたい場合は-1以下を指定します。 orderの例 #pond { display: flex; } .yellow { order: 1 } align-self : 個別のアイテムへ設定できるプロパティー align-selfの例 #pond { display: flex; align-items: flex-start; } .yellow { align-self:flex-end } flex-wrap: アイテムを強制的に１行にまとめるか、改行させるか制御する nowrap: 全てのアイテムは、ひとつの行にフィットします。 wrap: アイテムは他の行へ折り返します。 wrap-reverse: アイテムは逆順になって他の行へ折り返します flex-wrapの例 #pond { display: flex; flex-wrap: wrap; } flex-directionとflex-wrapの二つのプロパティーはよく一緒に使われるため、これらを統合するショートハンドプロパティーflex-flowが作られました。 このショートハンドプロパティーは空白文字で分割した二つのプロパティーの値を受け付けます。 flex-directionとflex-wrapを２つを省略できるよ #pond { display: flex; flex-flow: column wrap } align-content: 複数の行が他の行とどう距離を取り広がるのかを指定する flex-start: 行はコンテナーの上側に詰められます。 flex-end: 行はコンテナーの下側に詰められます。 center: 行はコンテナーの中央に詰められます。 space-between: 行はその間に等しい間隔を空けて表示されます。 space-around: 行はその周囲に等しい間隔を空けて表示されます。 stretch: 行はコンテナーに合うよう引き延ばされます。 align-contentの例 #pond { display: flex; flex-wrap: wrap; align-content:flex-start; }
- 投稿日：2021-09-07T00:24:40+09:00
Bootstrap 5のボタン配色を3の配色に変更する
注）この記事はコピぺして楽したい人むけです。 背景 脱jQueryを進める一環として実装を進めている中で、 Bootstrap 5にて「Bootstrap Icons」が追加できるようになったので いい機会だと某担当システム。BootStrapも3から5へアップデートしています。 今回ボタンの配色を3に寄せるという点のみについて備忘録的に残したいと思います。 素のCSS記述となるのでご注意を。 想定している対象 ・Bootstrap 3を使用しているものがあり今回5へ差し替えたい。 ・Bootstrap関連ファイルはCDNで読み込んでいる。 ・common.css（仮称）等でカスタマイズしている。 対象ボタン primary / success / info / warning / danger / default 上：Bootstrap 5 / 下：Bootstrap 3 追加記述（コピペでおk） common.css /* -------------------- * ボタンの配色をBootStrap 3に変更 -------------------- */ /* primaryのボタン色 */ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: #337ab7; border-color: #2e6da4; } /* focusされた時の枠線の色 */ .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { color: #fff; background-color: #286090; border-color: #122b40; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-primary:hover { color: #fff; background-color: #286090; border-color: #204d74; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #286090; border-color: #204d74; } /* successのボタン色 */ .btn-success, .btn-success.disabled, .btn-success:disabled { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } /* focusされた時の枠線の色 */ .btn-success:focus, .btn-success.focus, .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { color: #fff; background-color: #449d44; border-color: #255625; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-success:hover { color: #fff; background-color: #449d44; border-color: #398439; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: #449d44; border-color: #398439; } /* infoのボタン色 */ .btn-info, .btn-info.disabled, .btn-info:disabled { color: #fff; background-color: #5bc0de; border-color: #46b8da; } /* focusされた時の枠線の色 */ .btn-info:focus, .btn-info.focus, .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { color: #fff; background-color: #31b0d5; border-color: #1b6d85; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-info:hover { color: #fff; background-color: #31b0d5; border-color: #269abc; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: #31b0d5; border-color: #269abc; } /* warningのボタン色 */ .btn-warning, .btn-warning.disabled, .btn-warning:disabled { color: #fff; background-color: #f0ad4e; border-color: #eea236; } /* focusされた時の枠線の色 */ .btn-warning:focus, .btn-warning.focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { color: #fff; background-color: #ec971f; border-color: #985f0d; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-warning:hover { color: #fff; background-color: #ec971f; border-color: #d58512; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #fff; background-color: #ec971f; border-color: #d58512; } /* dangerのボタン色 */ .btn-danger, .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #d9534f; border-color: #d43f3a; } /* focusされた時の枠線の色 */ .btn-danger:focus, .btn-danger.focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { color: #fff; background-color: #c9302c; border-color: #761c19; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #fff; background-color: #c9302c; border-color: #ac2925; } /* defaultのボタン色 */ .btn-default, .btn-default.disabled, .btn-default:disabled { color: #333; background-color: #fff; border-color: #ccc; } /* focusされた時の枠線の色 */ .btn-default:focus, .btn-default.focus, .btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus, .show > .btn-default.dropdown-toggle:focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle { color: #333; background-color: #e6e6e6; border-color: #adadad; } 余談 ほぼ殴り書きのため、誤りがあった場合はコメントいただければ幸いです。
- 投稿日：2021-09-07T00:10:46+09:00
コアウェブバイタル CLS対策コーディング
そもそもCLSとは？ 2021年5月にGoogle検索結果のランキング要素に新たなページエクスペリエンスが追加されました。 評価の対象としてコアウェブバイタルという３つの指標が定められました。 3つの指標とは、LCP（速度）、FID（応答性）、CLS（視覚要素安定性）です。 その中で、おそらくマークアップ手法で最も影響を受けやすいものがCumulative Layout Shift、略してCLSです。 従来のコーディングだと今までどちらでもできた表現が、はっきり良否が分かれるため逆にやりがいを感じるかもしれません。 改善のきっかけ アクセス解析担当者から、サーチコンソール上のエラー報告を受けCLSの存在を知りました。 フロント部分の原因と知り調査を開始しました。 改善前の私のコーディングはレスポンシブサイトを意識した常にレイアウトが伸び縮みするようなCLSエラーを代表するような悪い例でした・・・ 実装例 ここからは実際にエラーの解消に役立った具体的なコーディング手法をいくつか紹介します。 基本的には、HTMLとCSSの書き方を気をつけるだけで改善できます。 画像の処理 画像の読み込みは遅れて行われるため、widthとheightを指定しないと画像の大きさのままに表示領域を変えてしまいます。 imgタグにwidth属性とheight属性を指定していきます。 <img src="hoge.jpg" width="200" height="100"> モバイルやタブレットはCSSで対応しましょう。 @media screen and (max-width: 767px) { img { width: 100px; height: 50px; } } タブレットは、現状では評価の対象外なので意識する必要は無さそうです。 また対策として、CSSをインラインで書いた方が良いという声もありますが、通常の外部ファイル化でもエラー解消出来たので問題ないです。 デスクトップもCSSで対処できますが、width属性とheight属性を指定しなかった場合に別の警告が出てしまうので必ず指定しましょう。 モジュール 幅や高さを固定しても問題なさそうな要素はなるべくwidthやheight指定しましょう。 領域を確保した親コンテンツがある状態で中身をレイアウトしていくのが理想です。 以下は、ボタンのスタイル例の一部です。 しっかりとwidthとheightで領域を確保した上で中央寄せします。 良くない例で言えば、paddingやmax-widthなどの可変してしまうプロパティのみでの構築です、要素が可変するものはレイアウトシフトの原因になります。 display: flex; justify-content: center; align-items: center; widht: 200px; height: 100px; 追従ヘッダー Webサイトでよく使用されているスクロールしてもついてくる追従ヘッダーです、初めからposition: fixedで置いてしまうと高さがないためレイアウトシフトの原因になります。 スクロール後に固定されるように工夫が必要です、JSなどを使用し読み込み後の固定にすると良いです。 Webフォント 結論から言いますと、きちんと扱えばWebフォントは使っても大丈夫です。 中にはフォントの読み込みに時間がかかり、レイアウトシフトしてしまうこともあるので注意は必要です。 検証方法とツール PageSpeed Insights Google公式の検証ツールです、スコアの表示に加え実際のズレが発生している箇所を知らせてくれるので、基本的にはこちらを確認しながら進めます。 Google Chromeデベロッパーツール デベロッパーツールを開いたら、Performanceタブに移動します。 リロードの矢印アイコンをクリックして、ページの読み込みが終わったらStopを押します。 ものすごく細かな静止画で、レイアウトシフトをしている箇所を確認することができます。 Web Vitals Chrome拡張機能です。 検証が非常に楽でページのCumulative Layout Shiftスコアを一瞬で表示してくれます。 以上となります、最後までご覧戴きありがとうございました。
- 投稿日：2021-09-07T00:10:46+09:00
コアウェウブバイタル CLS対策コーディング
コアウェウブバイタル CLS対策コーディング そもそもCLSとは？ 2021年5月にGoogle検索結果のランキング要素に新たなページエクスペリエンスが追加されました。 評価の対象としてコアウェブバイタルという３つの指標が定められました。 3つの指標とは、LCP（速度）、FID（応答性）、CLS（視覚要素安定性）です。 その中で、おそらくマークアップ手法で最も影響を受けやすいものがCumulative Layout Shift、略してCLSです。 従来のコーディングだと今までどちらでもできた表現が、はっきり良否が分かれるため逆にやりがいを感じるかもしれません。 改善のきっかけ アクセス解析担当者から、サーチコンソール上のエラー報告を受けCLSの存在を知りました。 フロント部分の原因と知り調査を開始しました。 改善前の私のコーディングはレスポンシブサイトを意識した常にレイアウトが伸び縮みするようなCLSエラーを代表するような悪い例でした・・・ 実装例 ここからは実際にエラーの解消に役立った具体的なコーディング手法をいくつか紹介します。 基本的には、HTMLとCSSの書き方を気をつけるだけで改善できます。 画像の処理 画像の読み込みは遅れて行われるため、widthとheightを指定しないと画像の大きさのままに表示領域を変えてしまいます。 imgタグにwidth属性とheight属性を指定していきます。 <img src="hoge.jpg" width="200" height="100"> モバイルやタブレットはCSSで対応しましょう。 @media screen and (max-width: 767px) { img { width: 100px; height: 50px; } } タブレットは、現状では評価の対象外なので意識する必要は無さそうです。 また対策として、CSSをインラインで書いた方が良いという声もありますが、通常の外部ファイル化でもエラー解消出来たので問題ないです。 デスクトップもCSSで対処できますが、width属性とheight属性を指定しなかった場合に別の警告が出てしまうので必ず指定しましょう。 モジュール 幅や高さを固定しても問題なさそうな要素はなるべくwidthやheight指定しましょう。 領域を確保した親コンテンツがある状態で中身をレイアウトしていくのが理想です。 以下は、ボタンのスタイル例の一部です。 しっかりとwidthとheightで領域を確保した上で中央寄せします。 良くない例で言えば、paddingやmax-widthなどの可変してしまうプロパティのみでの構築です、要素が可変するものはレイアウトシフトの原因になります。 display: flex; justify-content: center; align-items: center; widht: 200px; height: 100px; 追従ヘッダー Webサイトでよく使用されているスクロールしてもついてくる追従ヘッダーです、初めからposition: fixedで置いてしまうと高さがないためレイアウトシフトの原因になります。 スクロール後に固定されるように工夫が必要です、JSなどを使用し読み込み後の固定にすると良いです。 Webフォント 結論から言いますと、きちんと扱えばWebフォントは使っても大丈夫です。 中にはフォントの読み込みに時間がかかり、レイアウトシフトしてしまうこともあるので注意は必要です。 検証方法とツール PageSpeed Insights Google公式の検証ツールです、スコアの表示に加え実際のズレが発生している箇所を知らせてくれるので、基本的にはこちらを確認しながら進めます。 Google Chromeデベロッパーツール デベロッパーツールを開いたら、Performanceタブに移動します。 リロードの矢印アイコンをクリックして、ページの読み込みが終わったらStopを押します。 ものすごく細かな静止画で、レイアウトシフトをしている箇所を確認することができます。 Web Vitals Chrome拡張機能です。 検証が非常に楽でページのCumulative Layout Shiftスコアを一瞬で表示してくれます。 以上となります、最後までご覧戴きありがとうございました。