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ではセレクタの親子関係を示すのに、タグ名やクラス名を親が左に来るように区切りごとに半角スペースを入れて並べて書いていく必要がありまし…

更新日時 2023/09/27/07:07 Qiita Trends Daily 1位 ※前日4位 Android,iOS,初心者向け,アプリ開発,Flutter Qiita Trends Daily 2位 ※前日7位 Python,機械学習,pandas,データ分析,データサイエンス Qiita Trends Daily 3位 ※前日3位 Python,GitHub,コードリーディング,OSS,ChatGPT Qiita Trends Daily 4位 ※前日2位 Linux,初心者 Qiita Trends Daily 5位 [New] PowerApps,PowerPlatform,Po…

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

インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 15.1 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 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…

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

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

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…

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

制作ポイント ・PC時は横並びのナビゲーションで、sp時はハンガーガーメニューに切り替える、その際にmatchMediaを使用する ・モバイルファーストでのサイト制作 ・トーンを合わせたカラーマネジメント ・ハンガーガーボタンをプラグインを使わずに自作 ・ローディングアニメーションにsvgのドローイングアニメーションを使用 ・Sassを使ってのサイト制作 - @useを使ってパーシャルファイルを呼び出す - @mixinを使ってメディアクエリを関数化する index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-…

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