サムネイルを表示するときに、サーバサイドプログラムで画像の縦横を計算してサムネイル画像を作ることがあります。しかし、場合によってはCSS3でサムネイル画像を描画したほうが実装コストが低い場合があります。ここでは、CSS3を使ってサムネイル画像をキレイに描画する方法を紹介します。 1. 内接・外接とは？ 画像の変形方法はいろいろありますが、ここでは内接リサイズ・外接リサイズについてのみ紹介します。内接リサイズ・外接リサイズとは、画像の縦横比を維持したまま、枠のサイズにフィットするように画像のサイズを変更する描画方法です。印刷出版系の用語だそうです。 内接リサイズ 外接リサイズ

長方形ではないヘッダやコンテンツが最近増えてきました。その一つとしてヘッダの下、コンテンツを区切るラインを斜めにすることで、簡単にデザインの印象を変えることができます。一見シンプルに見えますが、実装するには慎重を要します。 ラインを斜めに実装するCSSやSVGのテクニックをコードのシンプルさ、コンテンツの生成、対応ブラウザ、パフォーマンスの面から実装に適した方法を詳しく紹介します。 Ultimate Guide to Non-Rectangular Headers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインをCSSやSVGで作成する方法 斜めのラインをCSSのボーダーで作成 斜めのラインをCSSのグラデーションで作成 斜めのラインをCSSのシェイプで作成 斜めのラインをSVGの背景で作成 斜めのラインをSVGの

【11-2】marginの auto という値の「？」を解決しておこう 最終更新日：2022年05月13日 （初回投稿日：2015年11月10日） 前回の【11-1】marginと marginのショートハンド に引き続き、今回も margin についてです。 margin の値には、数値の他に auto という値も使えます。 auto（オート）というからにはブラウサが 値を自動的に決めますが、ちょっと変わったルールがあるので注意が必要です。 まず最初に、autoが効くのは ブロックレベルの要素だけです。 インラインの要素にはmarginのautoは効きません。 （＊インライン・ブロックレベルに関しては【9】HTML要素の インライン・ブロックレベル について をご覧ください） というわけで今回はブロックレベルの要素に限っての、margin の autoという値の話です。 margin :

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2015年度新卒入社の森下(@morishitter)です。 今は755のフルリニューアルに向けて、Webフロントエンドの開発を担当しています。 その傍らでOSS活動も行っており、本エントリーで紹介するPostCSSは、GitHub上で僕がメンバーの1人でもあるプロジェクトです。 PostCSSとは PostCSSはNode.js製のCSSのパーサーで、そのAST(パース結果のJSオブジェクト)を操作するための便利なAPIを提供しています。PostCSS自体が提供する機能はたったこれだけで、非常に小さいライブラリです。 ASTを操作し、

指定領域に収めたいテキストを適当な長さに切って表示するCSSです。text-overflow: ellipsis; の仕様と使用例。1行または複数行にわたる場合で書式が変わります。長い英単語（URLなど）の折り返しにもどうぞ。 テキストをCSSだけで適当な長さに省略表示する方法です。URLなどの折り返しが効かない文字列を扱うときなどにどうぞ。はみ出しても構わないから大量のカラムを一定サイズに収めたいときも便利です。 好きなサイズで切り取るには overflow:hidden; が一般的ですが、テキストの場合は text-overflow:ellipsis を使うと三点リーダー「…」を付与できます。省略したことがユーザにも伝わるので何となく親切というか。 text-overflow を使って1行で収める 細かい解説は後回しにして、まずはソースから。 指定領域の設定 基本となる表示領域と適当な

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す

左右・上下左右などCSSで要素やコンテンツの中央配置（中央寄せ）を実装する方法を備忘録も兼ねていくつか紹介します。 どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。 はじめに ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>の部分を中央配置させるという内容になっています。 また、領域がわかりやすいように.childにはグレーの背景色を指定しています。 <div class="parent"> <div class="child">Lorem ipsum dolor sit amet.</div> </div>

はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 - HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 - Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 - 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · a

知らないくせに知ってるふりをしてました。 ちょっとはまったので、 次使うとき困らないようにおさらいしました。 Element の CSS値を調べる getComputedStyle / currentStyle。 get … 続きを読む → 投稿 復習, Element の CSS値を調べる getComputedStyle / currentStyle は イナヅマTVログ に最初に表示されました。

「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法

Stretchy Navigation A rounded navigation trigger that stretches on click/tap to reveal the navigation items. While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add

画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。

先週末まで2週間インターンシップに行っていたのでバタバタしてましたー！やっと落ち着いて来たので久しぶりの更新です。 今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。 超簡単&コピペでOK！ ページトップへ戻るボタンの実装方法：jQuery jQuery初心者さんが、まず1番最初にやりたいのはこの『トップページへ戻るボタン』なはず！！！ なぜなら私がそうだったから！ ！ ボタンを押すとスーっと上に移動してくれる。この動きがたまらなく気持ちいい。 このブログにも最近やっと実装しましたが、クセになりますよね。 ページが縦に長くなりがちな方はぜひぜひ設置してみてくださいませ。 demo このブログがまさにdemoページそのものです！トップページから少しスクロールすると、右下に出てくる水色のボタンです。動きを試してみてください。 『ページトップへ戻るボタン』を知

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固

今回は、プラグインを使わないで作る『アコーディオンメニューの作り方』です！ 例えば 『Q ＆ A』みたいな項目に対しての説明が長くなってしまうとき 『メニューボタン』のように、入れ子入れ子で子ページがいくつもあるとき 説明が長い位場合は特に必要性を感じますよね。そのままつらつらと書き続けると、ユーザーがずっとスクロールしなくちゃいけなくて見るのが大変なのです。 そんな時に役立つのがこの『表示・非表示ボタン』です。 jQuery：クリックしたら 表示するtoggleボタンの実装方法 動作としてはこんな感じです。 表示(非表示)ボタンを押す ↓　　↓　　↓ 連動して、説明文が表示(非表示)になる 下にdemoも作ってあるので、触ってみてください。 demo HTML <!-- 表示ボタン --> <p class="openBtn"><i class="fa fa-chevron-down f

2015-10-08 CSS3を使って画像をスライド（平行移動）させてみる はてな シェアする Google+ Pocket CSS3を使って画像をスライド（平行移動）させてみる CSS3で画像を画像をスライド（平行移動）させる使用するCSSは <style type="text/css"> .slider { animation: slider1 4s infinite; } @-webkit-keyframes slider1 { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(360px); } } @-moz-keyframes slider1 { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(360px); } }

リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsのバージョンアップ版の紹介記事はこちら。 CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 リスト要素の最後だけボーダーを適用・削除 body要素に「line-height」を加える 天地の中央に配置 ネガティブなnth-childを使用してアイテムを選択

ファーストビューで大きめのイメージやムービーなどを配置しているサイトで設置されていることが多い、次のコンテンツがあることを示したりスクロールするよう促すアイコンやボタンをCSSで表現してみたサンプル全10種類です。 クリックした際に次のコンテンツへスクロールされる動きなどはJavaScriptを使用していますが、矢印の見栄えやアニメーションなどに関してはCSSのみで実装してあります。 共通のHTML・CSS 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなHTMLを使用しています。

A few months ago, a number of designers and UI engineers, inspired by a popular blog post from GitHub’s Mark Otto, published articles on their approaches to writing and organizing CSS. In this post, I’m going to follow suit and take you through a breakdown of the tools we use, as well as the architecture of BugSnag’s CSS. There’s no surefire method for organizing CSS for all situations; the conten