CSSの中央揃えで、最も万能で信頼できる実装テクニック
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個
モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren
CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法
[CSS]シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css
シンプルなWebサイトをすぐに構築したい時、デモページを簡単に作成したい時、CSSでスタイルするのに時間をかけたくない時に便利なCSSのフレームワークを紹介します。 class付与を一切必要としないスタイルシートで、HTMLページを用意したら、head内に外部CSSとして加えるだけで、すぐに利用できます。 water.css water.css -GitHub water.cssの特徴 water.cssのデモ water.cssの使い方 water.cssの特徴 water.cssはシンプルな静的Webサイトを少しだけ美しくするためのスタイルシートのコレクションです。 classは一切無しで、スタイルシートを適用。 レスポンシブ対応。 高品質なコード。 幅広いブラウザのサポート（kindleでも動作します）。 2Kbで、超軽量。 water.cssのデモ water.cssには、ダークテ
![[CSS]シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab073de67fb698b5055474fde7b3e7bca2d9d8f2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019041001-01.png)
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
position: sticky;の仕組みや実際の使い方をやさしく解説
position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky
CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法
border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に
a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。 CSSだけで、クリック可能な範囲を広げるスタイルシートのテクニックを紹介します。 下記のようなa要素がボタンだけでも、クリック可能な範囲がカード全体に広がります。
![[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7a189d61094c5b54929e435d58f3994792159b9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018082501.png)
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
hover時に素敵な動きを加えてくれるcss3アニメーション10選
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.css サイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次 サイト・デモ 使い勝手のよさそうなエフェクトが用意されています。 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 サイト・デモ 画像にカーソルを当てた時の動きに使えそうなCSSをまとめてくださっています。 CSSのみで実装するキャプションエフェクト 20 サイト・デモ カーソルを当てた時にキャプションを表示する際の動きについてまとめてくださっ
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
Honoka - 日本語も美しく表示できるBootstrapテーマ
