Sass

昨日も引き続き今週末と休み明けの打ち合わせ準備を行って行きました。 途中、社内の同じエリアの図面チェックを行いました。 未然に現場で起こるであろうトラブルを回避する為、エリア内の設計でチェックし合うシステムです。 これは非常に良くて、相手のチェックや冷静に第三者の目線で見る習慣が身に付くので、自分が図面を作成する際の見るチカラを養うことができます。 割と作成している人は、自分のプランに肯定的な目線になっていることが多く、 経験値が少ない人ほど、手持ちの経験値でしか勝負できないので、それぞれ経験年数の異なる人の目線で見ることで、成果としての図面は自分以上の力で作成できますし、その経験をインプット…

昨日は設計打ち合わせ中心の一日でしたが、やはり打ち合わせしている時が一番楽しいです。 むしろ、この為に日々の業務をこなしていると言ってもいいかもしれません。 人と関わることで、自分自身の変化や一緒に家づくりすることで可能性の探求、模索によって今まで沢山成長させてもらっています。 自分にないものを補完していくことが人と関わる大きな意味になっていると思います。 昨日よりも違った自分になる事を意識し続けることで、チリが積もればですが、少しずつ成長して行くと思います。 あまり起こっては欲しくないですが、悪いことが起こっても同じく、成長の兆しです。 如何に解決するか、解決して成し遂げることも、自分への自…

やればやるほど、わからん。 ひとつ？？になると、次も？？ 最終的には、何をやっているかわからなくなる・・・ みんなそうなのかな？ かじった程度の知識を持っていればわかるのかもしれないけど、 知識ゼロの私にとって、かなり難解。 { }が多すぎて、どこに向けての{ }なのかがわからない・・・ あるある？ 一人学習の欠点、相談者がいなーーーい！

一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね！ そのためにはどうしたら良いか？についてここでは学んでいきましょう。 CSS設計について OOCSSについて 「構造」と「見た目」の分離 「コンテナー」と「コンテンツ」の分離 Sassでの記述の注意 BEMについて【命名規則】 補足 参考サイト SMACSSについて Sassでの記述のポイント Sassについての復習 まとめ CSS設計について CSSには色々な書き方が有ります。それを効率的かつ管理しやすい形となるよう先人が体系化して共有してくれていたりします。それをCSS設計と呼んで…

SassのSCSS文法について学んでいきます。 Sassとは？ 入れ子の書き方 ＆でつなげる擬似要素・クラスの書き方 変数を使ってみよう 変数をつかった四則演算 定義したスタイルを使いまわそう @extendの使い方 @mixinの使い方 @extendと@mixinの違い @mixinを使ったメディアクエリの設定方法 解説（Sass） 【まとめ】Sassのメリット Sassとは？ ■Sassとは■ CSSを拡張して扱いやすくしたスタイルシートのこと。Syntactically Awesome StyleSheetの略（直訳：文法的に素晴らしいスタイルシート）。CSSで記述するよりも圧倒的に早…

レスポンシブ対応したサイトを作成する場合、PCとSPでスタイルを切り替えたり、表示内容を変えたりすると思うのですが、 私がやっているTSX側とSCSS側の切り替え方法について記載します。 React側の準備 react-responsiveを使って、指定サイズ以下になった場合をSPとして判定します（ここでは860px）。 インストール $ yarn add -E react-responsive -> "react-responsive": "9.0.2 判定コード hooks/useSp.ts import { useMediaQuery } from 'react-responsive';…

エラーの発生契機 解消方法1 解消方法2 エラーの発生契機 エラーの種類は以下 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (108)node.jsのバージョンアップで発生するエラーになると思います。 私の場合はnode.jsを2023年7月時点の最新である18.7.0にバージョンアップした時に発生しました。 解消方法1 とりあえずNode Sassのバージョンが合っていないようなので、node-sassとsass-loaderのバージョ…

こんにちは。@chaspyです。技術戦略グループのマネージャをしています。 本記事では dep-doctorという依存ライブラリのメンテナンス状態をチェックするツールを活用した事例を紹介します。 依存ライブラリのメンテナンス状態を確認したい スタディサプリ小中高では、言うまでもなく多くの OSS / ライブラリに支えられています。しかし、それらのライブラリがメンテナンスされなくなってしまったとしたら、以下のリスクが存在します。 セキュリティ: 既知の脆弱性が修正されない可能性があります。新たに発見された脆弱性に対して、パッチが提供されないため、プロジェクトがセキュリティ上の危険にさらされる可能…

湖畔（１４）IMMENSEE（１４） ——————————【１４】————————————————— ——Wie er so saß, wurde es allmählich dunkler；endlich fiel ein Mondstrahl durch die Fensterscheibenauf die Gemälde an der Wand, und wie der helleStreif langsam weiterrückte, folgten die Augen desMannes unwillkürlich． .——————————（訳）———————————————— そう…

インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 16.1 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。 note.com html htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの…

WEBデザインを学ぶ際、CSSは欠かせない要素の一つです。CSSを使いこなすことで、見栄えの良いウェブサイトを構築したり、ユーザビリティを向上させたりすることが可能です。 このガイドでは、WEBデザイナーのためのCSSコーディングに関する基本から最新のトレンド、効果的なテクニック、そしてレスポンシブデザインへの対応まで、7つのステップで詳しく解説します。CSSに関する疑問や質問に対する回答も含んでおり、初心者から上級者まで幅広く役立つ情報を提供しています。 さあ、一緒にCSSの世界を探索してみましょう。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール！ 副業・フリーランス…

ごあいさつ 本日、私たちの最新のスマートフォン向け単語学習アプリ “FlashCard(仮)” をリリースできることを光栄に思います。 なんちゃって。*1 この記事では、アプリ公開のご報告と簡単なご紹介をさせていただき、その他開発にまつわる雑記を書き留めておきます。 アプリのご紹介 概要 FlashCard(仮)はスマートフォンのWebブラウザ上で動く、英単語学習アプリです。 2024年3月現在、TOEIC向けの単語データを1250語収録しています。 こちらからお使いいただけます！ ※スマートフォン限定です。PCでも動くと思いますがスマートフォン向けにレイアウトしています。 コンセプトと機能の…

Webデザインにおいて、CSSは非常に重要な要素です。Webサイトのデザインやレイアウトを制御し、ユーザーエクスペリエンスを向上させるために欠かせない存在です。 本記事では、WebデザインCSSテクニックを紹介し、あなたのサイトを大幅にパワーアップさせる方法を解説します。まず初めに、WebデザインCSSの基本から始めて、最新のトレンドや効果的な適用方法、さらにはSEO対策との相互作用まで幅広くカバーします。 WebデザインCSSをより効果的に活用し、魅力的で使いやすいサイトを構築するためのポイントを探求していきましょう。各セクションで理論を解説しながら具体的な実装方法やベストプラクティスも紹介…

これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-sizeをpxで指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォントサイズ」の項目です。 emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。 「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する…

What You Need to Know about Modern CSS (Spring 2024 Edition) 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 コンテナクエリー (サイズ) いつ気にすべきか? サポート状況 基本的な使用例 コンテナクエリー (スタイル) いつ気にすべきか? サポート状況 基本的な使用例 コンテナユニット コンテナユニットとは? いつ気にすべきか? サポート状況 基本的な使用例 :has() 疑似セレクター :has() セレクターとは? いつ気にすべきか? 3 サポート状況 基本的な使用例 ビュート…

2022年に新卒入社し、GMOメイクショップ コアグループにてフロントエンドエンジニアをしている原田です。 調査も含めると約半年をかけた管理画面のVue2 / Vuetify2からVue3 / Vuetify3への移行が無事完了したので、その移行の軌跡を共有します。

経緯 & 概要 勉強の経緯 技術選定 開発中の一コマ Jest yarn とは ChatGPT TypeScript yarn buildで何をしているか github pages について そもそも yarn deploy で何をしているのか VSCodeからの拡張機能の提案 (Rainbow CSV) クラウド版 VSCode Github Copilot Chat ホスティングサービス選定 Github Pages Windowsの Powershell で yarn 一応 github pagesの始め方 npx Jestの始め方 jsdom と node 所要時間 経緯 & 概要 私…

Technicsのコアキシャルスピーカー「SB-RX30」を入手した。ウーファーエッジの復旧を主な作業として、まともに音が出るように調整した。その所感。 ※ この記事は、前後編の前編にあたるものです。 平面振動板同軸構造 外観 内部 前面プレート ウーファーエッジ 配線 ディバイディングネットワーク ドライバーユニット ウーファー ツイーター 後編へ続く