サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
●はてなブックマークって？
●アプリ・拡張の紹介
●ユーザー登録
●ログイン
●ログアウト
glat_design
id:glat_design
●
6,844
ブックマーク
●
-
お気に入り
●
-
お気に入られ
タグ
●すべて
●
#LOVEFONT
(63)
●
*あとで読む
(96)
●
*チェック表
(39)
●
*使う
(22)
●
*役に立つ
(80)
●
*時が来たら読む
(91)
●
.htaccess
(15)
●
2010年
(14)
●
2011年
(13)
●
2011年10月チェック
(20)
●
2011年11月チェック
(28)
●
2011年12月チェック
(34)
●
2012年
(5)
●
2012年10月チェック
(29)
●
2012年11月チェック
(37)
●
2012年12月チェック
(16)
●
2012年1月チェック
(22)
●
2012年2月
(5)
●
2012年2月チェック
(36)
●
2012年3月チェック
(26)
●
2012年4月チェック
(61)
●
2012年5月チェック
(23)
●
2012年6月チェック
(28)
●
2012年7月チェック
(43)
●
2012年8月チェック
(45)
●
2012年9月チェック
(34)
●
2013年10月チェック
(28)
●
2013年11月チェック
(13)
●
2013年12月チェック
(18)
●
2013年1月チェック
(26)
●
2013年2月チェック
(14)
●
2013年3月チェック
(19)
●
2013年4月チェック
(29)
●
2013年5月チェック
(44)
●
2013年6月チェック
(34)
●
2013年7月チェック
(35)
●
2014年1月チェック
(7)
●
2014年2月チェック
(13)
●
2014年3月チェック
(12)
●
2014年4月チェック
(22)
●
2014年5月チェック
(10)
●
2014年6月チェック
(9)
●
2014年7月チェック
(11)
●
2015年
(5)
●
2015年3月チェック
(6)
●
2ch
(27)
●
2chまとめ
(29)
●
3D
(10)
●
@soraiy
(7)
●
AJAX
(10)
●
API
(75)
●
AR(5)
●
AWS
(5)
●
Adobe
(21)
●
AdventCalendar
(77)
●
Android
(20)
●
Androidアプリ制作
(5)
●
AngularJS
(6)
●
Bootstrap
(5)
●
Brackets
(15)
●
CC(11)
●
CMS
(7)
●
CSS
(345)
●
CSS3
(171)
●
CSSProgramming
(8)
●
Canvas
(33)
●
CodePen
(6)
●
CreateJS
(5)
●
DTP
(22)
●
DataURI
(5)
●
Dreamweaver
(6)
●
Dropbox
(13)
●
EC(45)
●
Evernote
(9)
●
Facebook
(62)
●
Firefox
(16)
●
Firefoxアドオン
(14)
●
Fireworks
(13)
●
Flash
(48)
●
Flickr
(9)
●
Font(参照)
(9)
●
Font(商用)
(23)
●
Font(日本語)
(9)
●
GIF
(13)
●
GitHub
(53)
●
Google
(75)
●
GoogleAdsense
(11)
●
GoogleAnalytics
(38)
●
GoogleChrome
(22)
●
GoogleMap
(17)
●
Grow!
(6)
●
HTML
(67)
●
HTML5
(344)
●
HTML5KARUTA
(21)
●
HowTo
(250)
●
IE(39)
●
IE6
(6)
●
IT(8)
●
Illustlator
(21)
●
JPEG
(5)
●
JS(9)
●
JSON
(6)
●
JavaScript
(313)
●
LINE
(7)
●
LOVEFONT
(33)
●
LP(13)
●
MTG
(6)
●
Mac
(16)
●
Markdown
(6)
●
MediaQueries
(23)
●
Microdata
(14)
●
Microsoft
(6)
●
NAVER
(41)
●
OAuth
(5)
●
OGP
(20)
●
PDF
(11)
●
PHP
(102)
●
PWA
(6)
●
PayPal
(5)
●
Photoshop
(61)
●
Photoshop(PSD)
(13)
●
Photoshop(テクスチャ、パ
(5)
●
Photoshop(パターン)
(10)
●
Photoshop(ブラシ)
(18)
●
Pinterest
(6)
●
Qiita
(57)
●
RSS
(14)
●
Retina
(11)
●
SBM
(5)
●
SEO
(145)
●
SERPs
(7)
●
SNS
(28)
●
SVG
(50)
●
Sass
(25)
●
Schema.org
(9)
●
Tips
(5)
●
Togetter
(24)
●
Tumblr
(9)
●
Tumblrページ
(15)
●
Twitter
(186)
●
TwitterBootstrap
(6)
●
TwitterCards
(5)
●
UI(180)
●
URL短縮
(6)
●
UX(48)
●
Viewport
(5)
●
W3C
(13)
●
W3Q
(14)
●
WAI-ARIA
(26)
●
WEBCRE8.jp
(7)
●
Web
(49)
●
WebAudio
(6)
●
WebFont
(12)
●
WebGL
(14)
●
WebRTC
(7)
●
Webアプリ制作
(20)
●
Webコンテンツ
(78)
●
Webサービス
(708)
●
Webサービス制作
(203)
●
Webディレクション
(104)
●
Webデザイン
(2060)
●
Webフォント
(12)
●
Webプラットフォーム
(30)
●
Webマガジン
(10)
●
Webマーケティング
(57)
●
Webメディア
(19)
●
Web全般
(251)
●
Web制作
(4066)
●
Web漫画
(10)
●
Wikipedia
(8)
●
Windows
(13)
●
WordCamp
(11)
●
WordPress
(312)
●
XHTML
(5)
●
XML
(7)
●
YouTube
(12)
●
Zen-Coding
(5)
●
amazon
(12)
●
facebookページ
(11)
●
favicon
(15)
●
functions.php
(26)
●
git
(13)
●
gulp
(7)
●
iOS
(9)
●
iPad
(22)
●
iPadアプリ
(10)
●
iPhone
(49)
●
iPhoneアプリ
(34)
●
iPhoneアプリ制作
(25)
●
instagram
(12)
●
jQuery
(240)
●
jQueryMobile
(35)
●
jsdo.it
(21)
●
kayac
(7)
●
mixi
(8)
●
nanapi
(5)
●
node.js
(13)
●
npm
(5)
●
pear
(5)
●
png
(14)
●
reset.css
(8)
●
simulator
(9)
●
webComponents
(7)
●
webツール
(23)
●
web標準
(5)
●
はてなブックマーク
(6)
●
まとめ
(658)
●
まとめのまとめ
(12)
●
アイコン
(91)
●
アクセシビリティ
(13)
●
アクセシビリティー
(52)
●
アクセスアップ
(15)
●
アクセス解析
(56)
●
アニメ
(5)
●
アニメーション
(61)
●
アフィリエイト
(27)
●
アプリ制作
(98)
●
アンケート
(6)
●
アート
(42)
●
イベント
(83)
●
イラスト
(37)
●
イラスト制作
(21)
●
インスピレーション
(15)
●
インタビュー
(51)
●
インタラクション
(5)
●
インテリア
(10)
●
インフォグラフィック
(30)
●
エクステンション
(5)
●
エディター
(13)
●
エンターテイメント
(12)
●
オファー
(8)
●
オファーサイト
(5)
●
カスタマイズ
(11)
●
カスタムタクソノミー
(6)
●
カスタム投稿
(7)
●
ガイドライン
(12)
●
ガジェット
(7)
●
キャンペーン
(9)
●
キュレーション
(12)
●
キーワード
(6)
●
ギャラリー
(107)
●
ギーク
(13)
●
クラウド
(7)
●
クラウドストレージ
(6)
●
クリエイティブ
(24)
●
クロスブラウザ
(5)
●
クロスプラットフォー
(12)
●
グラデーション
(6)
●
グルメ
(32)
●
ゲーミフィケーション
(7)
●
ゲーム
(97)
●
ゲーム(Flash)
(8)
●
ゲーム(コンテンツ)
(10)
●
ゲーム(話題)
(41)
●
ゲームコンテンツ
(22)
●
ゲーム制作
(49)
●
コピーライティング
(9)
●
コミュニケーション
(37)
●
コンテスト
(8)
●
コンテンツ配信
(6)
●
コーディング
(209)
●
サイト(EC)
(6)
●
サイト(webギャラリー)
(38)
●
サイト(webクリエイタ)
(14)
●
サイト(webディレクター)
(6)
●
サイト(webデザイナ)
(6)
●
サイト(webデザイナー)
(42)
●
サイト(web企業)
(12)
●
サイト(web制作会社)
(13)
●
サイト(ギャラリー)
(19)
●
サイト(クリエイター)
(14)
●
サイト(デザイナー)
(7)
●
サイト(ブロガー)
(19)
●
サイト(一般企業)
(9)
●
サイト(情報)
(35)
●
サイト(技術)
(6)
●
サイト(素材)
(38)
●
サイト(資料)
(9)
●
サーバ
(23)
●
サーバー
(8)
●
ショートコード
(5)
●
ジェネレータ
(49)
●
ジェネレーター
(35)
●
ジョジョ
(6)
●
スクロール
(7)
●
スタイルガイド
(13)
●
スタートアップ
(5)
●
スニペット
(103)
●
スパム
(5)
●
スマホアプリ制作
(27)
●
スマホ最適化
(11)
●
スマートフォン最適化
(30)
●
スライダー
(7)
●
スライド
(205)
●
スライドショー
(11)
●
セキュリティ
(40)
●
セキュリティー
(6)
●
セマンティック
(5)
●
セレクタ
(5)
●
ソフトウェア
(48)
●
ソーシャルゲーム
(17)
●
ソーシャルサイト
(13)
●
ソーシャルサービス
(12)
●
ソーシャルボタン
(26)
●
ソーシャルメディア
(100)
●
タイポグラフィ
(18)
●
タイポグラフィー
(63)
●
タスクランナー
(7)
●
ダウンロード
(101)
●
チュートリアル
(124)
●
チートシート
(14)
●
テキスト
(30)
●
テクスチャー
(14)
●
テンプレート
(24)
●
テーマ
(32)
●
デザイン
(573)
●
デバッグ
(7)
●
デモ
(25)
●
データベース
(12)
●
トピック
(239)
●
トラブルシューティン
(60)
●
トラブルシュート
(10)
●
ドメイン
(12)
●
ニュース
(24)
●
ネタ
(180)
●
ネタ(JS)
(10)
●
ネタ(twitter)
(12)
●
ネタ(ギーク)
(12)
●
ネタ(サービス)
(20)
●
ネタ(テキスト)
(35)
●
ネタ(動画)
(15)
●
ネタ(技術)
(25)
●
ネタ(画像)
(30)
●
ネタコンテンツ
(28)
●
ノウハウ
(180)
●
バナー
(8)
●
バージョン管理
(5)
●
パフォーマンス
(86)
●
パブリックドメイン
(10)
●
パララックス
(23)
●
パンくずリスト
(5)
●
ビジネス
(221)
●
ファッション
(20)
●
フォント
(356)
●
フォーム
(45)
●
フラットデザイン
(14)
●
フリー
(149)
●
フリーソフト
(17)
●
フリーランス
(33)
●
フレームワーク
(52)
●
フロントエンド
(36)
●
フローチャート
(5)
●
ブックマークレット
(25)
●
ブラウザ
(21)
●
ブラウザー
(13)
●
ブランディング
(5)
●
ブログ
(250)
●
ブログサービス
(5)
●
ブログパーツ
(10)
●
プラグイン
(231)
●
プラットフォーム
(46)
●
プレスリリース
(10)
●
プレゼン
(13)
●
プレフィックス
(8)
●
プログラマー
(9)
●
プログラミング
(163)
●
プロジェクト管理
(5)
●
プロダクト
(56)
●
プロフィール
(7)
●
プロモーション
(65)
●
ベクター
(5)
●
ホームページ作成
(7)
●
ボイラープレート
(10)
●
ボタン
(10)
●
マテリアルデザイン
(7)
●
マンガ
(18)
●
マーケティング
(103)
●
ミニマル
(5)
●
メニュー
(12)
●
モバイル
(154)
●
ユーザビリティー
(44)
●
ライセンス
(9)
●
ライティング
(18)
●
ライフハック
(16)
●
ライブラリ
(49)
●
ライブラリー
(12)
●
リッチスニペット
(5)
●
リニューアル
(10)
●
リファレンス
(36)
●
リンク
(14)
●
レイアウト
(86)
●
レシピ
(8)
●
レスポンシブデザイン
(46)
●
レビュー
(9)
●
レンタルサーバ
(5)
●
ロゴ
(44)
●
ローカル環境
(7)
●
ワイヤーフレーム
(13)
●
ワークフロー
(8)
●
人
(9)
●
人生
(14)
●
仕事
(37)
●
仕事術
(15)
●
仕様
(13)
●
代替コンテンツ
(9)
●
企業
(18)
●
企画書
(8)
●
便利
(9)
●
共有サイト
(12)
●
写真
(106)
●
写真加工
(18)
●
制作
(47)
●
制作秘話
(94)
●
勉強
(11)
●
動物
(14)
●
動画
(70)
●
動画設置
(24)
●
参考(Roadstohtml5)
(31)
●
参考(動画・アニメ)
(8)
●
参考webデザイン
(241)
●
参考クリエイティブ
(108)
●
参考コンテンツ
(157)
●
参考画像
(19)
●
名刺
(14)
●
名言
(12)
●
命名規則
(9)
●
和
(9)
●
商用
(107)
●
地図
(11)
●
地域
(10)
●
基礎
(109)
●
女性向け
(13)
●
学習
(25)
●
学習サイト
(6)
●
広告
(35)
●
床
(11)
●
心得
(100)
●
心理学
(9)
●
怖い話
(9)
●
恋愛
(9)
●
情報
(23)
●
情報サイト
(63)
●
情報収集
(26)
●
技術
(37)
●
投稿サイト
(50)
●
拡張機能
(18)
●
携帯
(14)
●
擬似要素
(9)
●
政治
(10)
●
数学
(8)
●
文字コード
(6)
●
文字組み
(8)
●
文章
(7)
●
文章術
(19)
●
旅行
(6)
●
日本語フォント
(11)
●
映画
(15)
●
本
(28)
●
検索
(33)
●
検索サービス
(19)
●
正規表現
(6)
●
歴史
(7)
●
気になる
(6)
●
法律
(8)
●
海外
(337)
●
生活
(128)
●
用語解説
(8)
●
画像
(92)
●
画像加工
(17)
●
科学
(8)
●
税金
(8)
●
管理画面
(19)
●
素材
(39)
●
素材クリエイティブ
(50)
●
素材サイト
(21)
●
素材画像
(18)
●
素材画像(参照)
(12)
●
絵文字
(6)
●
美女
(6)
●
翻訳
(31)
●
考察
(390)
●
背景
(12)
●
色
(38)
●
英語
(73)
●
著作権
(25)
●
行ってきた
(54)
●
解説
(680)
●
話題
(54)
●
読み物
(15)
●
販売
(17)
●
買い物
(31)
●
資料
(266)
●
資料画像
(6)
●
質問
(16)
●
質問サイト
(6)
●
起業
(26)
●
趣味
(8)
●
連載
(53)
●
開発
(76)
●
雑学
(20)
●
雑貨
(6)
●
電子書籍
(12)
●
面白アイテム
(6)
●
音声
(12)
●
音楽
(51)
●
音楽視聴
(7)
●
Web制作
(4066)
●
Webデザイン
(2060)
●
Webサービス
(708)
●
解説
(680)
●
まとめ
(658)
●
デザイン
(573)
●
考察
(390)
●
フォント
(356)
●
CSS
(345)
●
HTML5
(344)
関連タグで絞り込む (33)
●
@sou_lab
●
AdventCalendar
●
Brackets
●
Compass
●
CSS
●
GitHub
●
HowTo
●
jsdo.it
●
MediaQueries
●
Qiita
●
Ruby
●
Webサービス
●
Webサービス制作
●
Webデザイン
●
Web制作
●
WordPress
●
エクステンション
●
カスタマイズ
●
コーディング
●
サイト(アプリ)
●
ジェネレーター
●
スタイルガイド
●
スニペット
●
スライド
●
チュートリアル
●
デザイン
●
ノウハウ
●
フレームワーク
●
ボイラープレート
●
メタ言語
●
本
●
海外
●
解説
タグの絞り込みを解除
Sassに関するglat_designのブックマーク (25)
●
29 users
●
blog.adobe.com
●テクノロジー
The Blog | Welcome to Adobe Blogアドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
glat_design
2017/01/11
●Web制作
●Webデザイン
●Sass
●解説
●
40 users
●
qiita.com/kojika17
●テクノロジー
$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }
glat_design
2016/05/17
●Web制作
●Webデザイン
●CSS
●Sass
●解説
●Qiita
●
4 users
●
qiita.com/BYODKM
●テクノロジー
この記事では、JSではおなじみのモジュールの名前解決を、CSSでも実現する方法について解説します。 最近のJSではおなじみのこういうのJSなら、誰かが作ったモジュールを自プロジェクトに組み込む際に、名前を変えるのはワケありません。
glat_design
2015/12/13
●Web制作
●Webデザイン
●CSS
●Sass
●解説
●Qiita
●
44 users
●
corpuscss.com
●テクノロジー
If you're like most people, you probably use technology every day. Whether you're using your computer to work or play, or you're using your phone to stay connected with friends and family, technology is a big part of our lives. Food for thoughtOur guides cover everything from basic tips and tricks to more advanced concepts, and we're always updating themwith new content to make sure they're as us
glat_design
2015/12/12
●Web制作
●Webデザイン
●CSS
●海外
●Sass
●
4 users
●
codepen.io
●テクノロジー
Inspired by Mark Otto's tour of GitHub'sCSS and Ian Feather's tour of Lonely Planet'sCSS, I thought I would join the party and talk about how we do CSS at CodePen. Overview [1] We use SCSS. [2] We use Autoprefixer. [3] We use the Rails Asset Pipeline. [4] The SCSS file that represents the CSS file that actually gets loaded is just a table of contents. [5] We have a style, but mostly just because
glat_design
2015/10/14
●Web制作
●Webデザイン
●CSS
●解説
●Sass
●海外
●
5 users
●
ruucb.com
●テクノロジー
レスポンシブなサイトを作っている時に、メディアクエリの指定を毎回書くのがめんどくさいなと思ったので、Sassを使ってシンプルに出来る方法をメモしておきます。 変数でブレイクポイントを設定するSCSSを新規作成し、何px以上で表示が切り替わるかを変数で指定していきます。今回はcssフレームワーク﹁Pure﹂を参考に、以下のようにしてみました。 $widthXL: 1280px; //PC大 $widthLG: 1024px; //PC小 $widthMD: 768px; //タブレット $widthSM: 568px; //スマートフォン @mixin設定 上で設定した変数を使いながら、簡単に呼び出せるようにmixinとして設定していきます。 @mixin mqXL { //$widthXL︵1280px︶以上の場合 @media (min-width: $widthXL) { @cont
glat_design
2015/03/06
●Web制作
●CSS
●Sass
●MediaQueries
●解説
●
29 users
●
caferati.me
●テクノロジー
Brackets extension that converts HTML into CSS/SCSS/LESS by pasting HTML blocks into CSS/SCSS/LESS files.
glat_design
2015/02/24
●Web制作
●コーディング
●Sass
●Brackets
●エクステンション
●海外
●
109 users
●
sass-guidelin.es
●テクノロジー
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
glat_design
2015/01/07
●Web制作
●CSS
●Sass
●海外
●解説
●
11 users
●
qiita.com/assialiholic
●テクノロジー
本記事はBrackets Advent Calendar 2014の20日の記事です。 ライブプレビューがとても簡単に行えることが魅力のBracketsですが、実はSassのライブプレビューにも対応しています。 方法は デフォルト機能によるもの エクステンション︵brackets-sass︶によるもの の2通りあり、それぞれメリット・デメリットがあります。 以下、それぞれの方法でライブプレビューを実行するための解説をしていきます。 ディレクトリツリー |──index.html | |──sass/ ──main.scss | |──_var.scss | |──_module.scss | |──css/︵コンパイル前は空フォルダ︶ デフォルトの機能 メリット 必要なのはSassの実行環境のみ Compassにも対応 デメリット 反映されるのがファイル保存時のコンパイル後で、
glat_design
2014/12/22
●Web制作
●Webデザイン
●Sass
●AdventCalendar
●Brackets
●HowTo
●
12 users
●
www.slideshare.net/slideshow
●テクノロジー
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 ︻オシャレCSS編︼ 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ ︻地味だけど使えるワザ編︼ 7. 今どきの、要素を上下中央寄せにするワザ 8.﹁flexbox﹂で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
glat_design
2014/04/01
●Web制作
●Webデザイン
●Sass
●WordPress
●スライド
●メタ言語
●
44 users
●
ryonakae.github.io
●テクノロジー
Features DASH is a simple and responsive Sass/Compass-based framework for faster and easier web development. Simple and Clean DASH is a simple and clean framework. You can customize and development easier and faster. Sass/Compass DASH builds on Sass/Compass. Some variable and mixin is available from the beginning. Responsive DASH is cross device compatible. You can create a website viewable from a
glat_design
2013/11/26
●Web制作
●Webデザイン
●Sass
●ボイラープレート
●
15 users
●
blog.sou-lab.com
●テクノロジー
どうも、ソウラボこと森田壮です。 インプレスジャパンさんから、2013年9月13日発売の ﹁Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語﹂ を執筆させていただきました。 CSS HappyLifeの平澤隆さんと共著です。 本書の内容や、見どころを紹介させていただきます。 Amazon以外︵楽天ブックスなど︶のリンクは本書サポートサイトにのっております！ 本書の内容 はじめに 以下、本書の紹介文です。 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた ﹁Sass﹂︵サス︶についての教科書的な解説書が登場！ ・Sassって聞いたことはあるけど、導入が面倒そうという方 ・Sassを始めてみたいと思っているが、今一歩踏み出せない方 ・勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方 ・周りでSas
glat_design
2013/09/10
●@sou_lab
●Web制作
●本
●Webデザイン
●Sass
●
465 users
●
www.webcreatorbox.com
●テクノロジー
2017年2月22日 CSS 以前﹁効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！﹂という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する﹁Compass﹂というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
glat_design
2013/07/02
●Web制作
●Webデザイン
●Sass
●CSS
●スニペット
●
469 users
●
www.slideshare.net/slideshow
●テクノロジー
TalkNote Vol.8 発表スライド 2013/06/30 追記: 本スライドで紹介しているSMACSS日本語訳︵電子書籍︶が発売されたので、興味のある方はご覧ください。SMACSS https://smacss.com/Read less
glat_design
2013/06/27
●Web制作
●Webデザイン
●CSS
●Sass
●ノウハウ
●スライド
●
25 users
●
ozpa-h4.com
●テクノロジー
CSSを記述するために開発されたメタ言語、Sass︵Scss︶+ Compassを覚えてからかなりコーディングが楽になってきた今日この頃。 ﹁Sublime Text﹂にCompassとSassを導入して以来それはそれはその恩恵をありがたく享受しているわけなんですが、ここいらでそろそろ新しいサイト作成用のテンプレートを作っておこう！と思い立ち、Sass + Compass︵とそれに付属するファイル︶のテンプレファイルを作成いたしました。 テンプレートファイルの構成 テンプレートファイルは↑こんな感じです。︵以下﹁Sass︵Scss︶﹂と毎回書くのも面倒なのでScssで統一します。︶ ファイルは _vars.scss _common.scss _util.scss _layout.scss _main.scss style.scss で構成されています。 この構成は主にhail2u.netさ
![[Web]Sass（Scss）+ Compassのテンプレートファイルを作成したので晒してみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bff8a3529a2aad8042452490c6f368062c5bb83/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F130523_sass_top.jpg)
glat_design
2013/05/23
●Sass
●Web制作
●Webデザイン
●CSS
●HowTo
●
1468 users
●
liginc.co.jp
●テクノロジー
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは﹁Sass﹂を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では﹁Sass﹂とは何かと言うと、正式名称は﹁Syntactically Awesome Style Sh
glat_design
2013/05/04
●Web制作
●Webデザイン
●CSS
●Sass
●Compass
●HowTo
●
92 users
●
css2sass.heroku.com
●テクノロジー
Source at http://github.com/jpablobr/css2sass This simple site is created by Jose Pablo Barrantes @ http://jpablobr.com && heavily inspired by html2haml
glat_design
2013/02/16
●Webサービス
●Webデザイン
●Web制作
●CSS
●Sass
●ジェネレーター
●
62 users
●
inkdesign.jp
●暮らし
07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイルガイドとはなにか スタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品︵コンポーネント︶をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。 具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。MailChimp Design P
glat_design
2012/12/10
●Web制作
●Webデザイン
●CSS
●スタイルガイド
●Sass
●AdventCalendar
●
424 users
●
wp.yat-net.com
●テクノロジー
2012年10月31日 コーディング速度を3倍早くするSass︵Scss︶のフレームワーク”Compass”が本当に便利 カテゴリ‥ Sass タグ‥CodingSassScssコーディング効率化 \ CSSのメタ言語Sass︵Scss︶。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass︵Scss︶ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
glat_design
2012/10/31
●Web制作
●Webデザイン
●コーディング
●Sass
●CSS
●チュートリアル
●Ruby
●メタ言語
●フレームワーク
●
2636 users
●
speakerdeck.com/ken_c_lo
●テクノロジー
少ない手間と知識でそれなりに見せる、ズルいデザインテクニックwith Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
glat_design
2012/10/29
●Web制作
●Webデザイン
●Webサービス制作
●スライド
●デザイン
●Sass
1
2
次のページ
お知らせ
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第2週︶
お知らせ
はてなブックマーク透明性レポート︵2024年2月-2024年4月︶
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第1週︶
もっと読む
公式Twitter
●@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
●@hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●公式アカウント
●ホットエントリー
●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しましたx
The Blog | Welcome to Adobe Blog
Sassを使ったz-indexの管理 - Qiita
コンポーネントの名前解決をプロジェクトにインポートする時まで遅らせるCSSの書き方 - Qiita
CorpusCSS – Your watch guide
CodePen's CSS by Chris Coyier on CodePen
Sassの@contentを使ってメディアクエリを簡単指定 | RCBlog
Brackets CSSFier extension
Sass Guidelines
BracketsでSassをライブプレビューする - Qiita
WordPressでCSSプリプロセッサ入門
DASH
2013年9月13日発売の﹁Web制作者のためのSassの教科書﹂を執筆させていただきました。
より素早くCSSコーディングするための、Sass︵SCSS︶のmixinスニペット集
ちゃんとCSSを書くために - CSS/Sass設計の話
[Web]Sass︵Scss︶+ Compassのテンプレートファイルを作成したので晒してみる
﹁Compass﹂、基礎から応用まで！ | 株式会社LIG
css2sass
CSSプリプロセッサでスタイルガイド - inkdesign
コーディング速度を3倍早くするSass︵Scss︶のフレームワーク”Compass”が本当に便利 ｜https://wp.yat-net.com/name
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck