横幅やマージンなどを % で指定したい場合、親ボックスの横幅などから % の値を計算する必要があります。複数の値を % 値で指定するとなると計算がめんどくさく、また計算ミスの可能性も出てきます。そこで、Sass の mixin 機能を使えば簡単に変換することができて便利かなと思い px 値を % に変換して指定する mixin を考えてみました。
![[Sass] 横幅/高さ、margin/padding、絶対位置などの px（ピクセル）値指定を %（パーセント）値に変換して指定する mixin スペニット](https://cdn-ak-scissors.b.st-hatena.com/image/square/d51250431c2b01526e689e440a8cf0b59214516d/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2015%2F02%2Fpercent_sass.png)
[Sass] 横幅/高さ、margin/padding、絶対位置などの px（ピクセル）値指定を %（パーセント）値に変換して指定する mixin スペニット
横幅やマージンなどを % で指定したい場合、親ボックスの横幅などから % の値を計算する必要があります。複数の値を % 値で指定するとなると計算がめんどくさく、また計算ミスの可能性も出てきます。そこで、Sass の mixin 機能を使えば簡単に変換することができて便利かなと思い px 値を % に変換して指定する mixin を考えてみました。
CSSだけでスマホの横スクロールを実装する
ブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。 タイル状に並べて表示 横スクロールできるように表示 今回はリスト構造を使用して、実装する方法をご紹介します。 ソースコードの記述実例はこちらです。 html <body> <ul class="scroll_list"> <li class="list1"><img src="img/image1.jpg" alt="image1"></li> <li class="list2"><img src="img/image2.jpg" alt="image2"></li> <li class="list3"><img src="img/image3.jpg"
横（水平）スクロールをCSSで簡単に実装する方法｜株式会社296｜ホームページ制作・動画制作・ドローン撮影｜川崎
ブログの記事下に設置する関連記事やランキングなどで一覧表示させるときに、カード型のデザイン横スクロールしているケースがありますが、その実装方法を解説していきます。 横スクロールとは 横スクロールとは、アプリやモバイルで最近よく採用されているUIです。 一般的なグリッドのスタイルと違って、コンテンツが横に展開されています。 横スクロールの実装方法 <ul class="horizontal-list"> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> </ul> ul.horizontal-list { overflow
【SCSS】Web制作時に物凄く便利な＠mixinベスト5 | COFUS技術ブログ
Web制作時にSCSSにてこれが無いと生きていけないと個人的に思っている＠mixinベスト5をご紹介します。 いづれも実際に様々な制作案件で使用し、生き残った精鋭達です。実際には手元の自作テンプレートには30以上の@mixinが存在し、どれも無くてはならないものですが、その中でも5つ選ぶとすると...でチョイスしてみました。 もし好評であれば全ての@mixinをご紹介したいと思います。 共通で用いる@mixin まず最初にBEST5とは別で各@mixinで共通で呼ぶ事が多い@mixinを記載しておきます。 // 09__疑似要素初期化 // ---------------------------------------------------------- @mixin icon-ini { content: ''; display: inline-block; } BEST5：ブラウザハ
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends
CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。 慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。 そこで、今回はCSS Flexboxの使い方を分かりやすくご紹介していきたいと思います。 2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱え
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
bracketsでsassを使う方法と設定を初心者向けにまとめてみる | YE-TECH
僕愛用のテキストエディタBracketsでsassを使う方法について。 フリーランスで仕事するとわかるんですが、仕事は早くやればやるほど、時給換算すると高くなります。これはコーディングも同じで、早くコーディングすればするほど短い時間で早く稼げるようになるので、フリーでWeb制作すると誰しもが早くコーディングしようと思うはず。 で、僕は早くコーディングするため、愛用のテキストエディタBracketsにemmet(zen code)やsassを導入したりしてます。 emmetはただプラグインを入れるだけなので簡単ですが、sassはちょっとややこしい。。。 というのもやり方が色々あって、Bracketsのプラグインだけで完結させたり、gulpやguretといったタスクランナーでやったりなどなど、、、） とまあ、やり方が色々とあるわけです（笑）。僕はただBracketsで簡単にsassを使いたいだ
【CSS】Sassは絶対使った方が良いよ！使い方入門編
【CSS】Sassは絶対使った方が良いよ！使い方入門編 公開日:2019/06/29 /最終更新日:2020/05/25 CSS Technique WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。さらに、通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし！導入しないのはもったいないです。 Sassとは？ そもそも「Sass」とは何でしょうか？ Sassは「Syntactically Awesome StyleSheet」の略です。 Syntactically ＝ 文法
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。 - かもメモ
スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheightにvminという単位を使って、レスポンシブの正方形を作る方法がありました。 HTML <div class="squareBox"> <div class="content"></div> </div> CSS .squareBox /* margin 30px */ width: calc(100vmin - 60px) height: calc(100vmin - 60px) 参考: css3でレスポンシブな正方形を作る - Qiita この方法は、calcに対応しているブラウザの問題と、ボックスが1つなら良いのですが複数並べたい時
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IOSではbodyにoverflow:hiddenが効きません – deezus合同会社
【初心者向け】Sassをいい感じに活用する