1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
A Complete Guide To Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to su
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
一番分かりやすいCSS Grid Layoutの使い方ガイド | Web Design Trends
CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じるかもしれません。 そこで、CSS Grid Layoutの重要なポイントに絞って、分かりやすく解説したいと思います。 もう迷わない！CSS Flexboxの使い方を徹底解説 CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法... Web Design Trends
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ -Tiny Helpers
CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
cssだけでズームしながらふわっと表示が切り替わるスライドショーを作る｜株式会社しずおかオンライン
最近は動くヒーローイメージが当たり前になってきましたね。 今回はjQuery、JavaScriptを使わずに、 cssだけでズームしながらふわっと表示が切り替わるスライドショーを作ってみたいと思います。 まずはデモをご覧ください background-imageで表示するパターンと imgタグで表示するパターンとを用意してみました。フェードイン・フェードアウトの動きは共通です。 スライドアニメーションに関してはどちらもcssのanimationで実装しています。 html <div class="main_imgBox"> <div class="main_img" style="background-image: url(###)"></div> <div class="main_img" style="background-image: url(###)"></div> <div cl
デザイナーにおすすめのChrome拡張機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは デザイナーのミライです。 ジャスの意味がわかるやつは大体友達。 今回はデザイナーにオススメしたいChrome拡張機能を紹介します！ みなさんの日々の業務が、便利なツールで心地よくなりますように。 ※ 導入方法や詳細な使用方法などは、本記事では割愛させていただきます。 01.デザインに役立つやつ Muzli 2 – Stay Inspired デザイン系の情報を集めるならMuzliです。「新しいタブ」で Muzliを毎日見ていればトレンドを追い続けることができそうですね。「dribbble」「Award系のサイト」「クリエイティブ系のブログ」などからの情報が表示されています。 Chrome ウェブストア 提供サイト ColorZilla サイトから色を抽出できる、カラーピッカーです。 抽出しヒストリーを保存してくれたり、1箇所だけでなくページ全体から抽出できる機能があったりして、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Josh.js - A JavaScript library to animate content on page scroll.
DirtyMarkup Formatter - CSS Beautifier for Stylesheets
Flexbox Cheat Site