ちょっと大規模なwebサイトを作るときに便利なタスクランナーをnpm-scriptsで作成しました。 導入コスト低くて、タスクランナーのバージョンがあがって使えなくなるリスクなどが低くて、必要な機能を取捨選択できるカスタマイズ豊富な機能です。 ##自動化する機能について 1.ejsでヘッダーやフッターなどの共通部分のテンプレート化 （ejsを使うとヘッダーやフッターなどの共通部分をテンプレート化できる） 2.scssをcssにコンパイル 3.cssを圧縮（１行になる） 4.scssでの修正場所がわかりやすいようにsource-map作成 5.オートプレフィクサー付与 6.コードを修正して保存すると画面が自動で更新される 7.開いた複数ブラウザ間でのスクロールやクリックなどの動きを同期でテストを容易に！ 8.フォルダ分けでページごとに管理（folder_1、folder_2の配下にindex
GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。 sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 また、Compassというものも出てきたりします。 CSSの常識が変わる！「Compass」の基礎から応用まで！ またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。 gulp インストール～基本設定の備忘録（windows） ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがいいのだろうと
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
2. プロフィール • 名前：Yuu（Tsukaguchi Yuji） • 会社：動画配信会社 • 出来ること – ディレクション・デザイン・コーディング – WordPress・Movable Type • Twitter：regret_raym • Facebook：regretraym • サイト： – http://creator-life.net/ – http://code-life.net/ 3. 今回の内容 • 最近よく聞くCSS拡張メタ言語とは？ • 作り方は？ • 種類は？ • 導入するメリット・デメリット • 何ができるようになるのか？ • LESSとSASSの違い • 使う環境を整える • まとめ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
