Sass

Bootstrapをデフォルト設定のまま使用すると、いかにも"Bootstrapを使って作成した"感が出てしまうので、今回はBootstrapをカスタマイズする方法を学びました。 gyazo.com カスタマイズの流れ 1. Sassのコンパイラをインストールする ライブラリを選ぶポイント Composerを用いてコンパイラをインストール app.scssファイルをいじってカスタマイズしていく 2. BootstrapをSassでカスタマイズする 3. カスタマイズしたSassをCSSにコンパイルする 4. コンパイルしたCSSをHTMLで読み込む 最後に カスタマイズの流れ Sassのコンパ…

Bootstrapをカスタマイズしていくにあたり、Sassを用いると簡単にできるため、今回はSassの概要を把握しました。 Sassとは 背景 メリット Sassの基本的な使い方 Sassの特徴 ①ネスト CSSの書き方 Sassの書き方 ②変数 CSSの書き方 Sassの書き方 ③親セレクタの参照 SCCの書き方 Sassの書き方 ④@import 参考URL Sassとは Sass（サス）とは、Syntactically Awesome Stylesheets（構文的にイケてるスタイルシート）の略。 CSSをより便利に効率的にかけるようにした言語のこと。 背景 CSSだと複雑なことができな…

Tailwind の md:flex みたいなレスポンシブのクラスみないな prefix のあるクラスと楽に作れる mixin を作りたかった 環境 sass: 1.42.1 (Dart Sass) レスポンシブ用の prefix を付けたクラスを生成する _breakpoints.scss $breakpoints: ( xzs: 0, xs: 23.375rem, sm: 36rem, md: 48rem, lg: 62rem, xl: 75rem, xxl: 87.5rem, ); @function breakpoint($name, $breakpoints: $breakpoint…

(割とやりつくされたネタだから今更感すごいけど。。。) [ドラえもん CSS] とかでググると実装方法がわかってしまうため今回は終始ググらないようにして実装 できたもの 実装 感想 所詮丸と直線の組み合わせだし position とか使わんくても Flexbox だけでモダンなドラえもん作ってやるぜ!!!って思って手を出したけど意外とムズかった。position 使いまくって結局泥臭いコードになってる。(HTML構造のせいかもだけど) 完成後に他の方のドラえもんも見て回ったけど↓このドラえもんの完成度が圧倒的だった。体もあるし shopdd.jp 後これも。 俺の想定してたドラえもんの口がまさ…

フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち？ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sa…

日記 断酒29日目。23:20–8:10睡眠。8ポモドーロ。 今日は祖母の病院の付添などしたあと、夕方眠すぎて2時間ほど寝た。夜の睡眠時間は充分だと思うのだが、なぜ昼間や夕方に猛烈な眠気が襲ってくるのだろう。気合でどうにかなる問題ではないので、実効的な対策がしたい。 ウェブサイト制作を少し進めた。SASS を導入してスタイルシートを書き直し始めた。CSS 設計完全ガイドという本を最近読んでいたのだが、厳密に導入しようとするとクラス名のネーミングなどどうしていいか悩む。ブロックやエレメントの粒度がわからない。ともかく概念はある程度わかったので、そこまで厳密にやらずによしなにやることにした。どうせ…

毎度のことながら、オジサンはマークアップエンジニアである。 オジサンのお仕事は単にデザインデータをHTMLに起こすだけにとどまらず、 運用フェーズ移行後も更新が容易になるよう、あらかじめコーディング規約やCSS設計を行い、運用チームに引き渡すのも仕事に含まれている。 そんなオジサンであるが、ScssでCSSを書かない日はほぼ無いと言っても良いくらいである。 そして最近将来的な事を見据えて、Scssのコンパイルで使用しているnode-sass(LibSass)からdart-sassに移行することにした。 dart-sassに移行する上で細かい注意点は色々あるのだが、移行の壁である、@import…

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

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

■前回 詳細画面で対象データにスクロールを合わせる対応で、 jQueryを導入する必要があったので設定してみたがエラーで中断。 そもそもjQuery入ってなかった、Laravelなら初期から有効になってるのだと思い込んでいたのが落とし穴。 ■webpack.mix.jsの再修正 編集の仕方が悪かった模様。 編集前 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps(); 編集後 mix.js('resources/js/app.js', 'pu…

はじめに 自己紹介（2022年6月現在） 転職しようと思ったきっかけ 転職のための学習 独学 Progate(20.10〜) テックキャンプ （夜間休日コース）(21.3〜21.9)6ヶ月 独学 Udemy及びMENTA(Docker CircleCI AWS導入)(21.7〜) Docker CircleCI AWS オリジナルアプリ 面接対策 結果・感想 様々な逆風 嫁ブロック 職場ブロック 最後に はじめに みなさんこんにちは。 2022年4月から地方の自社開発企業でエンジニアをしていますたつと申します。現在は主にRailsを使って、バックエンドエンジニアとして仕事をさせていただいていま…

参考にさせていただいたページ Setup - Create a Next.js App | Learn Next.js Create a Next.js App (Next.jsアプリを作成する) 以下のコマンドでcreateしました。 npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" Navigate Between Pages (ページ間を移動する) 前のレッスンのコードを継続して使用します。 …

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

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

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

こんにちは。 今年４月より22卒エンジニアとして、スマートキャンプに入社したピーターこと佐々木です。 本記事では、入社エントリと題しまして、スマートキャンプへの入社理由と、実際に入社してみてどうだったかについて書きたいと思います。 自己紹介 なぜエンジニアになったのか エンジニアに興味を持ったきっかけ 原点は AI創薬とGoogleForm ひたすらに興味の幅をひろげる やりたいことなんてなくていい 私が大事にしていること 密な連携と高い生産性 密さとは 連携とは 生産性とは 広い視野をもつ 経験からしか学べない性格 〜なんでも自分でやりたい症候群だった〜 エンジニアの枠を超える イノベーショ…

やったこと add library sass（issue #28） prettier（issue #30） react-appの表示を止める（issue #26） dependencies→devDependenciesに変更 tsconfig 相対パスを絶対パスに切り替える（issue #32） content-frame componentの作成（issue #27） 作業途中！ frame用のcssを管理するため src/components/common/frame.scss を作成 src/App.tsx で以下項目が表示されることを確認 common/frame.scssがimpo…

飲み会のグループわけを偏りなく行いたい 大勢のいる飲み会で、一度に全員が話すのは大変なのでいくつかのグループにわかれることがある。 色んな人と話すために、グループを入れ替えるのだが、ランダムに行うと、同じ人と何度も同じグループになったり、一度も同じグループにならないひとが出てくる。 なるべく偏りなく多くの人と話せるようにグループわけを行いたい。 解決方法を考える ランダムで何パターンかグループわけをして、そのパターンのなかで一番ばらつきが小さいパターンを選ぶようにすれば単純に実装できないだろうか。 実装方法を考える 各メンバーごとに、これまでに何回同じグループになったのかというデータを保持する…

前回 ダイアログで投稿情報を入力させるため、livewireを導入。 ControllerからComponentクラスに変更してbladeファイルを元に画面を表示するように修正。 画面表示で「undefined 変数」のエラーで足止め。 ■bladeからComponentの変数を参照する記述 参考にしたサイトではComponentクラス内でpublic変数を定義して、 bladeからはその変数名を記述すれば参照できるような記述だった。 class AAA extends Component { public $valiavles; } だが、少なくとも当方の環境ではできず、 undefined…