Koalaを使ってSassを使用する方法
コマンドがわからない、ターミナルを使いたくないという人でも、Sassを使用できる方法に、Koalaという直感的に操作ができるアプリケーションソフトがあります。今回はその方法を紹介します。 KoalaでSassを使用する手順 手順は以下の通りです。 Koalaをダウンロードします Koalaを起動します プロジェクトファイルを用意します 設定ファイルを作成します CSSに変換（コンパイル）します Koalaをダウンロードします Koalaの公式サイトからKoalaをダウンロードします。 Koalaを起動します Koalaを起動します。まれにダブルクリックじゃ起動できない時があるので、その場合、右クリックで開くを選択しましょう。 このような画面が立ち上がります。 もし英語でわかりづらいようなら、左上の設定のアイコンから、日本語に変更しましょう。 プロジェクトファイルを用意します 左上のプラスの
【CSS】【JavaScript】流体アニメーションを作りたい – expexp.jp
2018.04.13 目立たせたい要素にさまざまな目を引く動き（アニメーション）をさせるサイトが増えています。そこで今回は、液体のような流体アニメーションのサンプルを紹介します。 実装には、CSSと滑らかな動きを再現するためにJavaScriptを使います。gifやpngなどの画像を使わず、シンプルなコードで流用もしやすいお手軽アニメーションです。 完成形サンプル最終的に目指す完成サンプルはこちら。 サンプルでは流体（水っぽいもの液体）が無重力空間にあるかのようにむにゅむにゅな動きをしています。 流体の要素を作成アニメーションさせる要素を作ります。幅と高さを設定するため、divなどのブロック要素が好ましいです。今回はdivに「fluid」というclassを付与しています。 HTML<div class="fluid"></div> SASSCSSで流体の幅と高さを決めます。流体の色はbac
Sassのモダンなコンパイル環境が3分で作れるParcel入門 - 独自設定ファイルは不要 - ICS MEDIA
ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。 webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。 Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。 Sassのコンパイル Autoprefi
サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイト
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル／シェルスクリプトで簡単にコマンドを実行する GUI（Koala）で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト（Nested Roles） 親セレクタの参照 &（アンパサンド） プロパティのネスト（Nested P
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作を劇的に効率化するGulpとは？｜オンライン動画授業・講座のSchoo（スクー）
