Sass

Gulp4作成まとめ

Gulp4作成まとめ

pugとsassのコンパイルとブラウザシンクが使えるgulpを作ろうと思い立った今日この頃。 仕事上ではgulp3が多かったりもはや魔界化しているので記述は参考にできず...Gulp4を一から学んでみようと思ったので参考サイトを見ながら作ってみました! ※大元ソースは備忘録さんの記事を流用し、所々じぶん用に改変しております...! 環境 ■windows ・Windows 10 ・node:14.18.6 ・nvm: ■Mac ・Big Sur 11.5.2 ・node

Sass入門!@mixinを使ったレスポンシブ対応ブレークポイントの記述方法を詳しく解説!

Sass入門!@mixinを使ったレスポンシブ対応ブレークポイントの記述方法を詳しく解説!

今回は、はにわまさんの記述したSassを使ってレスポンシブ対応のブレークポイントを作る方法を細かく解説していきます。 はにわまんさんが記述した内容をそのまま使えばレスポンシブ対応になるのですが、アレンジする場合には理解しておいたほうがよいと思います。 そこで僕が調べたことをすべて解説していきます。 以下の書籍も参考にしました。 それでは以下がはにわまんさんの記述した内容になります。 Sass // レイアウト幅$layout-width-inner: 1180px;

Sass(SCSS)とTransform、z-indexを用いて背景色がスライドするボタンを作成する(HTML/CSS)
+7

Sass(SCSS)とTransform、z-indexを用いて背景色がスライドするボタンを作成する(HTML/CSS)

Sass(SCSS)を用いて、以下リンク先のように背景色がスライドするボタンを作成してみます。https://gyazo.com/efc8f1c551fa796e05040200b8e5d802 SassというものはCSSを効率よく記述するためのものです。プロパティの値を変数に入れたり、セレクターを入れ子構造にして記述したりすることが出来ます。Sassで記述したものをCSSに変換することでスタイルを適用する事ができます。では実装にあたり準備をしていきます。 ・使用するもの

スキ
3
@mixinでSPコーディングをちょっとラクにする方法

@mixinでSPコーディングをちょっとラクにする方法

SPコーディングの際、レスポンシブ表示対応の一環でフォントサイズもデバイスに合わせて伸縮できると、デザイン全体のバランスを保つことが出来ますよね。 font-size: calc(24 * (100vw / 750)); //横750pxの時のフォントサイズが24px 上記のようにcalcで記述すると実装可能なのですが…sassのmixinを使うとメチャクチャ楽なので、方法をご紹介します! sassについてはネット上に沢山出回っていますので、ここでは割愛します。「Sass

スキ
2
[Sass] 「@for」と「変数」を使うとmargin/paddingの管理が楽になります。

[Sass] 「@for」と「変数」を使うとmargin/paddingの管理が楽になります。

「marginの値をclassで決めておいて、HTMLにはclassを記述する」というスタイルのコーディングがあります。 具体的には CSSで 「.mt-30px」というclassに「margin-top:30px」を設定し、 .mt-30px{ margin-top: #{$step}px;} HTMLで「class="mt-30px"」指定すると上のマージンが30pxになる、という書き方です。 <li class="mt-30px">上のマージンを30pxに

【Live Sass Compiler】@importのやり方

【Live Sass Compiler】@importのやり方

・Live sass Compilerのインストールインストール後、Live Sass Compilerの歯車アイコンから「拡張機能の設定」を選択 ワークスペースに移動 Autoprefixのsetting.jsonで編集を選択 下記コードコピペ Autoplefix/setting.json{ "liveSassCompile.settings.formats": [ //Sassの出力内容の設定 { "format": "expanded", //ne

HTML/CSSが一番大事って言う話

HTML/CSSが一番大事って言う話

こんにちは、ゆうゆると申します。 唐突ですが、皆さんに質問です。 皆さんはHTML/CSSに対して、どのような印象を持たれますか? 人それぞれの印象があって良いと思いますが、「比較的簡単」という印象をお持ちになった方もいるかと思います。 たぶんですが、そういう印象をお持ちになった方は、他の言語もさわったことがあるのではないでしょうか?(僕の想定としてはJavaScriptやphpなど) 今回の記事では、そう言った方に一度だけでもHTML/CSSを見直していただくため

スキ
3
macでのnodeバージョン管理ツールNodebrewのコマンド一覧

macでのnodeバージョン管理ツールNodebrewのコマンド一覧

node.jsの公式サイト nodeコマンド 現在のnodeのバージョン確認 $ node -vv14.15.4 現在のnpmのバージョン確認 $ npm -v7.6.1 Nodebrewダウンロード方法 Nodebrewコマンド インストール可能なバージョン一覧 nodebrew ls-remote インストール済みのバージョン一覧 nodebrew ls 指定したバージョンのインストール(vの後に数字がはいる) nodebrew install-

スキ
1
【VSCode】Sassを導入した話

【VSCode】Sassを導入した話

Sassの存在を知るSassだとかLessだとかは「スタイルシートをより簡潔に書けるよー」的な仕組みの事。どっちが良いのかは好みによるとは思うのだが、「会社でWEB屋やってるパイセンが使ってたから」という安直な理由で、俺もSassを使ってみる事にした。 こいつを使い始めてから結構経つのだが、個人的には全体的な記述量が減ってくれて、メンテしやすくなるのが一番ありがたい。まあ、ブラウザから直接Sass読めるわけじゃないので、コンパイルしてcssに吐き出さなあかんというのはちょっ

【CSS/SCSS】元の画像のサイズに関係なく、画像を好きなアスペクト比にして表示する

【CSS/SCSS】元の画像のサイズに関係なく、画像を好きなアスペクト比にして表示する

HTML<div class="hoge"> <img src="hoge.jpg"></div> CSS.hoge{ width: 100%; position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; // 16:9 横幅を100%としたときの縦幅}.hoge img,.hoge video,.hoge iframe,.hoge object,{ position: a