統計データマーケティングお役立ちレポート全てのカテゴリを見るferret記事をさがすCMS・Webサイト制作CSSCSSをスマートに!今日からSassで使える便利なmixin11選CSSをスマートに!今日からSassで使える便利なmixin11選2018年05月28日CSS会員登録するCSSは簡単に記述することができ、学習コストが低いのが特徴です。一方で繰り返しに弱く、コードが冗長になりがちだというデメリットも存在します。そこでSassをはじめとして、関数や変数の処理を行うことができるプリプロセッサー言語を使う現場が増えています。できるだけコンパクトにコードを書こうという動きも一般的になりつつあります。Sassの中でもとりわけ便利な機能が、mixinと呼ばれる機能です。mixinはSassにおける関数のようなもので、値を渡してスタイルなどを返します。「@mixin」の後ろに名前をつけ、任意で引数を使う場合は「$」の後に名前をつけます。呼び出す際には「@include」の後にmixin名をつけて呼び出します。今回は、今日から実践的に使えるSassの便利なmixinをご紹介します。使うものはスニペットにして保存しておき、いつでも再利用できるようにしておくと便利です。左右に中央配置するときに、みなさんならどのようなコードを書くでしょうか。一瞬考えて思い出そうとしますが、mixinとして登録しておけば短いコードですぐに記述することができます。場所によってリンクの色を変えたいときはありませんか。その場合、hoverやactive、focusなどの色まで一つひとつ指定するのは面倒です。次のmixinでは、指定した色でリンクカラーを生成し、hoverなどの色は20%明るい色を使うことで一気にリンクカラーのセットを作成することができます。透明度といえばopacityの設定ですが、IEも含めたクロスブラウザ対応のopacityの設定をmixinで表現してみました。(rem対応)CSS3で登場した新しい単位remでフォントサイズを指定します。emや%などの相対指定、pxやptなどの絶対指定などが一般的ですが、remは親要素の影響を受けずにフォントサイズを指定することができるので便利です。上下左右にCSSだけで表現できる矢印を作成できるmixinです。borderで表現しているので、なかに文字を入れることはできません。すべて省略すると、右向きの高さ12pxのグレーの矢印になります。次に棒付きの矢印を表現してみましょう。サイズ、線の太さ、線の種類、色、矢印の向きを指定することができます。方向によってtransformの計算方法が異なるので、若干長くなっています。最近では同系の2色を指定してモダンで洗練されたような色のグラデーションを使った背景を実装しているホームページも増えてきました。色の組み合わせが思いつかないという場合、使いたい色を1色指定すると、もう1色は自動的に指定してくれます。文字にグラデーション先ほど背景にグラデーションを適用する方法を紹介しましたが、文字色としてグラデーションを扱うにはどうすればいいでしょうか。下記のmixinでは、background-clipで文字部分だけグラデーションを切り抜き、対応していないブラウザでは指定した1色を表示するようにしています。自動でベンダープレフィックスをつけるCSS3を使うとき、必ずと言っていいほどベンダープレフィックスを使うようになるでしょう。下記のmixinを使うことで、毎回つけていたベンダープレフィックスの付与を自動化することができます。メディアクエリをmixinでまとめるセレクタごとにメディアクエリを指定するのは面倒なので、mixinでまとめて@contentで要素のコンテンツを引き継ぐと楽になります。長文テキストを枠内に収める最後に、長文テキストをはみ出さないように枠内に収めるためのmixinを紹介します。ellipsis;}まとめmixinは、重複する箇所に値を動的に挿入することができるので、何箇所も使う場合には非常に便利です。毎回自分で打ち込むのは不便なので、ぜひよく使うものは保存してすぐに使えるようにしておきましょう。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るテキストテキストとは、純粋に文字のみで構成されるデータのことをいいます。太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。詳しく見るCMS・Webサイト制作CSS会員登録するおすすめ記事ADグロースハックソフトバンクグループのサイバー大学がチャットコマース「ジールス」を導入。ノーリスクでリード獲得件数を増加させた3つの施策とはグロースハックADマーケティングオートメーション(MA)「Pardotユーザー会」運営リーダーが語る。国内最大級のMAユーザー会を維持・拡大する秘訣とはマーケティングオートメーション(MA)ADマーケティングオートメーション(MA)伝達から会話の時代へ。AI時代を一足先に予習する「マーケティングの練習問題」マーケティングオートメーション(MA)BtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。涼ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方AD記事を作っているのにサイト流入が足踏み・・・・・・。そんな状況を打開する「正しい努力」の仕方ADWebサイト制作でよくある失敗例5選。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。『鬼滅の刃』が大ヒットした理由ケーススタディで学ぶ。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。