20210910のCSSに関する記事は6件です。

【CSS】擬似要素beforeとafter(初心者向け)

はじめに 擬似要素とは、HTMLに記述することなく(擬似的な要素の追加)要素の特定の部分にスタイルを適用するものです。 名前のとおり、beforeを使うと特定の要素の前に、afterを使うと特定の要素の後にスタイルを適用します。 記述方法 HTML <p class="hello">HELLO</p> CSS .hello::before { content: "★"; color: red; font-size: 14px; } .hello::after { content: "●"; color: red; font-size: 14px; } このように記述すると、画面には★HELLO●と表示されます。 contentプロパティがないと擬似要素は機能しないので、文字等を追加しないときでもcontent: "";と記述する必要があります。 また、imgタグなどの閉じタグがないものについては使用することができないので、気をつけましょう!! おわりに 擬似要素を使えばアニメーションをつけたり、ふきだしをつけたり、いろいろなことができるので、試してみてください。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

よく使うCSSの技

はじめに 最近CSSを書くことが多くなったので、書きながら覚えたCSSの技をまとめていこうと思います。随時追加する予定です。 要素を中心に配置 marginを使って中心に配置したいときmargin: 0 auto;を使います。 css body { margin: 0; } .container { width: 500px; margin: 0 auto; } html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>header</header> <div class="container"> <nav>left</nav> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> 要素を横並びにする 要素同士を横並びにしたいとき、display: flex;を使います。 css body { margin: 0; } .container { width: 800px; margin: 0 auto; display: flex; } html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>header</header> <div class="container"> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> 要素を比率で配置する 要素を比率で配置したい場合、flex: 比率;を使います。 css body { margin: 0; } .container { width: 800px; margin: 0 auto; display: flex; } main { flex: 2; } aside { flex: 1; } html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header>header</header> <div class="container"> <main>center</main> <aside>right</aside> </div> <footer>footer</footer> </body> </html> レスポンシブデザイン対応 レスポンシブデザイン対応は、@media screen and (max-width: 数値)を使います。 下記のコードの場合、横幅が1000px以下になった場合、スタイルを適用させることができます。 css @media screen and (max-width: 1000px) { main { flex: 1; } } ダミーテキストの生成 Visual Studio CodeではEmmet記法が使え、その中のloremを使うとダミーテキストを生成させるものです。 使い方は、Visual Studio Code上でloremと入力するだけで、サジェストに表示されるようになります。 lorem数値と入力すると、数値の数だけダミーテキストを用意してくれます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

超初心者のBootstrap

