この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) Sassの関数ってなんだか難しそう…と考えていませんか? 実は基本的なルールと書き方さえ覚えてしまえばとても簡単なんです…! そこでこの記事では、Sass関数の種類やオリジナル関数の作り方までまとめて解説します! 記事を読み終えると関数の知識が深まり、あなたのコーディング速度もさらにアップさせられますよ! Sassの関数とは?関数とはSassで使える機能の一つで、CSSプロパティの値を自動で計算する処理セットのようなものです。 関数には
Sassファイル(.scss)に @charset "UTF-8"; を書いていても、コンパイルして出力されたCSSファイルからは削除されていました。 Sassファイルの中身によって、@charsetがあったり無かったり。 出力オプションによってはBOMが付くケースも。 @charsetが消えるのはどんな時? 何が条件でそうなってしまうのか調査、整理しました。 @charset削除はSassの仕様 ブラウザがCSSファイルの文字エンコードを判別するには複数の方法があり、@charsetは必須というわけでもないようです。 ファイル先頭にある Unicode byte-order 文字 (BOM) の値 Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値 CSS の @charset at-規則
グーグルマップより使いやすい!? 3月にアップデートされた最新「無料地図アプリ」を試してわかった進化とは CAR & BIKE / COLUMN / LIFE & CULTURE / OTHER 2023-3-17 writer 会田肇 Yahoo!JAPANが提供する無料地図アプリ「Yahoo!マップ」が2023年3月にアップデートされました。主な改良としてはApple CarPlayに対応したことが挙げられます。スマホでGoogleマップを使っている人も多いですが、このYahoo!マップの使い勝手はどうなのでしょうか。実際に試してみました。 2023年3月のアップデートでAppleカープレイに対応した「Yahoo!マップ」 Yahoo!JAPANは2023年3月3日、無料地図アプリ「Yahoo!MAP」のiOS版をApple Carplayに対応したと発表しました。 同時にYahoo!
【徹底解説】これからのエンジニアの必携スキル、プロンプトエンジニアリングの手引「Prompt Engineering Guide」を読んでまとめてみた こんにちは。CX 事業本部 Delivery 部のきんじょーです。 ここのところChatGPT と戯れてアプリを作ったり、様々なプロンプトの検証をしていましたが、言語モデルの性能を最大限に引き出すために、体系的にプロンプトエンジニアリングを学びたいと考えていました。 GitHub に「Prompt Engineering Guide」という素晴らしいリポジトリがあったので、読んで検証した内容をブログにまとめていきます。 本記事は、執筆時点の上記リポジトリの内容を元にしていますが、意訳や独自に検証した日本語のプロンプトを含みます。 上記リポジトリも絶賛開発中の段階のため、最新情報や原文が気になる方はリポジトリを直接参照してください。 目次 プ
この記事では VS Code を日本語化するための手順と、いくつかの便利な設定について紹介していきます。 VS Codeの日本語化 VS Code を日本語化するための手順を解説します(なお、VS Codeのバージョンによって表記が多少違う場合があります)。 ↑ VS Codeを起動します。 ↑ サイドバーにあるExtensionsのアイコンをクリックします。 ↑ このような画面になります。 ↑ 検索窓でJapaneseと検索し、『Japanese Language Pack 日本語』をクリックしてください。 ↑ 『Install』をクリックします。 ↑ 『Change Language and Restart』をクリックし、VS Code を再起動します。 ↑ 表記が日本語表示になっていれば成功です! Emmetの設定 VS Codeのemmetで『!』を入力すると出てくるコードですが
Sassの特徴の1つに「変数」機能があります。 現在はCSSにも変数機能があるので、そこまで便利に思わないかもしれませんが、Sassならではの特徴があります。 今回はDart Sassの変数機能についてまとめておきます。 変数を使うメリット「変数」はJavaScriptや他のプログラミング言語を使っている人にとってはおなじみの機能です。 値に名前を付けて管理することは、いくつかのメリットがあります。 同じ値を複数箇所で使い回せるまず、変数を使う大きなメリットは同じ値を複数箇所で使い回せるようになることです。 例えばウェブサイト上で使うボタンの色やシャドウの強さなど、変数にして管理することで修正時に1箇所変更するだけで反映されます。 同じ記述を何度も書く必要がなるため、効率化にも繋がります。 どんな値か分かりやすくなるまた、変数で管理しておくことで、どんな値なのか分かりやすくなるメリットもあ
Sassを使うメリットの1つに「ファイルの分割」が挙げられます。 普通にCSSで書く場合、style.cssのような1つのファイルに書いていくと、気がつけば数千行のコードになってしまい、縦の移動がかなり面倒になってしまいます。 かといって細かくCSSを分けたりすると、どのページでどのCSSを読み込んでいるのか管理がややこしくなります。 また、CSSファイルを追加する度に関連ページのHTMLを修正する必要が出てきてしまうので、気軽に細かくファイルを分割できません。 もちろんルールを決めておけば問題なくなりますし、余計なCSSを読み込まなくて済むので良い方法ではありますが、Sassであればファイルを分割して最終的に1つのCSSファイルにまとめられるので、気軽に細かくファイルを分割していけます。 今回はDart Sassでのファイル分割方法についてまとめておきます。 Dart Sassのファイル
Sassの前提知識Sassは「Syntactically Awesome StyleSheet」の略で、直訳すると「構文的に素晴らしいスタイルシート」になります。 下記のような機能が使えて、最終的にSassをコンパイル(変換)してCSSにすることで、ブラウザでも問題なく読み込めて、なおかつ便利な機能が使えます。 CSSを入れ子にできるネスト機能変数機能(Sassが登場した当時はCSSの変数機能もまだ存在していなかった)mixinやextendなど、よく使う記述一式をグループ化して利用できるこれらの機能を使うことで、記述量を減らしたり、CSSの管理がしやすくなります。 現在はDart Sassが主流Sassにもいろいろ種類がありますが、2022年現在は「Dart Sass」と呼ばれるものが主流になっています。 それ以外の種類については過去にまとめているので、ぜひそちらの記事をご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く