Sass

コンパイル とは？ 今まで「コンパイル」って聞かれたら、「機械語に訳す」っていう認識だった。 でも、sass から css にコンパイルするって聞いて、悩んだ。 調べると、「とあるプログラミング言語で書かれた記述を別の言語に変換すること」らしい。 つまり、sass で書いたものを、css 形式に変換することだと。 今回のsass から css のような同じレベル間のコンパイルは、 「トランスパイラ」や「クロスコンパイラー」と呼ぶそう。 でも、この(sass をcssにコンパイルする)必要性ってあるのかな？ 以下の sass の公式ドキュメントの文章によると、ざっくり要約すると、sass は c…

HTML/CSSとは 複数の画面を作るにはsassが必須 画面部品ごとに適用できるとよい インストール方法 公式サイトからダウンロード 言われるがままインストール さっそく使ってみる ローカルサーバーを自動で立ち上げてくれる 面倒な設定を気にしなくて良いのが素敵 ライセンス購入メッセージがやかましい 大規模な画面を作るなら自力で環境構築した方がいい 所感 最近、HTML/CSSのコーディングをする必要があったので、環境構築方法を調べたところpreprosが使いやすかったので、その使い方をまとめたいと思います。 HTML/CSSとは html/cssはwebページの画面構成と画面の見た目を記述す…

Sassでは、親要素に指定された複数のクラス名のうち、特定のクラス名を持つ要素を選択するために、セレクタの複合クラスを使用します。 例えば、class属性が "a b" となっている要素に対して、"a"クラスの中で"b"クラスを選択する場合、以下のように書くことができます。 .a { /* aクラスのスタイル */ &.b { /* aクラスかつbクラスを持つ要素のスタイル */ } } 上記のSassコードでは、"&"を使用して親要素を参照し、"."を使用してクラス名を指定しています。"&.b"と書くことで、親要素が"a"クラスかつ"b"クラスを持つ要素を選択することができます。 例えば、以…

Sassファイルを分割する際に考慮すべきいくつかの要因です。 プロジェクトの構造に基づく分割 プロジェクトの構造に基づく分割は、特定のフォルダ内に関連するファイルをグループ化することを意味します。たとえば、ヘッダーやフッターといったセクションは、それぞれ別々のファイルに分割することができます。 リセット、ベース、ユーティリティクラス リセット、ベース、ユーティリティクラスは、Sassファイルを分割する上で非常に重要です。これらのクラスは、CSSのプロパティを定義するための基本的なスタイルを提供します。これらのファイルを分割することで、コードの整理や再利用が可能になります。 構成要素の分割 We…

最近ブレイクポイントの書き方を少し変えた。すぐ忘れるのでAlfredのスニペットに登録するか、SASS開発セットみたいなものを作ればいいんだけど、備忘録的にブログに書いておく。ブレイクポイントのmixinいままでは@mediaを使ってたけど、こうすると@includeで呼び出せる。 ぶっちゃけどっちでもいいとは思う。以下の方法が今まで使ってたパターン。@mediaで呼び出しているので、パッと見でブレイクポイントなんだなとわかる。 $mq-xs: '(max-width: 480px)'; $mq-sm: '(min-width: 600px)'; $mq-md: '(min-width: 96…

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></…

復習シリーズ第３弾。 本日はSassについて。 早速やっていきましょう。 Sassとは SassはSyntactically Awesome Style Sheetsの略です。 CSSの拡張言語で、CSSを楽に書くための言語です。 JavaScriptとjQueryの関係に似てますね。 Sassを覚えてからというもの、 CSS ＝ Sassくらいの認識で書いていた気がします。 それくらい自然に使えますし、楽に書くことができます。 Sassの特徴 入れ子構造 CSSではセレクタの親子関係を示すのに、タグ名やクラス名を親が左に来るように区切りごとに半角スペースを入れて並べて書いていく必要がありまし…

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