Bootstrapとは 元々Twitter社が開発したフロントエンドのフレームワークで、基本的に無料で利用でき、わざわざ自分でCSSを定義しなくても見栄えの良い入力フォームやテーブル(表)のエレメントを作ることができる。 使い方は、Bootstrapをダウンロードまたは読み込みしておき、各HTML要素にBootstrapで予約されているclass名を指定する。 「これはform要素」「これはlist要素」といったカスタマイズされた指定だけでなく、単にmargin指定やsizing指定も予約されたclass名の指定で実現できるので、いちいちHTML要素に固有のclass名をつけてCSSファイルも用意して定義して・・・という手間がいらない。 そういう面では可読性も増す。 とはいえ色々出来すぎるので、とりあえずちょっと簡単なアプリ作りたいだけなんだよねというときにも使うであろう3つの要素を挙げてみた。公式のドキュメントも日本語が用意されていて非常にわかりやすいのだが。 container要素 関連のあるまとまりをこれに入れておけば整列された見栄えになる。  <div class="container"> <div class="row"> <div class="col"> </div> </div> </div> container=箱  row=行 col=列なので、 縦に並べたいものをrowを分けて、横に並べたいものを同じrow要素の中にcolで分ける・・・くらいわかっておけば何とかなる。 注意したいのが、col要素の指定の仕方について。 「col-6」「col-12」といった列の大きさを指定できるオプションがあり、これは1行(1個のrow要素)を12で割ったうちの6個分の大きさだよとか12個分の大きさだよという意味になっている。つまり後ろの数字の合計が12までしか入りきらないので、「col-4」なら3つまで置けるが「col-6」は2つまでしか置けないし、さらにもう1つ置こうとすると勝手に改行されてしまう。 form要素 ユーザー登録や記事投稿などの入力フォームを作れる。 <form> <div class="container"> <div class="row"> <div class="col"> <label for="email" class="form-label">email</lavel> <br /> <input type="email" class="form-control"> </div> <div class="row"> <div class="col"> <label for="password" class="form-label">password</lavel> <br /> <input type="password" class="form-control"> <div class="form-text"> 半角英数字6文字以上で入力してください。 </div> </div> </div> <div class="row"> <div class="col"> <label for="password_confirmation" class="form-label">password_confirmation</lavel> <br /> <input type="password" class="form-control"> </div>           <div class="row">  <div class="col">             <button type="submit" class="btn>Submit</button>            </div> </div> </div> </div> </form> form-lavel=ラベル要素 form-controll=インプット要素 form-text=インプット要素の注釈テキストを組み合わせて作る。 そしてもう一つ、送信ボタンはbtnクラスを指定して作る。ボタンの大きさや色も変えたければ指定するクラスである程度は自由に変えられる。 railsのヘルパーとも組み合わせできる。 <%= form_with model: @user, url: user_registration_path, local: true do |f| %> <div class="container"> <div class="row"> <div class="col"> <%= f.label :email, class:"form-label" %><br /> <%= f.email_field :email, class:"form-control"%> </div> <div class="row"> <div class="col"> <%= f.label :password, class:"form-label" %><br /> <%= f.password_field :password, class:"form-control"%> <div class="form-text"> 半角英数字6文字以上で入力してください。 </div> </div> </div> <div class="row"> <div class="col"> <%= f.label :password_confirmation, class:"form-label" %><br /> <%= f.password_field :password_confirmation, class:"form-control" %> </div> </div> <div class="row">  <div class="col">             <%= f.submit "Submit", class:"btn>            </div> </div> </div> <% end %> card要素 枠線で区切られた1つの段落を表示する。記事とかツイートといった投稿を表示する際に便利。 <div class="card" style="width: 16rem;"> <img class="card-img-top" src="URL"> <div class="card-body"> <h5 class="card-title"> タイトル </h5> <h5 class='card_text'>     ツイート </h5> </div> </div> 「card」で全体をまとめ、「card-body」にコンテンツを記載していく。card全体の大きさはstyleオプションで指定する。 ※ちなみにbodyがあるように「card-header」「card-footer」もある 「card-title」「card-text」はその名の通りタイトルとテキストなので、例えば投稿された記事のタイトルと要約を表示するときなどによく使う。 また「card-img-top」はカードの上の方に画像を表示してくれる。これも画像付き投稿などの表示によく使う。 終わりに container,form,cardを組み合わせることでユーザーに各種登録・投稿をさせる→その結果を表示する、くらいの簡単なビューファイルは作れる。 他にも凝ろうと思えばいくらでも凝れる、機能盛りだくさんのbootstrapなので、まだ使ったことがないよという人はぜひ試して欲しい。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ツクリンクのCSS設計と書き方

