VS CodeでSassのコンパイルはEasy SassではなくLive Sass Compilerを使うべき
Easy Sassとは VS Codeの拡張機能でSassをコンパイルしてCSSファイルを生成する。 Easy Sassという名前の通りSassを簡単にコンパイルできるのでSassを覚えたての初心者の方がよく使用されているが、Webサイト制作に使用するのは避けたほうが良い。 Easy Sassの使用を避けたほうが良い理由 Easy Sassの使用を避けたほうが良い理由はAutoprefixerが付いていないから。 AutoprefixerとはCSSベンダープレフィックス付きのCSSプロパティを自動で追加する機能。 例えばtransformのプロパティはAndroid 4.4以下はベンダープレフィックスがないと適用されないのでAndroid 4.4以下も対象にしているWebサイトだとベンダープレフィックスが必須となる。 https://caniuse.com/#search=transfor
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
【css】蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法
文中の文字を強調したいときどういった手法を使いますか？ 「文字を太文字に変える」 「文字の色を変える」 「アンダーラインを加える」 これだけでは、少しバリエーションが少ないようにおもいませんか？ そこで、今回は、cssで蛍光ペンのラインマーカーをテキストに配置する方法をご紹介します。 蛍光ペンといえば、誰しも教科書の重要な部分にマーカーを引いた思い出があるはずです。そんな、親しみやすく馴染みのある手法を使わない手はないですよね？ それでは、早速設置方法を見てみましょう！
横（水平）スクロールをCSSで簡単に実装する方法｜株式会社296｜ホームページ制作・動画制作・ドローン撮影｜川崎
ブログの記事下に設置する関連記事やランキングなどで一覧表示させるときに、カード型のデザイン横スクロールしているケースがありますが、その実装方法を解説していきます。 横スクロールとは 横スクロールとは、アプリやモバイルで最近よく採用されているUIです。 一般的なグリッドのスタイルと違って、コンテンツが横に展開されています。 横スクロールの実装方法 <ul class="horizontal-list"> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> <li class="item">アイテム</li> </ul> ul.horizontal-list { overflow
CSSでシンプルに水平スクロール（横スクロール）のリストを作る - Qiita
横スクロールのUI 個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。 例えばAirbnbのWebサイトではこんな感じ。 CSSで水平スクロールを実装する ポイントは次のとおり。 ulおよびliを使ってリスト構造を表現する ulに対してoverflow-x: auto;、white-space: nowrap;を指定 liに対して、display: inline-block;を指定 liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalので、横スクロールできることがわかりやすい ソースコードはこんな感じ。 <!DOCTYPE html> <html> <head> <title>Horizontal Scroll</title> <style> .horizontal-list { over
【cssグリッドレイアウト】 frの使い方やautoとの違いを比較
最近じわじわと使われ始めているグリッドレイアウト。 frという新しいサイズ単位も加わり、autoとの違いがあやふや・・・という方もいるかと思います。 そこで今回はfrの基本的な使い方と、迷いやすいautoとの違いをわかりやすくまとめてみました。 frとは frとは「fraction(分数の意味)」の略で、gridレイアウトを使うに当たって誕生した新しいサイズの単位です。 grid-template-columnsやgrid-template-rowsを使うとき、100px 200pxなどのピクセル単位などを使ったりしますが、わざわざスペースを何ピクセルか図ったりするのはわずらわしいですよね。 そんなときに便利なのが「fr」という単位です。 frを使うと、枠に合わせたグリッドの大きさを自動的に調整してくれます。例えば、
CSS Grid Layout を極める！（基礎編） - Qiita
CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS Grid Layout は現時点（2017年4月）ではまだ新しいモジュールのため、対応ブラウザが少ないです。 （Fx52～、GC57～、Safari10.1～、Opera44～ など） Can I use... CSS Grid Layout しかし、2017年3月にはFirefox, Google Chrome, Opera, Safari などが CSS Grid Layout 対応のバージョンをリリースしており、今後に対応ブラウザが急増するのは確実なので、ぜひともマスターしておきたいです。 この記事は4部構成の中の 基礎編 です。 CSS Grid Layout を極める！（基礎編） ←これ CSS Grid La
object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | Web Design DAY
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々とサンプルで詳しく紹介していきたいと思います。 なぜ画像フィット・トリミングが必要なのか？ 例えば、記事一覧ページでサムネイル画像が並ぶページの場合、全ての画像が同じサイズ、もしくは縦横比でないと並びが崩れてしまいます。 横幅はCSSで揃えられるけど縦幅はバラバラで崩れている じゃ、全部同じサイズでアップすれば良いじゃん！と思いますが、CMSでユーザーが任意の画像をアップする場合などはそうはいきません。 ですので、どのようなサイズの画像が配置されても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
