Sassy CSS。Sassの差異実装。
CSSを，構造化された形でスマートにコーディングするためのツール。
Sassでは、親要素に指定された複数のクラス名のうち、特定のクラス名を持つ要素を選択するために、セレクタの複合クラスを使用します。 例えば、class属性が "a b" となっている要素に対して、"a"クラスの中で"b"クラスを選択する場合、以下のように書くことができます。 .a { /* aクラスのスタイル */ &.b { /* aクラスかつbクラスを持つ要素のスタイル */ } } 上記のSassコードでは、"&"を使用して親要素を参照し、"."を使用してクラス名を指定しています。"&.b"と書くことで、親要素が"a"クラスかつ"b"クラスを持つ要素を選択することができます。 例えば、以…
本記事では、SCSSをリアルタイムでコンパイルしてくれるVS Codeの拡張機能ご紹介しています。 Live Sass Compilerの準備 Live Sass Compilerの使い方 余談：より使いやすいSCSSの開発環境へ 参考記事 Live Sass Compilerの準備 まずはリアルタイムでSCSSをコンパイルしてくれるVS Codeの拡張機能を入れていきます。 まずはVS Codeを開き、左タブにある拡張機能の項目を選択してください。 そして検索項目に【Live Sass Compiler】と入力すると、2つほどでてきます。 ここで、斜線の入っていない方を選びインストールしてく…
Sassの勉強をしました。その内容をメモとして残します。Sassの入門的な内容について書きます。 ネスト 変数 mixin mixinに引数を渡す & 四則演算 CSSのcalc関数 import ネスト <!-- HTML --> <div class="header"> <div class="log"></div> <div class="tagline"></div> <div class="menu"> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></…
前回の記事で､BEMにメリットってある？って書きました｡ coooool.hatenablog.com クラス名が長くなるから嫌だ～｡ なんて思ってたのですが､どうやらそれは大きな間違い｡ 改めて勉強した｡ そして､ BEMはいいぞ｡ そんな感じで思いました｡ まだ､人様に説明できるほどの実力はないですが､詳しくなったら説明したいと思います｡ ただ､BEMは良いなと思っているわけです｡ だいぶ楽になりましたね｡ SCSSとセットで覚えれば､かなり良い線行くのではないかと｡ 個人的には､まずSCSSを覚えてからBEMに行くと良さそう｡ ぼくは､SCSSについてはだいぶ理解していて､BEMに行った…
CSS なら、https://purgecss.com がある。 では Sass なら？ ビルドされた結果からだけでなく Sass のソースコードからも使っていないセレクタを抹消したい気持ちはありますよね。 試みました。cc-kawakami/uchini: Find unused Sass codes npm i -g uchini $ uchini ls --help List CSS selectors usage USAGE $ uchini ls --scss <value> --content <value> [--output <value>] [--unusedOnly] FL…
Vite は、postcss-import を利用して @import を実現しています。 Features | Vite 例えば以下のようなコードがあるとします。 src/ ├── img/ │ └── about-mainvisual.png └── css/ ├── application.css └── pages/ └── about.css // src/css/application.css @import "./pages/about.css" main { background-color: white; } // src/css/pages/about.css .about…
SCSSはCSSのバージョンアップ版｡ CSSで書いていて､｢あ､このコード､何回も書いてるわ｣って時に､SCSSを使えば便利｡ たとえば､マージンとか｡予め､ @mixin mg($mgr: 30px) { margin-bottom: $mgr; } と書いておく｡あとは､mgと言う名前を付けた｡ デフォルトは30px（$mgr: 30px）｡ あとは､mgを呼ぶだけ｡ こんな感じで｡ .entry-header { @include mg; } ｢あ､マージン変えたい｣という場合､通常だと､コードを読んでいき見つけないといけない｡ 1箇所､2箇所であればそれも良いでしょう｡ しかし､10…
最近､ホームページ制作にはまっているわけですが､キャリアは長いです｡ 自分で言うのも何ですが､中級者以上のレベルだと思っています（笑）｡ しかし､ちょっと物足りなくなってきて､｢そろそろSCSSを勉強しようか｣と｡ そして､サクッと勉強を始めました｡ 今日は､@mixinについてです｡ サクッと行ってみましょう～｡ HTML まずはHTMLを｡ <div class="Visual"></div><!-- /.Visual --> 何を書いているのかというと､ボックスを作って､｢Visual｣というクラス名を付けたって話です｡ 空要素でSEO上問題ありかと思いますが､制作現場ではわりと使われて…
タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { color: #F00; } } これは動作しない。 (window が 48em 以上になっても color: #F00; にはならない) This may seem confusing at first. If our variables are ava…
とあるSVGを自分のPCで表示したかったのですが、SCSSを使っていたのでそのままでは表示されませんでした。SCSSをCSSに変換する必要があるということなので、Sassについて調べました。この記事では、Sassについて調べた内容と始め方について簡単に書きます。 Sass使用の流れ Sassの記法 SCSSの導入 ruby-sassのインストール Sassを気軽に試す 感想 参考サイト 補足 Sass使用の流れ Sassは、CSSをより便利に簡潔に記述できるようにしたものです。詳細は、他のサイトに譲ります。 Sass使用の流れは、以下のようになります。 SASS記法orSCSS記法で記述したフ…
環境 Vue:2.6.11 内容 Vue.jsのフイルターという機能を使うことで、画面に表示されるテキストを自由にフォーマットすることができます。 ローカルフィルター <template> <table> <p {{sample | lowerCase}} </p> </table> </template> <script> export default { data() { return { // この文字列を小文字化する sample:"VUESAMPLE" } }, // フィルター filters:{ lowerCase(value){ return value.toLowerCase…
この備忘録では、GPT-4の使用方法について簡単に説明します。GPT-4はOpenAIによって開発された大規模な言語モデルで、自然言語処理タスクにおいて高い性能を発揮します。ここでは、GPT-4の基本的な使い方と応用例を紹介します。 目次 GPT-4の概要GPT-4を利用するための事前準備GPT-4の基本的な使用方法GPT-4の応用例 1. GPT-4の概要 GPT-4 (Generative Pre-trained Transformer 4)は、OpenAIが開発した大規模な言語モデルです。GPT-4は、多様なデータソースから学習し、自然言語処理タスクにおいて高い性能を発揮します。GPT-…
Keen-Sliderというカルーセル用パッケージがいい感じだったので紹介します Keen-Sliderの何が優れているの？ 超軽い 依存ライブラリがない typescriptのサポート React、Vue、Angularをサポート 簡単 (参考記事)ics.media 使い方 前準備 package.jsonのインストール package.jsonを以下のように変更 { "name": "carousel", "version": "1.0.0", "description": "", "scripts": { "dev": "webpack serve --mode development…
Play FrameworkでTypeScript, SCSSを動かしてみたので、 備忘録も兼ねて記録を残します。 目次 sbtプラグインを追加する プラグインの設定 テンプレートからの参照 実際に動かす クライアント側のライブラリ依存関係を管理する おわり 参考文献 sbtプラグインを追加する sbtには、sbt-webというWeb開発用のプラグイン向けライブラリがあり、 プロジェクトでSbtWebを有効にしてsbt-web用プラグインを追加すれば、対応するファイルがコンパイルされるようになります。 https://github.com/sbt/sbt-web TypeScript, SCS…
webpack5でCSS/Sassを取り込む 安心のICS MEDIAでの記事。 ics.media frappe ganttをwebpackで使う際に、scssファイルの取り扱いでコンパイルができなかったのでこの記事を参考に構築。
ノートパソコンを使っていて、画面が1つは辛い。 なので、外付けモニターを買ってみたい。 高いので買えませんが。。。 さて、今日は珍しくホームページ制作のお話。 HTMLコーディングとは デザインカンプを作ってから HTMLコーディングは楽しい 正解があるので取り組みやすい さいごに HTMLコーディングとは WebサイトはHTMLコーディングをしています。 HTMLコーディングとはHTMLとCSSを書くことです。 慣れるまでが大変ですが、慣れるとWebサイトを作れます。 あと、CSSだけでも知っていれば、ブログデザインのカスタマイズも出来ますね。 このブログは、はてなブログなのですが、はてなブ…
タイトルの通りですが、クリックした箇所を起点にDOMを真っ二つに一刀両断したいなと思い、コードを書いてみました。 思い出の中のFF6の斬鉄剣のようなイメージで制作しましたが、シンプルに仕上げるためにエフェクトは入れていません。 一応、横方向、縦方向の2種類作成してあります。 横方向 縦方向 ソースコード（横方向） HTML（抜粋） <div class="box"><!--DOMの中に同じ背景画像を設定したDOMを2ついれる--> <div></div> <div></div> </div> JavaScript（抜粋） document.querySelector('.box').addEv…
Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。それに伴ってSassの初期の方から実装されていた@importが廃止予定になりました。とても便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面などがありSassでの@importは廃止予定になりました。その代わりに@useや@forwardといった新しいモジュールが使えるようになりました。大きな違いは「変数や関数などの有効範囲」です。 @importではこれらの有効範囲はグローバル（ファイル間を横断出来る）ですが、@useでは有効範囲がローカル（指…
remを使う時の注意点 remで起こる問題を解決するにはSCSSであれば関数を使う事で解決出来ます。 @function rem($px) { @return ($px / 16) * 1rem; } h1 { font-size: rem(36); /* font-sizeが36px相当にする */ } スマホ時にフォントサイズを画面幅に応じて可変にする SCSSでの方法 フォントサイズを可変にするにはremにvwとcalcを合わせて使用します。 ルート（html）のfont-sizeをcalc(100vw / 39)とすることで、iPhone12、13、14などの画面幅390pxのときは基…
初めに こんにちは。フロントエンドエンジニアの竹本です。 入社してそろそろ4ヶ月が経とうとしています。だいぶBASEの開発にも慣れてきました。 この記事では私が社内の静的アセットを管理しているリポジトリ(以降は便宜上static-repositoryと呼びます)のNode.jsのバージョンを12から16にあげたら、webpack dev serverの立ち上がりが約12分から約5秒に短縮できた話を紹介したいと思います。 この作業は業務の隙間時間でやったのですが、どのように取り組んでリリースまで持っていったかをお伝えできればと思います。 結論3行 webpack dev serverの立ち上がり…
TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらい techfeed.io 久々にCSSを触らなきゃいけなくなったんだけど、CSSを自分が触らなくなって5年近く経っていて界隈なにか変わったのかなーと思っていたところで、ちょうどいいイベントがあったのでオンラインで参加してみた。 記事投稿時点ではまだのようだが、配信アーカイブが公開される予定とのこと。 見つけられた公開資料についてはリンクを記載しているのでぜひご覧ください。 以下、各セッションコメント 今までああ書いてたアレ、これからはこう書けそう @yoshiko_pg 諸事情によりビデオセッションとなっ…
これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-size を px で指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォントサイズ」の項目です。 emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。 「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指…
この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得したリソースを元に生成します 1. はじめに 2022/08/16 に入社しました、Web フロントエンド開発を中心に行っている寺島です。 私は入社してから現在に至るまで、アンドパッドのデザインシステム 『Tsukuri』 の Web 向…
はじめまして！ ストアサービス開発部 神立（カンダツ）です。主に「BOOK☆WALKER」サービスのWebストア開発チームのマネジメントを担当しています。 自分の入社当初は弊社のWebサービスは電子書籍ストア「BOOK☆WALKER」（以後「BW」）くらいしかなかった筈ですが、何年も経つと会社も沢山のサービスを展開しているもので、そうなると人の手も猫の手も足りなくなるわけです。 はい、もうおわかりですね？ 「そこのエンジニアのアナタ、ちょっと一緒に働きませんか？」 という記事になります。※注ここでは「BWサービスのWeb開発エンジニアを募集」という部署特化の内容となります。対象サービスはコチラ…
【デジカルチーム ブログリレー3日目】 こんにちは、エンジニアリンググループ デジカルチームの穴繁です。 今回はクラウド型電子カルテであるエムスリーデジカルのフロントエンド開発にて、Visual Regression Test (VRT) を導入した話をします。
hail2u.net
dxd8.com
www.webcreatorbox.com
www.slideshare.net
wp.yat-net.com
dev.classmethod.jp
zenn.dev
qiita.com
tech.recruit-sumai.co.jp