はじめに この記事はツクリンクのエンジニアを対象に、サービスで利用されているCSS設計の概要を知り、実際にマークアップできるようになるためのドキュメントです。 社外にも公開することで、CSS設計と運用の一例として参照していただいたり、改善意見の募集、今後ツクリンクで一緒に開発していただく可能性のある方に開発体制をよく知っていただくことも期待しています。 疑問点、改善点などあればお気軽にコメントしてください。 ※ここで紹介した設計、運用は執筆現在のものです。記事の更新状況によっては実際の運用と異なる可能性があります。 CSS設計の変遷 現状のCSS設計の詳細の前にこれまでどのようなCSSが書かれてきたのかを説明します。 v1, 規則無し 初回リリース時はid, clsss, 要素型セレクタなどを複数使ったマークアップをしていました。 一部の古いページ、SP版のレイアウトで極稀に残っている可能性があります。 #main .articles p { } #main .articles .header { } v2, MindBEMding チームで開発することになりMindBEMdingをベースとしたCSS設計を導入、ファイルはBlockごとに分け、クラスの衝突を防いでいました。 _block.scss .block { &__element { &--modifier {} } } # ディレクトリ構造 ├── application.scss ├── _mixin.scss ├── _valiables.scss └── blocks ├── _articles.scss ├── _block.scss ├── _beer.scss └── _pizza.scss v3, FLOCSS CSS設計にFLOCSSを採用。 デザインにはAtomic Designを採用し、デザインからCSSへの連携を考えるようになりました。 FLOCSSについて FLOCSSはレイヤー分けしてUIコンポーネントを管理する、マルチクラスパターンのCSS設計手法です。 基本的に、複数セレクタを使ったカスケーディングはせず、1つのクラスセレクターのみを使いモジュールを作ります。 FLOCSS(フロックス) は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。 hiloki/flocss: CSS organization methodology. /* OK */ .c-button {} /* NG */ .c-button .c-text {} レイヤー構造 レイヤー構造と合わせて、実際にどの様に使っているかを説明します。 FLOCSSは次の3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。 - Foundation - reset/normalize/base... - Layout - header/main/sidebar/footer... - Object  - Component - grid/button/form/media...  - Project - articles/ranking/promo...  - Utility - clearfix/display/margin... hiloki/flocss: CSS organization methodology. Foundation Reset.cssやNormalize.cssなどが入っています。 当時のリニューアルのタイミングや思想の違いがあり、PC版ではNormalize.css、SP版ではReset.cssが使われています。 これは若干の負債となっていて、コンポーネントなどでは基本的に margin: 0 など初期化を明示的にする必要がある場面があります。 Layout ヘッダー、フッターなどサイト内共通のパーツが入っています。 Object Object内に3つの子レイヤーがあります。 Component ボタンやラベルなど再利用できるモジュールです。 再利用可能なものは基本的にここに入ります。 Project ページ固有のモジュールです。 サーバーサイドはRailsを利用しているため、基本的にはコントローラー/アクション名に合わせて命名しています。 例:UsersController#show -> .p-users-show コントローラー名などが長い場合、他と被らなければ短い命名をしても問題ありません。 例:StaticPageController#guide -> .p-guide Utility ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。 margin や font-weight: bold などの便利クラスを入れています。 特にmarginをコンポーネントには持たせたくないためutilitiesを使う、もしくはProjectで吸収することを推奨しています。 objects/utilities/_margin.scss .u-margin-t8p { margin-top: 8px !important; } 命名規則 MindBEMdingを利用します。 コンポーネントをBlock、コンポーネント内でしか生きられない要素をElement、特定のプロパティを上書きする属性をModifierと呼び .block-name__element-name といった形式でクラス名を付けます。 ※詳細については公式ドキュメントを見たほうが早いです Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというようにすることもできます。 hiloki/flocss: CSS organization methodology. objects/componets/_form.scss .c-form { &__label {} &__input { &.is-disabled {} } } ツクリンクでの具体的な運用方法 前提 現在はAtomic Designをベースにデザインし、CSS設計にはFLOCSSを利用したデザインシステムを作っている最中です。 このデザインシステムを TDS(Tsukulink Design System) と呼んでいます。 ファイル構成 Railsのasset pipelineに乗っています。 基本的にはPC/SPで別になった1つのCSSファイルにまとめられますが、読み込みの高速化対応をしているページでは必要な個別のエントリーポイントを用意し必要なCSSのみ読み込んでいます。 カッコ内は作られた時期と利用法 app/assets/stylesheets/ ├── amp (AMP用のCSS) ├── common (v2 同ディレクトリmobile/pcで共通で使われるもの) ├── lp (LP用の独立したCSS群) ├── mobile (SP版で利用される) ├── blocks (v2 様々なコンポーネント) ├── globals (v2 同ディレクトリ全てのエントリーポイントで読まれるもの) ├── _mixin.scss ├── _valiables.scss ├── application.scss (SP版全体で使われているエントリーポイント) ├── companies-show.scss (CompaniesController#showでのみ使われるエントリーポイント) ├── その他エントリーポイント ├── pc (PC版で利用される 同ディレクトリmobileとほぼ同じ) ├── tds (v3 FLOCSSベースのCSS エントリーポイントは同ディレクトリmobile/pcにあり、そこから読まれている) ├── foundation ├── layout ├── object ├── components ├── projects └── utilities ├── _mixin.scss ├── _var_colors.scss ├── _var_fonts.scss ├── _var_z_index.scss ├── base.scss (TDS全てが入っている) └── core.scss (objects以外が入っている、高速化のため必要なコンポーネントのみ読み込むエントリーポイントで使う) コンポーネント名 Atomic Designのレイヤー訳をされているFigma上にあるデザインデータからコンポーネントを作成します。 基本的にFigmaのコンポーネント名がそのままCSSの命名に使われます。 同名のコンポーネントがあるか調べるだけなので既に実装済か確認する手間を減らせます。 Atomic DesignとFLOCSSのレイヤー構造が異なるためエンジニアの判断が必要になりますが、基本的には以下のとおりです。 # Atomic Designレイヤー -> FLOCSSレイヤー Atoms -> Component Molecules -> Component Organisms -> Component or Project Templates -> Layout Pages -> Project 実装をする場合 FLOCSSに従い書いてください。 コンポーネントやファイルの作り方 新しいCSSを書く場合、app/assets/stylesheets/tds にコンポーネントを作成します。 ページ固有のCSSはFLOCSSに従い tds/objects/projects に作成してください。 既存CSSの改修の場合でも、古いコンポーネントを削除しTDSに追加できないか検討してください。 LPなど独立したページの場合はTDSディレクトリ以外(lp, mobile, pc)で新しいエントリーポイントを作り、そこに閉じ込めることも可能です。 ※この場合でも開発者全体の理解のしやすさからCSSの命名規則はTDSから外れないことを推奨しますが、外部パートナーに実装いただいたり等あるため必ずではありません。 Typographyなどのfontやアイコンについて tds/objects/components/_font.scss にまとまっています。 Figmaの情報を参照すると small medium 等のサイズを確認できるのでそれに合わせたコンポーネント(.c-f-medium)を利用してください。 ※特殊な場合を除きProjectで再定義する必要はありません。 アイコンはMaterial Iconを使用しています。 ※SVGのアイコンを利用している場合もあります こちらもFigmaで利用しているアイコンの名前がわかるため参照し Material Iconのコンポーネント .c-f-icon を利用して実装してください。 Material Iconについては公式ドキュメントを参照してください。 プロパティについて autoprefixerを利用しているためベンダープレフィックスの記載は不要です。 プロパティの順番に定義はありませんがアルファベット順が多いです。 SP版のCSSの書き方 TDSはPC/SP両方で利用されますが、ビューのレイアウト等も別れていることや、古いCSSは完全に別になっている影響でレスポンシブにはなっていません。 そのためPC/SPを判断するために body タグに is-sp というクラスを付与しています。 TDSコンポーネント内でSP版の場合のCSSを書く場合は以下のようにしてください。 _post.scss .c-post { border: 1px solid #f00; .is-sp & { border: 0; } } メディアクエリを利用した場合、その箇所だけSP表示でヘッダーのみPCといったことが起こる可能性があることに注意してください。 Mixin, 変数のスコープに注意する 各コンポーネント内でのみ使うmixinや変数はグローバル汚染/上書きをさせないため、以下の方法を使いスコープを閉じてください。 _post.scss /* _を付けてファイル内プライベートにする */ @mixin _hoge {} $_var: 123px; .c-post { /* 名前空間内に入れてスコープを閉じる */ @mixin moge {} $nested_var: 123px; } JSで操作する要素 JSで操作する要素はスタイルを当てるクラスと違うことが分かりやすいよう js prefixを付けたクラスまたはIDを用意し操作してください。 <div class="js-hoge-item"></div> <div id="js-hoge-modal"></div> <script>$(function() { $('.js-hoge-item').on('click', ...)</script> エントリーポイントを増やし読み込む場合 高速化やLPなどでCSSのエントリーポイントを増やす場合は app/assets/config/manifest.js に新たに追加するエントリーポイントのファイルを指定 読み込む必要があるViewファイルで stylesheets_file_name でエントリーポイント名を指定してください。 app/views/posts/show.html.erb <% provide :stylesheets_file_name, 'pc/posts-show' %> 注意点やよくある間違い Elementをネストしない、ユニークで短い命名をする 可読性を上げるためクラス名を短くします。 以下の様なDOMがあった場合、 <from class="c-form"> <div class="c-form__row"> <label>Name</label> .c-form__row__label といったElementをネストした命名はしない .c-form__row-label とするより、 row 配下であることを明示する必要が無いので .c-from__labelとすることを推奨します。 記述量が減らせ、CSSファイル内でのネストも減らせるので見通しやすくもなります。 _form.scss .c-form { /* 2段目にelementが揃うように書くと分かりやすい */ &__row {} &__label { /* 3段目は疑似要素やmodifiereくらいが入る */ &::before {} &--requiered {} } /* 特定Element配下のみで使い、他にも使われる名前になる可能性はその限りでない */ /* ※それでも固有な名前をつけられる方が良い */ &__heading { &-text {} } &__footer { &-text {} } } 詳細度を上げない CSS崩壊は詳細度の戦争の歴史です。 詳細度を上げる誘惑に勝つことが平和な世界を手に入れる一番の方法です。 原則としてカスケーディングを禁止していますが、公式ドキュメントにもある通り、ProjectレイヤーでComponentレイヤーのモジュールを変更することを許容しています。 ですが、カスケーディングせずともプロパティの上書きが可能な場合が多いです。 .p-hoge > .c-button .p-hoge > a などが出てきたら改善出来ないか確認してみましょう。 原則として、モジュール間のカスケーディング、他のモジュールを親とするセレクタを用いたカスケーディングは禁止とします。 ~~中略~~ 例外として、レイヤー間におけるカスケーディング、例えば、次のようなProjectレイヤーがComponentレイヤーのモジュールを変更することは許容します。 ただし、このような例であってもセレクタのカスケーディングをおこなう必要はなく、次のようにProjectレイヤーのElementや、ComponentレイヤーのModifierによって拡張することによって解決することができる場合があります。 カスケーディングと詳細度 Extendを利用しない CSSプリプロセッサの多くが持つ、セレクタを継承するためのExtendは、原則そのモジュールで完結する継承以外では利用を禁止します。 CSSプリプロセッサのExtend Extendの弊害はこちらの記事が参考になります。 さいごに 現状の運用で複数名での開発にも耐えられていますが、今後更に増えた場合に新しいメンバーのキャッチアップしやすさも考えていきたいポイントです。 また今後の課題で大きいものは以下が考えられます。 古いCSSの一掃 レスポンシブ対応 @ツクリンクエンジニア ざっと書き出したので抜けがあるかもしれません。 長いので冗長な箇所や説明不要な項目がなどあれば教えてください。 @みなさん 意見や改善点を広く募集しています。 詳細聞きたいなどありましたらお気軽にご連絡ください。 採用も行っています。 ※この記事はZennからの転載です。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

