CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ
CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ
WordPressのテーマ開発を初めて行う人に向けての制作フロー ｜https://wp.yat-net.com/name
WordPressでオリジナルのテーマを作成する際のフローをまとめました。サンプルも配布してるので、是非使ってみてください、 テーマ開発をやったことがない、それほどやってないという人でもなるべく分かるように書いていますので、手順通りにやっていただければ、テーマ開発をどうすれば良いのか？をわかってもらえると思います。 尚、執筆時点でのWordPressのバージョンは 4.8.2 です。 この記事を書くに当たり WordPress Codex日本語版と、WebDesign Recipes はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました を参考にさせていただきました。 目次 テーマのデザインをパーツに パーツの種類 コーディング WordPressの環境構築 必要なファイル テンプレートの種類 トップページのテンプレート化 header.php の編集 i
[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog
こんにちは。Supership デザイナーのハガです。今回はcssのお話です。 皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
![[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/f43e585f4105dca3513739b1a83cc4d242345de2/height=288;version=1;width=512/https%3A%2F%2Fimages.wantedly.com%2Fi%2Fqq2P91N%3Fw%3D1200%26h%3D630%26style%3Dcover)
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]
お気に入りのWebサイトを紹介したいと思います。職場が変わった、パソコンが変わった時にいちいち探すのも少し面倒なのでブログに残しておきたいと思います。 とても勉強になるサイトばかりなのでチェックしてみてはいかがでしょうか？ タグリファレンス HTMLクイックリファレンス 目的別にHTMLやCSSのタグを探すことができる。ど忘れした時に調度良い感じがします。 TAG index HTMLやCSSのタグについてまとめられている。HTML5のタグも追加された。 HTMLやCSSを学び始めた頃から参考にさせてもらっているサイトです。タグの具体的な内容が書かれているので手軽に調べることができます。 デザインリンク Web Design Clip 業種やカラーでWebサイトを探すことができます。 Responsive Web Design JP レスポンシブデザインのサイトデザインを紹介してい
![Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/01048eb6998fe7ef9afe223729d1cc1d814f7e10/height=288;version=1;width=512/http%3A%2F%2Fwww.cocoblo.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F12%2Fresponsive-jp.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp