【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 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
カルーセル(スライダー)をおしゃれにする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 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
リンクを全体に広げる方法【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
Flexboxで均等幅(同じサイズ)で横並び配置する方法！ | 模写修行メディア
図のようにflexアイテムを均等に配置する方法となぜ均等になるのかを解説します。 <div class ="flex-container"> <div class ="flex-item">1</div> <div class ="flex-item">2</div> <div class ="flex-item">3</div> </div> .flex-container { display: flex; ... } .flex-item { flex: 1; /* これが重要！ */ ... } このようにflexアイテムに対して、flex: 1;を指定するだけで、flexアイテムの個数に限らず均等幅(同じサイズ)になります。 たったこれだけなのでコピペして使えますが、なぜこうなるかも理解してみてください。次のセクションでなぜ均等幅になるか解説します。 【初学者・中級者の方】独学に限
文字詰めできる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小技
【CSS】縦・横・斜めに背景色(background)を2色で分ける方法 | Webエンジニア Wiki