iPhoneでも全画面表示させたい、んだ。

はじめに Fullscreen API に対応していない iPhoneで、どうしても全画面で表示させたい時がある。 特に landscape時の上部バーは、普通のサイトではスクロールすると隠れてくれるので邪魔に感じることはない。しかし、パノラマやVR等のコンテンツを表示する場合は邪魔に感じてしまいます、よね。 PWAにしてホーム画面に追加で解決はする、するのかもしれない、、がそうじゃない、んだ。解決はするかもなのだが、わざわざホーム画面に追加したりはしなかったりとか、するよね。 こんな時、個人的に好きなこがいる、krpanoである。 上下にスワイプして上部バーを隠してくれる。 他のコンテンツでもコレをやりたい、んだ。 やってみよう サンプルコード index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <style > * { margin:0; padding:0; } html { height:100%; } body { height:100%; font-family:Lato, sans-serif; color:#fff; line-height:1.8; } #fs { overflow:hidden; position:absolute; z-index:2; display:none; justify-content:center; align-items:center; width:100%; height:calc( 100vh + 1px ); background-color:RGBA(0,0,0,0.8); touch-action:pan-y } #container { overflow:hidden; position:relative; z-index:1; top:0; width:100%; height:100%; background-color:#b1dff7; touch-action:none; } @media ( orientation:landscape ){ #container { height:100vh; } } </style> </head> <body> <div id="container"> <p style="position:absolute;left:5px;top:5px;width:40px;height:40px;background-color:#fff;"></p> <p style="position:absolute;right:5px;top:5px;width:40px;height:40px;background-color:#fff;"></p> <p style="position:absolute;right:5px;bottom:5px;width:40px;height:40px;background-color:#fff;"></p> <p style="position:absolute;left:5px;bottom:5px;width:40px;height:40px;background-color:#fff;"></p> </div> <script> let _ua = navigator.userAgent.toLowerCase(), _container = document.querySelector('#container'); if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){ var _fs = document.createElement('div'); _fs.id = 'fs'; document.body.insertBefore(_fs, _container); _fs.innerHTML = '&#8593;&#8595;&nbsp;SWIPE'; document.addEventListener( 'DOMContentLoaded', fs_display ); window.addEventListener( 'resize', fs_display ); function fs_display() { if ( window.orientation == 0 || ( window.orientation != 0 && screen.width - window.innerHeight <= 20 ) ){ _fs.style.display = 'none'; } else if ( screen.width - window.innerHeight > 20 ) { _fs.style.display = 'flex'; } } } else { _container.style.height = '100%'; } </script> </body> </html> 構造 HTML <body> <div id="fs">↑↓&nbsp;SWIPE</div> <div id="container"> // Your contents. </div> </body> CSS html, body { height:100%; } #fs { overflow:hidden; position:absolute; z-index:2; display:none; width:100%; height:calc( 100vh + 1px ); touch-action:pan-y } #container { overflow:hidden; position:relative; z-index:1; width:100%; height:100%; touch-action:none; } @media ( orientation:landscape ){ #container { height:100vh; } } html, body, div#container を height:100%、div#fs を height:calc( 100vh + 1px ) とし、landscape時の div#container を height:100vh とします。 landscape時、コンテンツの高さを 100vh とし div#fs の高さを +1pxすることによって、上下スワイプによる上部バーの移動がよりスムーズに処理されます。 Android等において、下部バーに要素が隠れないよう iPhone Safari 以外は js にて height:100% に戻します。 div#fs, div#container を overflow:hidden とし、div#fsは touch-action:pan-y、div#contanerは touch-action:none とし制限をかけます。 制御 JS let _ua = navigator.userAgent.toLowerCase(), _container = document.querySelector('#container'); if ( (/iphone/.test(_ua)) && !(/crios|edgios/.test(_ua)) ){ var _fs = document.createElement('div'); _fs.id = 'fs'; document.body.insertBefore(_fs, _container); _fs.innerHTML = '&#8593;&#8595;&nbsp;SWIPE'; document.addEventListener( 'DOMContentLoaded', fs_display ); window.addEventListener( 'resize', fs_display ); function fs_display() { if ( window.orientation == 0 || ( window.orientation != 0 && screen.width - window.innerHeight <= 20 ) ){ _fs.style.display = 'none'; } else if ( screen.width - window.innerHeight > 20 ) { _fs.style.display = 'flex'; } } } else { _container.style.height = '100%'; } div#fs は iPhone Safari のみDOM生成します。 landscape時に div#fs を表示し、上下スワイプで上部バーが隠れると同時にウィンドウリサイズイベントがトリガーされ div#fs がdisplay:noneとなります。 まとめ Safari以外は、試行錯誤を繰り返した結果、、未対応となっております。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Ruby on Rails】font-awesome-sassを導入してアイコンを重ねて表示する方法

対象者 RailsアプリにFont Awesome導入予定の方 Font Awesomeを重ねて表示したい方 目的 * アイコンを重ねて表示する! イメージは下記の通り 使用環境 Rails 5.2.5 注意:Rails6をご使用中の方は導入方法が異なります。詳しくはこちらを御覧ください 実際の手順と実例 1.FontAwesomeを設定する Gemfile gem 'font-awesome-sass' 導入後はbundle installを実行する 続いてapplication.cssをapplication.scssに書き換えて下記のコードを追記します。 順番を入れ替えないように注意! application.scss @import 'font-awesome-sprockets'; @import 'font-awesome'; 2.アイコンを重ねる表記方法 <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fas fa-circle fa-stack-2x "></i> <i class="fas fas fa-search fa-stack-1x fa-inverse"></i> </span> </div> 3.解説 複数のアイコンを重ねるにはfa-stackで重ねる2つの要素の親要素として指定します。 続いてiタグで囲まれたアイコンを最背面から順に記述します。 fa-stack-2x、fa-stack-1xと指定することで、背面のアイコンの大きさが重ねるアイコンの大きさの2倍になります。 これで実装完了です! 参照 Stacked Icons (FontAwesome 公式) 【Rails】 font-awesome-sassの使い方を徹底解説!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む