【CSS設計】SMACSSからCSSプリプロセッサとの付き合い方について学んだこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずSMACSSとは SMACSSとはCSS設計手法の一つです。『Scalable and Modular Architecture for CSS』の頭文字をとってSMACSSと呼ばれています。SMACSSの特徴は５つのカテゴリに分類をして、それぞれの考え方に合わせた設計を行うのが特徴です。 今回の記事では、SMACSSについての解説は割愛させていただきます。SMACSSの詳しい内容については、『Scalable and Modular Architecture for CSS』をぜひ読んでみてください。こちらは日本語に翻訳もされていて、かなり読みやすく参考になるところも多いのでオススメです。 またすぐに学びたいという方はCodeGridさんの記事が参考になるので読んでみてください。 SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid もちろん『最強のCSS設計
Sassの@eachで同じスタイルをラクチンに管理をする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです✌(´ʘ‿ʘ｀)✌ この春デザイナーからフロントエンジニアになりました。 新しい部署になり覚えることもたくさんありますが、落ち着いてがんばります( ∵ ) 今回は、繰り返し処理を行える文＠eachを使って繰り返しのスタイルを楽に管理する方法をご紹介致します。 画像を使い分けたい場合 以下のように、背景にアイコンを配置分けする方法をご紹介します( ˘ω˘)☝ HTML HTMLではこのリストを使っていきたいと思います( ˘ω˘)☝ <section id="nav_image"> <h1>画像を使い分ける場合</h1> <ul> <li class="icon_home"><a href="#">HOME</a></li> <li class="icon_about"><a href="#">ABOUT</a></li> <li class="icon_company"
Sass 3.2以上ならレスポンシブが簡単
Sass 3.2以上ならレスポンシブが簡単というお知らせです。 Sass 3.2以上で@contentというのが使える。ざっくり言うと、作ったmixinの中に@contentがあると、mixinを@includeした時に括弧内の値が入る。 やり方まず、デバイスごとの横幅(もしくは縦幅)を変数にして一箇所にまとめておくと良い。 // Width $width-pc: 940px; $width-tablet: 768px; $width-smartphone: 480px; $width-scrollbar: 20px; スクロールバーの横幅はwebkit対策。 で、こういうmixinを作る。 // Media Queries @mixin mediaquery-pc { @media only screen and (min-width: $width-pc + $width-scroll
Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら
[Sass(SCSS)+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開！ | Cappee Design
残暑お見舞い申し上げます、@cappeeです。 おひさしブリーフ。 さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。 実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。 そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。（大げさ） サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。 最初の記述 文字コード まずはSass(SCSS)ファイルの最初に文字コードを指定します。 @charset "utf-8"; Compass Compassを使う場
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ネストを覚えた人のためのSassの便利な使い方
11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/debiru/items/28d54b5c1e295d880cd3
ちゃんとCSSを書くために - CSS/Sass設計の話