REDLINE MAGAZINE | web制作・デザインに関するさまざまな情報掲載サイトREDLINE MAGAZINEトップページへ

メニューをスキップして本文へ

旧ブログナビ (open/close)

タグ : css

Sassの勉強 #03 Sassの基本的な機能「変数」

今回はSassの「変数」について勉強します。今までCSSを書いてきて変数が使えたらいいのになぁと思うタイミングが多々ありました。これで解決するぞ(*´ω`*)♪ Sassで変数を使う 「変数」ってものについては特に書かなくてもいいかと思うのですが、まぁ一応Wikipediaのリンクだけ置いておきます。 >>変数 (プログラミング) – Wikipedia Sassの変数の宣言は「$」から始まる変数名の後に「:」と「値」、最後に「;」を指定する。 $変数名 : 値 ;  その変数を参照したい時は、使いたいプロパティの値部分にその「$変数名」を記述する。 変数を使って同じ値 >>続きを読む

Sassの勉強 #02 Sassの基本的な機能「ネスト」

今回はSassの基本的な機能、「ネスト」について勉強します。ルールのネスト、親セレクタの参照、プロパティのネスト、プレースホルダー、それからSassのコメントについても触れています。 ちょっとこの辺りからは、教科書、動画だけでなく、Sass公式のリファレンスもちゃんと確認するようにしますね。 >>File: SASS_REFERENCE — Sass Documentation ルールのネスト Sassではルールをネストを利用して書く事が出来ます。CSSをHTMLの構造に合わせてネストさせて(入れ子にして)書いていく事が出来るので把握しやすく、重複したセレクタを書かんでも良くなると >>続きを読む

Sassの勉強 #01 Sassとは何か?~環境構築

と、いうことで脱Sass初心者を目指してもっかい頑張ります。今回はSassの概要のおさらいと、Sassを自分のPCで使えるようにする環境設備と動作テストまでやります。 私の参考書籍・参考サイト まず最初に今回の学習に関して私が参考にしている書籍とサイトを紹介します。前回の記事にも書いたのですが、「Sassの勉強記事だけ読みたいんや、という方は是非次の投稿記事へお進みください」とか書いたのでもっかいちゃんと紹介しておきます。 書籍。私はこの本を買いました。 >>Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 本当にこの本は「教科書」です。記 >>続きを読む

Sassの勉強 #00 もっかい最初からやり直そうSassの巻

※ご注意ください。 この投稿は駄文です。Sassの勉強本題ではなく、もっかい1から勉強をやり直そうと思うに至った動機だけをツラツラと書いていますので、Sassの勉強記事だけ読みたいんや、という方は是非次の投稿記事へお進みください。すみません。 ※モチベーションを保つため、いつもの5割増しくらいのテンション高めでこの記事書きますね。なんか無駄にテンション高くてウゼーってならないでくださいね。 私の現状 「これ面白そう!勉強しよう!」→ネットで調べる→概要を把握する→全てがまとまってる何かが欲しくなる→満を持して本を買う→読む→理解する(理解した気になる)→環境を整える→ちょっと触る→出来た気にな >>続きを読む

CSSを徹底解析できるwebサービス「CSS Stats」

もう1月も半ばですが、明けましておめでとうございます。本年もよろしくお願い致します。 ・・・で何事もなかったかのように更新する。 CSSを徹底解析できるwebサービス「CSS Stats」を使ってみた 「CSS Stats」は簡単にCSSを徹底的に解析できるwebサイト。まずはサイトへアクセス。 >> CSS Stats 自分で調べたいサイトのURLかCSSのソースを貼り付けして「GO」ボタンをクリック。 解析が終わるとそのサイトで使われているCSSの内容詳細が表示される。下記はTwitterの解析ページの一部。 解析される内容は以下の通り。 Total Declarations >>続きを読む

このページの一番上へ