スマホ時に頻出のハンバーガーメニュー クリック時にクラスを追加したり消したりするだけのシンプルな動きで実装。 【ポイント】 ・✖️アイコンなど以外にも背景クリック時にも元の画面に戻れるように実装する script.js jQuery('.drawer-icon').on('click', function (e) { e.preventDefault(); //aタグなどクリック時の動作を初期化、クリックイベント作成時には必ずつける jQuery('.drawer-icon').toggleClass('is-active'); jQuery('.drawer-content').toggleClass('is-active'); jQuery('.drawer-background').toggleClass('is-active'); return false;//古いブラウザへの対処 }); //背景クリック時 jQuery('.drawer-background').on('click', function (e) { e.preventDefault(); jQuery('.drawer-icon').toggleClass('is-active'); jQuery('.drawer-content').toggleClass('is-active'); jQuery('.drawer-background').toggleClass('is-active'); return false; });

jQueryの基本構文 これからよく使うであろう。。。 jQuery $(セレクター).イベント(function() { $(セレクター).命令 });

link_toにて各リンク先を作成したが、デフォルトの色が青色なのでこの色を変えたいと思います。 これはスキンケア用品に関するクチコミサイトですが、色合いがおかしいです。 やり方は簡単で、link_toの末尾にclass指定して、cssで変更します。 view <%= link_to category.category_name, categories_path(category_id: category.id) %> これを、 <%= link_to category.category_name, categories_path(category_id: category.id, class:link) %> scss .link { text-decoration: none; color: white ; } これで文字色の指定ができます。 文字色以外もこのscss上で編集できます。 以上、link_to内にclassを作るのがポイントでした。

どうも7noteです。文章を途中で折り曲げる方法 某有名使徒アニメのタイトルで、文字がL字に曲がっていたので、「これCSSで再現できるのでは？」 ということで、まずは参考イメージを用意します。 ※筆者は某アニメを見ていませんのであしからず。 作り方 「縦(たて)書き」からの「横(よこ)書き」 index.html <p class="Ltype"><span>使徒</span>、襲来</p> style.css .Ltype { font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif; font-size: 40px; font-feature-settings: "palt"; } .Ltype span { -webkit-writing-mode: vertical-rl; /* Safari用 */ -ms-writing-mode: tb-rl; /* IE用 */ writing-mode: vertical-rl; } <結果> ふむふむ、それなりにいい感じ。 「横(よこ)書き」からの「縦(たて)書き」 index.html <p class="Ltype">せめて、人間<span>らしく</span></p> style.css .Ltype { font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif; font-size: 40px; font-feature-settings: "palt"; line-height: 1; /* ← 追記 */ transform: scale(0.6,1); /* ← おまけで追記 文字を長体にする */ } .Ltype span { -webkit-writing-mode: vertical-rl; /* Safari用 */ -ms-writing-mode: tb-rl; /* IE用 */ writing-mode: vertical-rl; vertical-align: top; /* ← 追記 */ } <結果> 解説 予めbodyに対して、color: #fff;とbackground: #000;を指定しております。 いわゆるLの方向に文字を曲げるほうが指定が簡単で、縦書きにしたいところをspanで囲ってあげて、縦書きのCSSを当てるだけで簡単に作成できます。 横書きから始まる場合は追加でいくつか指定が必要になります。特にvertical-align: top;がないと( 」)の形に配置されるので注意が必要です。 まとめ 普通のwebサイトを作っていれば作ることのないものなので、発想力が鍛えられます しやっていても結構面白いものです。 どうしてもwebでは字詰めが甘いので完璧にはならないですが、それっぽさを出すには十分の出来ではないかなと思います。 他にも思いついたらどんどんやっていきたいと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

ブラウザ側でしっかり対処して欲しいところではありますが対処方を見つけたので記載しておきます。 .icon { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #000; overflow: hidden; &:hover { transform: scale(1.05, 1.05); } } これだとネストされたimgがborder-radiusを超えて拡張される .icon { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #000; overflow: hidden; will-change: transform; //- 追記 &:hover { transform: scale(1.05, 1.05); } } will-changeで意図する動きにする。 will-changeについて CSS の will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。 引用 MDN Web Docs

入れ物（Container・Box）と内容物（Element、Component）の定義指針を定める 配置に関する定義は、要素を格納する入れ物（Container・Box）で定義し、個別の要素(Element、Component）ではできるだけ行わない。 要素は、装飾・形状・サイズに関するものの定義に留める。 特に、広域的に要素を利用する場合は、広域的な定義においては配置に関する定義は行わない。 要素はいろいろな場所で使われるため、位置を定義すると打ち消しなどの無駄な定義をいれることになる。 marginをつけるときも、汎用的な定義部分ではなく、個別ページのスタイル内で行う。 index.html <header> <img src="logo.png"/> <button type="button">ログイン</button> </header> _header.scss .g-header { display: flex; justify-content: space-around; } _nav-menu.scss @use "config" as c; .g-button { background-color: red; color: map-get(c.$color-set, "button-char-white"); } 備考(BEMの良さと疑問） BEMの設計の良さは、ただグルーバルやカスケードによる定義の衝突や打ち消し、予期しない影響を抑えることにとどまらず、親と子、入れ物と要素を意識するところにもあると思う。 CSSの定義において、BEMの親子・入れ物と要素という視点はとても重要だと思います。 BEMの命名方法については、冗長すぎるため疑義があります。（グローバルprefix、小さい階層、直下セレクタを組みあわせることで冗長なセレクタにする必要はないと思います。） BEMの命名法への疑義については、以下の記事でも指摘されています。 参考：BEM Is Terrible

１．概要 CSSを作成する上での観点のメモ。 設計論ではあまり言及されていない部分をプログラマー視点で考察。 （１）前提条件 SASSを利用してCSSを作成する。（2021年現在では、Dart-Sass+SCSSが多い） （２）方針 DRY,KISSの原則に基づく。 無駄な文字列を使わず、命名をできるだけ単純にする。（冗長化させない） ２．スタイルの定義方法の分類 　スタイルの定義の方法として、セレクタとmixinによる定義の２つの形式に分けられる。 　関数は、数値計算等に利用し、定義には使用しない。 （１）セレクタによる定義 HTML要素、id、classなどを定めて、それに対してスタイルを定義する。 CSSとしてユーザーのブラウザに送信される。（定義と実行を伴う） （２）mixinによる定義 独自の名前によりスタイルを定義。 複数の定義をまとめるショートカットの役割がある。 CSSとして直接は生成されず、ブラウザにも送信されない。（定義のみで実行は伴わない） 汎用的なスタイルの定義はmixinでショートカットを作成し、セレクタで使う。 実際にブラウザでは利用されないため、予期しない干渉を防ぐことができる。 ３．定義方法のメリット・デメリット セレクタ セレクタでの定義は、画面上に影響します。広域的に利用することで、CSSの定義数を減らすことができます。 上記は、無思慮に多数の定義をつくることで予期しない影響を及ぼします。 セレクタ名の工夫やソースの配置を考え、できるだけ最小限の数で定義することで問題を減らすことができます。 mixin 画面上に影響しないので、汎用的で些末な定義はmixinでした方が予期しない影響を抑えることができます。 一方、mixinは置換になるので、CSSのサイズが増えてしまうことがあります。 セレクタの定義を最小限にしつつ、その中で呼び出すことにより、結果的に、トータルでは少ないコード数になります。 ４．定義方法の使い所 セレクタ 標準の定義方法やmixinなどの定義を複数組み合わせて、画面上の部品に対して定義をする。 _box.scss @use "config" as c; .g-box { border: solid 1px map-get(c.$color-set, "box-line-gray"); } mixin 画面上の部品ではなく、汎用的で小さい範囲のものを定義する。 数行にわたるものを１行で呼び出せるようにする。 cssの標準ではわかりにくものに別名を与えてわかりやすくする。 _margin.scss @mixin h-center-margin { margin-left: auto; margin-righ: auto; } @mixin v-center-margin { margin-top: auto; margin-bottom: auto; } ５．最後に セレクタとmixinをうまく使い分けることで、予期しない影響を省きつつ、かつ、ビルドされたCSSのコードサイズを抑えることができると思います。 　

レスポンシブデザインのhtml記述方法 １．headにviewportを記述する ２．cssでメディアクエリを設定する １．headにviewportを記述する 用語 viewport：Webページを表示するデバイス（PCやスマートフォンなど）を検知し、そのデバイスの画面サイズなどを取得する。htmlのhead内にmetaタグで記述する。 ポイント viewportを記述しないとメディアクエリが機能しないので必ずセットで記述する！ 例） <!doctype html> <html> <head> <meta charset="utf-8"> <!--ここから--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--ここまで--> </head> <body> </body> </html> ２．cssでメディアクエリを設定する 用語 メディアクエリ：画面のサイズに合わせてCSSの適用を分岐できる機能 @media screen and (min-width:サイズpx) {　cssの定義　}で記載する ポイント ブレイクポイント デバイス 480px以下 スマートフォン(縦） 600px以下 スマートフォン(横) 960px以下 タブレット　　　　　　 1280px以下 パソコン(画面小) 1280pxより大きい パソコン(画面大) 例） <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--ここから--> <style> .media { background-color: #333; } @media screen and (min-width:480px) { .media { background-color: blue; } } @media screen and (min-width:640px) { .media { background-color: red; } } </style> <!--ここまで--> </head> <body> </body> </html>