【CSS入門】calc()関数を使うとwidthやheightを自動計算してくれてスゴイ便利！
・デバイスごとに適切なサイズやレイアウトを自動的に調整したい人 ・サイズやレイアウトの計算式を考えるのが忙して難しい人 ・よくある四則演算の式を使って調整したい人 上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。 この記事では、「前半」では「幅や高さを自動的に調整するCSSのcalc関数の基本的な説明」を「後半」では「全体の幅を3分割するためのテクニック」や「変数を使った効率的な計算方法をご紹介」する方法を詳しく解説します。 プログラミング初心者の方でも、読みやすい内容なので、少しずつ試してみて楽しく学んでくださいね。 それでは、ご一読ください！ CSS calc関数の基本的な使い方を解説します。 ウェブデザインで、スマートフォンやパソコンなど、さまざまな画面で同じサイトがきれいに見えるようにするのは大切なことです。でも、画面の大きさが違
CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Flexboxで左と右の両端揃えにしたい 解決方法1: マークアップを追加する 解決方法2: flex-growを使用する 解決方法3: margin: auto;を使用する はじめに これは一見すると些細なことですが、ようやく最終的な解決策にたどりついたので、記事に書こうと思います
【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！） ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
【2024年】デバイス別レスポンシブデザインのブレイクポイントまとめ｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）
【2024年】デバイス別レスポンシブデザインのブレイクポイントまとめ｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）
カルーセル(スライダー)をおしゃれにする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
SEO対策の初心者向けバイブル｜SEOタイムズ
【2024年2月最新】X（旧Twitter）の使い方！アカウントの作成手順から基本・応用まで紹介【初心者向け】 2023/12/22 06:00 SNS 日本・海外問わず人気のあるSNSとして「X（旧Twitter）」が挙げられますが、基本的な使い方は押さえているでしょうか？ マナブ Xのアカウント作成などは簡単でしょうか？ レイナ 難しい設定はありません。基本の機能から… 【2024年最新】企業キャッチコピー78選！(業界別まとめ) 2023/12/15 09:00 Webマーケティング 「自社ブランドや製品を広告やマーケティング活動で効果的にアピールしたい」 「キャッチコピーが思いつかないため、他社の例を参考にしたい」 「キャッチコピー制作のノウハウを調査し、自社で活用したい」 キャッチコピー制作に取り… Website Explorerの使い方！ダウンロード方法と活用術8選 2024
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
【徹底解説】カスタムフィールドの新定番！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】画像のサイズ・縦横比・トリミング指定方法（初心者向け）
「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」の3点を中心に初心者のかた向けに解説。 3点の基礎知識に加えて、理解しやすく、すぐ実践的に使用できるようになる為、各方法をサンプルコード付きで解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【jQuery】スクロール時に要素を左右からスライドインさせる方法
grid不要！PCとスマホで要素の順番が全然違うときのcss小技
