【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開発｜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で三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形に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
【レスポンシブ対応】シンプルなCSSのテーブルデザイン13選！ - SEOタイムズ
<table class="table_design01"> <tbody> <tr> <th>会社名</th> <td>○○株式会社</td> </tr> <tr> <th>設立</th> <td>20XX年X月X日</td> </tr> <tr> <th>住所</th> <td>東京都○○区△△町</td> </tr> <tr> <th>電話番号</th> <td>00-0000-00000</td> </tr> </tbody> </table> .table_design01 { border-collapse: collapse; width: 100%; max-width: 700px; } .table_design01 th, .table_design01 td { border: 2px solid #fff; background-color: #e6f1f6; p
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
LP制作とコーディング費用の相場について、現役フリーランスが徹底解説【初心者向け】 | TERUBLOG
LP制作とコーディング費用の相場について、現役フリーランスが徹底解説【初心者向け】 2023 9/19 こんにちはTERUです。 フリーランスでホームページやECサイト制作を仕事にしています。 読者の悩み LP制作やコーディングの見積もりを出すために相場を知りたい 本記事では、こういった疑問に答えます。 LP（ランディングページ）制作の経験が少ない場合、なかなか自分の見積もりに自信を持つことは難しいです。 特にフリーランスでWEB制作を行なっている人は、クライアントの予算感とかけ離れた見積もりを出して、信頼を失わないためにも相場感を把握しておくことは重要になります。 この記事を読んで分かること LP制作やコーディングの費用相場が分かる。 費用以外の差別化ポイントが分かる。 本記事の信頼性 フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている Web制作会社
【徹底解説】カスタムフィールドの新定番！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>
WordPressを使ったランディングページの作り方とは？テンプレートと制作のポイント
WordPressは世界でもっとも利用されるWebサイト構築のCMSツールで、ランディングページも簡単に制作可能です。 しかし、WordPressでランディングページを制作できると知らなかったため、制作費用をかけすぎてしまったというケースをよく耳にします。 そこで今回は、WordPressからランディングページを制作する方法について解説します。 ■合わせてよく読まれている資料：成果の出るLPの構成も →広告運用の重要なカギ！？ランディングページ改善ガイド WordPressの固定ページとランディングページの違い WordPressの固定ページを利用して、ランディングページが作成できます。 そもそもWordPressの固定ページとは、投稿機能と違い、カテゴリ分けされない独立したWebページ作成機能のことです。固定ページは、主に会社概要やお問い合わせページ作成などで利用されます。 一方でランデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【jQuery】スクロール時に要素を左右からスライドインさせる方法
Web広告の運用に欠かせない“コンバージョン計測”の計測方法｜LP ノウハウ
grid不要！PCとスマホで要素の順番が全然違うときのcss小技
