【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！） ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
【2024年】デバイス別レスポンシブデザインのブレイクポイントまとめ|Webサイト制作・CMS開発｜LeadGrid
この記事ではパソコン、タブレット、スマートフォンに最適なレスポンシブデザインサイズを紹介します。 関連記事：レスポンシブ対応とは？ 5つの対応方法や注意点をWeb制作会社が解説 各デバイスの最適なブレイクポイントを知り、自社のWebサイト制作にお役立てください。 レスポンシブデザインとは？レスポンシブデザインとは、パソコンやスマートフォンなどユーザーが使用するデバイスに合わせて、Webサイトの画面サイズを最適化したデザインを指します。 レスポンシブデザインが主流となる前は、パソコンとスマートフォンで別々のサイトを用意していました。しかしこれではWebサイトを更新する際にコストが2倍となるため、定期的な運用が難しいという問題がありました。 そこでレスポンシブデザインが2010年に発表され2015年にはGoogleが「モバイル・ファースト・インデックス（MFI）をページの評価対象にする」と発表
カルーセル(スライダー)をおしゃれにするCSSスニペット12選。3Dもフルスクリーンも可能！ | KodoCode
スタイリッシュなデザインのカルーセルスライダー(carousel)のCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 カルーセル(スライダー)は限られたスペースで複数のコンテンツを回転表示するのに利用されていたり、フルスクリーンカルーセルでサイトデザインと一体化して利用するケース等、デザインのバリエーションを増やすことが出来る便利なパーツです。 本記事ではフォームの中でも「カルーセル」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 なお、「カルーセル」という呼び方が馴染まない方もいるでしょう。「スライダー」という名称のが一般的かもしれません。以下のように回転してコンテンツを表示するパーツのことを示します。 S
calc()関数、vw単位を使った絶対に崩れないCSSの書き方 - Qiita
もう画像に逃げないコードを書こう！ 見た目の凝ったデザインをコーディングする際、表示領域（以下：わかりやすく画面幅と書きます）の拡大縮小に合わせてレイアウトが崩れてしまって、デレクターさんやデザイナーさんから、「デザイン通りになんとかならない？」と言われた経験ありませんか？ そんなときはvw単位とcalc()関数を使うとかんたんに画面幅に合わせてレイアウトを保ってくれる要素を作ることが出来ます。 「いや、流石に無理でしょこんなん…画像にしちゃいましょ？」と逃げてる人、メディアクエリを大量に設定してごまかしている人、ちょっと理解するのが難しいですが、以下を試してみてください！ 結論を急ぎたい人へ 前置きはいいから結論を教えて！という人へ。 こちらの計算式にを使うと表示させたい画面幅に対して表示したいピクセル数を指定できます。 calc( 表示させたいピクセル数 vw/ 表示させたい画面幅 ÷
コピペできる！CSSリボンデザインのまとめ
<h2>CSSでつくるリボンデザイン</h2> h2 { position: relative; display: inline-block; height: 50px; line-height: 50px; padding: 0 2rem; border-top: 3px solid; border-bottom: 3px solid; background-color: #a9acd3; color: #353535; font-size: 26px; font-weight: bold; text-align: center; } h2::before, h2::after { position: absolute; content: ''; top: 0; width: 0px; height: 0px; border-color: transparent #fff; border
【CSS】平行四辺形を作る方法／ボタンや見出しにも応用可能 | 妙高Web屋
この記事はこちらの方にオススメ！ コーディングで「CSSを使って平行四辺形を作りたい！」とお考えの方 Web制作をされている皆さん！ 「画像を使わずにCSSで平行四辺形を作りたい！」 とお考えになったことはないでしょうか？ 今回の記事は、その方法をご紹介します。 この記事の目次 結論！平行四辺形だけなら超シンプル CSSで文字ありの平行四辺形を作るには工夫が必要！ 結論！平行四辺形だけなら超シンプル さっそく結論です。 CSSで平行四辺形を作るには、このコードを基本にしてください。 HTMLは、クラス名［paral01］を持つ中身がカラのdivタグなどでOKです！ .paral01 { transform: skewX(-45deg); // X軸方向（水平方向）に45度傾ける width:1200px; // 任意 height:200px; // 任意 margin:0 auto; b
【徹底解説】カスタムフィールドの新定番！Custom Field Suiteの使い方 | WEB Que / ウェブキュー
一番有名なAdvanced Custom Fields (ACF)ではもちろん繰り返しフィールドを使うことができます。しかし、繰り返しフィールドを使うためには有料版（サブスク）のAdvanced Custom Fields Proの購入が必要です。 一方、Cusutom Field Suiteであれば無料で繰り返しフィールドを使用することができ、繰り返しフィールドを入れ子にすることも可能です。もちろん繰り返しフィールド以外の入力フィールドで必要なものは一通りすべて揃っています。 また、ほかにもSmart Custom Fieldsでも繰り返しフィールドを無料で使用できますが、繰り返し処理を入れ子構造にすることができません。（ちなみにSmart Custom Fieldsは更新が2年以上ストップしており、作者ご本人も他のプラグインへの乗り換えを推奨しています。） Custom Field S
SVGファイルを使って、背景を波型や斜めにする方法 | MW Design
疑似要素として、画像の上に重ねるHTMLに直接svgを記述するやり方もある(その方がCSSでの変更も簡単そう？)けれど、 あまりHTMLの方をごちゃごちゃさせたくなかったので、 今回は、CSSにsvgの外部ファイルを読み込んで表示させる方法を選択しました。 <section class="wave"> <h2>Contents</h2> </section> .wave { background: url("../img1.jpg") no-repeat center; background-size: cover; height: 500px; position: relative; display: flex; /*contentsをcenterに*/ justify-content: center; align-items: center; font-size: 3.0rem; fo
QA用アコーディオンモジュールの作り方【レベル1】Hubspot CMS Hub
Webサイトでよく見かけるQA要素。コンパクトなアコーディオンタイプなら、ページが長くならず、スッキリ見せることができます。 今回はレベル1の名にふさわしく、超・超、簡易的なモジュールを作成します。はっきり言って汎用性は低いですが、基本的な知識も書いていますので「最近CMS Hubを始めたばかりなんだよね」という方にもオススメの内容となっています。 （次回は【レベル2】と称して、もう少し汎用性の高いアコーディオンモジュールの作成方法の記事を書こうと思っていますので、乞うご期待！） アコーディオンモジュール（レベル1）の仕様 モジュールのドラッグアンドドロップ配置が可能 QAの個数、記載内容、デザインは固定（記載内容を書き換えたい場合は、モジュールの大本を書き換える必要あり）※この仕様が「レベル1」とした理由です。 手順 【下準備 1】モジュールをドラッグアンドドロップできるテンプレートを作
リンクを全体に広げる方法【CSS】
<div class="recipe_box"> <span class="bold red"> <a class="" href="#"></a></span> <p class="img_recipe"> <img src="https://nacchi.org/wp-content/uploads/2019/04/casserole-dish-2776735_1280.jpg"> </p> <div class="right_text"> <p>トマトとマッシュルームとパプリカの料理</p> <p class="recipe_button">レシピを見る</p> </div> </div>
フレックスアイテムの折り返しをマスターする - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSSで文字詰めができる【font-feature-settings】を使用してサイトの見栄えを良くしよう！
font-feature-settingsプロパティとは font-feature-settingsプロパティの読み方 font-feature-settingsプロパティは「フォントフィーチャーセッティングス」と読みます。 font-feature-settingsプロパティの説明 font-feature-settingsプロパティは、OpenTypeフォントの文字詰めを行う機能です。OpenTypeフォントとは、現在アドビが提供しているフォントのこと。異なるプラットフォーム（WindowsやmacOSなど）仕様が異なるシステム上で稼働するフォントとなっています。 OpenType形式の主なメリットとしては、クロスプラットフォームで活用できること（同じフォントファイルをMacintoshとWindowsの両方で利用できます）、そして豊かな言語サポートと高度なタイポグラフィを可能にする広
【頻出デザイン】テキストと写真を交互にレイアウトするには『flex-direction: row-reverse;』
LPなどでテキストと写真が交互にレイアウトされているデザインを見たことはありませんか。今回はそのままコピペするだけで、テキストと写真を交互にレイアウトしたデザインを反映させることのできるコードを詳しく解説していきます。 結論：テキストと写真を交互にするためには『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』 テキストと写真を交互にするレイアウトを作るためには疑似クラス『nth-child(odd)』を使用したセレクタのプロパティ、値に『flex-direction: row-reverse;』を指定する必要があります。 それではここから、この『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』についての解説やそれ以外のコードについても順序立てて解説していきます。 <main> <se
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
CSSで何番目や何個分を前から、後ろから自由自在に指定するための疑似要素まとめ - YCOMのホームページの制作・運営に役立つブログ
わかりやすくまとめたつもりなので、ある程度わかってる人はこの表があれば備忘用には充分だと思います。 ここから下は、初心者のために補足的に説明入れておきます。 -child と -of-typeの違いの話 この特定の要素に対する指定の方法は大きく2つの指定方法があって、要素名つまりはタグの種類にかかわらず対象とする方法と、特定の要素に対してだけ（<P>だけとか）対象とする方法があります。 -childは要素の種類にかかわらず全てを対象として、-of-typeは特定の要素に対してだけ対象になります。 こんな感じですね。 図を見てもらったらわかるように、黄色いのが対象になる要素です。 複数の要素が混在しても、-childではすべての要素が対象になります。 -of-typeでは、その中の特定の要素（タグ）が対象です。 説明だけではわかりにくいので、以下の説明でのコードの例を簡単に見てみます。 最初
CSSでborderの上に見出しを重ねたボックスを作る - Qiita
<div class="caption_box"> <h1 class="caption">caption</h1> <p>Hello World!, content.....</p> </div> .caption_box{ position: relative; margin-top: 1em; padding: 1em 2em; border: 1px solid black; } .caption_box .caption{ position: absolute; top: 0; left: 0; font-size: 1em; padding: 0 1em; margin: 0; background-color: white; transform: translateY(-50%) translateX(1em); } 解説 親要素にborderとposition: relat
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【jQuery】スクロール時に要素を左右からスライドインさせる方法
grid不要！PCとスマホで要素の順番が全然違うときのcss小技
【CSS】縦・横・斜めに背景色(background)を2色で分ける方法 | Webエンジニア Wiki
