商用利用無料でしかも高品質！ランディングページを作成するためのHTML/CSSのテンプレートのまとめ | コリス

2018/05/23 72 users コリス Gulp CSS テンプレート CSSテンプレート

プロダクトやサービス、スマホアプリ、ショップなど、さまざまなプロジェクトに利用できるランディングページ用のHTML/CSSテンプレートを紹介します。 テンプレートはすべてレスポンシブ対応で、HTML/CSSだけを使用して作成してもよし、カスタマイズ用にGulp/Sassファイルも揃っています。 Papaya Papayaのライセンス レスポンシブ対応のHTML/CSSテンプレート Papayaのラ... 続きを読む

create-react-appでSASSファイルを使う方法 | Front Note

2018/02/16 11 users create-react-app GitHub Sass

以前までは「PostCSS推奨」みたいな方針だったせいか、SASS(SCSS)ファイルは使えなかったので、 npm ejectしたものをゴニョゴニョして無理やり使ってたんだけど、公式のGithubの方にいつの間にか SASS(SCSS)ファイルに対応する方法が載ってたので、忘れないようにメモ。 詳細はここに載ってるよ。（英語だけど。） 1. create-react-appコマンドで作成した雛形フ... 続きを読む

[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack | コリス

2015/06/09 72 users コリス config CSS 相違 Sassベース

デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------... 続きを読む

BEMを使ったSassファイルの整理 - Weblog - Hail2u.net

2014/02/10 26 users BEM Sass Weblog hail2u.net 変数

このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBE... 続きを読む

Google ChromeでCSSがSassの何行目に記述されているか確認する方法[to-R]

2013/03/19 31 users Sass インスペクタ CSS to-R 何行目

Google ChromeはSource Mapに対応しており、表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更しま... 続きを読む

DreamweaverでSassファイルを編集するには？ | Webデザインのタネ

2012/11/15 51 users Dreamweaver タネ ファイルアイコン CSS 認識

DreamweaverでSassファイルを編集しようとすると、テキストファイルという認識になってしまい、CSSのときのようにキーワードに色がついたり、コードヒントは出てきません。CSSと同じようにするには、次のように設定します。 1.アイコンを変える ファイルパネル上では、謎のファイルという認識でDreamweaverのファイルアイコンではありません。ちょっと気持ち悪いのでCSSアイコンになるよう... 続きを読む

コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog

2012/01/12 198 users YAT CSS Sass メタ言語 CSSファイル

Sassの環境構築から実際のコーディングまでを紹介しています。CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単... 続きを読む