1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
Webにおける縦書きの普及を目指す「縦書きWebデザインアワード」開催
電子書籍端末メーカー、印刷会社、通信事業者などの民間企業等により構成される「縦書きWeb普及委員会」（正式名称：次世代Webブラウザのテキストレイアウトに関する検討会）は、縦書きを利用したWebコンテンツの普及促進の一環として「縦書きWebデザインアワード」の開催を発表しました。 2016年1月に募集を開始し、表現的に優れた実用性の高い縦書きの作品、Webの新たな可能性を見せてくれるような縦書きの作品を表彰します。 募集するのは「自由部門」「課題部門」「高校生以下の部」の3部門。自由部門では、CSSによる縦書き機能の「CSS Writing Modes」を用いて自由なWebコンテンツを募集します。課題部門では、主催者が提示したテキストや画像を素材に、CSSによる縦書き機能の「CSS Writing Modes」を用いたコンテンツを募集します。 「高校生部門」は、上記2つの部門において高校生
jQueryとCSS3で手軽に実装できるスクロールエフェクト
2015年10月6日 CSS, JavaScript, jQuery 近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ ↑私が10年以上利用している会計ソフト！ 基本：スクロールでテキストをぼわ〜んと表示 画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTML まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わった
3つだけ覚える「flexbox」の使い方 - Qiita
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ（最下部に吸い付くフッタ） この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき３つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は
Internet Explorer 10のHTML5／CSS3対応度は？
Internet Explorer 10のHTML5／CSS3対応度は？：Internet Explorer 10製品レビュー すでにWindows 8に搭載されているIE 10が、Windows 7 SP1向けにも提供が開始された。新機能は？ ほかのWebブラウザに比べてHTML5への対応度は？ IE 10の進化度を解説する。 連載目次 2013年2月26日、マイクロソフトがWindows 7 SP1／Server 2008 R2 SP1向けもInternet Explorer（IE） 10の正式版を公開した。IE 10は、Windows 8に標準搭載されており、全画面モードで動作する「没入型（immersive）表示」と、これまでと同様のデスクトップ表示の2つのモードをサポートしている。これに対してWindows 7／Server 2008 R2 SP1向けのIE 10では没入型表示は
冬休みこそプログラミングで遊ばせるチャンス・・・かも？ - 家庭内インフラ管理者の独り言（はなずきんの日記っぽいの）
舞鶴高専：電気情報工学科：公開講座「こどもプログラミング教室」に先日、子供と参加してきたのですが、すごく楽しかったようです。 以前、OSC京都でScratch入門イベントを京都クリエイティブワークショップ（きょーくりっ）が実施していたものに参加したのですが、それ以来、家で軽くScratchを触るものの、Webでのマニュアルやそれをプリントアウトしたものを見ても、なんとなく気分が乗らなかったみたいなんですが、「こどもプログラミング教室」でprogrunを使用してモノを作るということに、再度、火をつけてもらったようです。 とはいえ、Webマニュアルを見ながらや印刷物を見ながらではなんとなく、一人でやるには盛り上がりに欠けるようで、子どもと一緒に本屋に行ってみた。 購入した書籍 スクラッチアイデアブック―ゼロから学ぶスクラッチプログラミング 作者: 石原正雄出版社/メーカー: カットシステム発売
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn HTML5, CSS3, Javascript - Video Style Tutorials | CSSDeck
IDEA * IDEA