生活 6:00に起きて、洗顔とひげそりをして、昨日買って置いた朝食を食べた。今日はFOSS4G 2023 FUKUI ハンズオンデイということで、8:00に駅に集合して順次福井県産業情報センターへ移動。僕は最後まで駅に残って対応していたのだけど、理由が顔が広いかららしい。もしかすると物理的に広いのかもしれない(何www.osgeo.jp午前はTerriaJSで始めるデジタルツインというハンズオンの手伝いをしていた。TerriaJSがApple Siliconで素直に動かないという状態で困ってしまった。https://t.co/azAMYi0kOY node-sass死んだと思ってたら生きてて辛…

↓↓クリックして頂けると励みになります。ランキング参加中プログラミング fontawesome.com Ruby on RailsでFont Awesomeを利用するためには、以下のステップを実行します。 Font Awesomeはアイコンフォントセットであり、アプリケーション内でアイコンを使用するのに役立ちます。 今回は、gemを追加する方法を紹介します。 Font Awesomeを使用するには、まずGemをインストールします。 font-awesome-sassというGemがあり、これを使ってFont Awesomeを簡単に導入できます。 Gemfileに以下の行を追加し、bundle i…

こんにちは。 デイトラ 初級編 【新】 DAY21～22 『saaの学習』 『カフェLPのCSSをSassで書き直してみよう』 まで、躓きながら進みました。 入れ子 動画で練習をした時は簡単に思えましたが いざ、カフェLPに書き替えてみると どこからどこまでを入れ子にするのか🤔 意外と時間が掛りました れこれ試していたらどうにか出来ました😁 変数 変数の使い方は、 意外と簡単でした😁 ”&”記号 aに対してhoverする時に&を使うと 良いみたいです🫡 @mixinを使ったブレイクポイントの記述 初めは、何が何だか解らず ググって調べてみる 『…❓』 とりあえずコードを書いて試して 『な～んか…

はじめに 2023年9月9日に開催された大阪Ruby会議03で、基調講演（キーノート）を担当させてもらいました。 regional.rubykaigi.org当日使った資料はこちらです。 発表のタイトルは"Enjoy Ruby programming, Enjoy Ruby community!"でした。 今回の基調講演ではちょっと攻めた取り組みとして、「Hotwireを使ったモーダルUIを15分で作る」というテーマでライブコーディングもしてみました。 www.youtube.comライブコーディングには思わぬトラブル付きものですが、今回は何とかノートラブルで実装できました！ 時間も15分以内…

GitHub Pagesで簡単なホームページなら作れたような気がすると思い立ったので、その時に行ったことのメモです。 基本的にはこのページの手順に沿ってやっていけばできると思います。 neko-mac.blogspot.com いくつか異なる点や追加で必要だったことなど、自分のメモ的なものを書いていきます。 この作業をする前提としてGitとVisual Studio Codeは使える状態にしておきます。これのやり方を書いているページはたくさんあると思うので省略します。 「Jekyll」はRubyで動く静的サイトジェネレーターです。読みたかは「ジキル」です。GitHub Pagesで使えるやつで…

Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が可能 他にも挙げればキリが無いですが、特にcssが数千行〜1万行くらいになってしまう場合や、頻繁に更新が入るサイトなどには必須と言って良いと思います。 ただ、今までのcssを全てsassに打ち直すわけではなく、今までのcssプラスアルファsassの便利な機能を使っていく、という形で良いと思います。 S…

アイコンと組み合わせた吹き出しのバリエーションを、いくつか準備。 いつか使うそのときのために。グッ(๑•̀ㅂ•́)و✧ KAORUKO この記事では、CSSのみを使用して作成された吹き出しデザインとアイコンの組み合わせバリエーションをご紹介します。 SAKURAKO かわいらしい要素を取り入れ、軽量でありながらも魅力的な吹き出しのスタイリング方法を学び、レスポンシブな設計にも対応させるテクニックを探求します。 魅力的なUIを構築するヒントなど、デザイン愛好者やWeb開発者の皆様からのクリエイティブなご意見などもいただけますと幸いです。 セリフを話すアイコンのバリエーション 吹き出しカラー 吹き…

まえがき 何か一つ簡単なものでも形にして外にアウトップットしようと 常々思ってはいたのですが、なかなか実行はできていませんでした。 やはり外へ公開となると、一気にハードルが上がってしまい 二の足を踏んでしまう方もいるのではないでしょうか？ 恥ずかしながら自分もその一人です^^; ただ今回、たまたま案件でReactを触る機会があり、 React未経験だったこともありかなり苦労して学習したところでした。 背景もあって、せっかく勉強したReactの個人的な最初のアウトプットとして 出来る限りハードルを下げて短期間に小さく形になるもの リリースできるものとして、自己紹介のWebサイトを題材してみました…

デザインエンジニアのきょんしー(@kyoncy_site)です。この記事は estie 真夏のアドベントカレンダー12日目の記事です！ estie は5月にリブランディングを行いました。形が大きく変わったのですが、カラーに関しても青みが強くなりよりくっきりした印象を与えるロゴになりました。 Brand new estie! 1年かけたリブランディングの舞台裏【プロセス全公開】 - estie inside blog estieの旧ロゴと新ロゴ リブランディングに合わせデザイントークンのライブラリを配信し、開発しているすべてのプロダクトに導入しました。これらの流れについてお話しできたらと思います…

ここ数年、自分の同人サークルである幻想サイクルの同人誌作成では、vivliostyleを使って原稿を作っている。 vivliostyle.org 組版アプリケーションを使っていて「このオプション、もう少し細かく設定できたらなぁ……」と思ったことはありませんか？ Vivliostyle を使った CSS 組版では、比較的柔軟かつプログラマブルに原稿のスタイルを設定できます。 最大でも年に2回しか同人誌を作成しない身としては、InDesignやIllustratorのような高価かつ、同人誌作成でしか利用しないスキルを身につけるのは様々な意味でコストが高い。（サークルカットなどを作るにもInksca…

仕事でReactからNextへの移行を行なったので、その時のメモ 新たにリポジトリを作成して行いますが、基本的に移行なのでパッケージ等はできるだけ同じものを使う前提で進めていきました Next.jsをインストール Githubで既にリポジトリを作成済みで、ローカルにクローン済みの地点からスタート まずは、Next.jsの立ち上げコマンドを実行 yarn create next-app --typescript 立ち上げ時の質問事項 What is your project named? … joins-public Would you like to use ESLint? … No / Ye…