游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

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を調整

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

Result 今更感半端ないですが、CSSのみでアコーディオン 全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります 両方ともinput要素と:checkedを使います 違いはcheckboxかradioか、なので基本的には同じコードで動きます cssinput {/*input要素自体は非表示にしておく*/ position: absolute; opacity: 0; z-index: -1; } /*アコーディオンのスタイリング*/ .tabs { border-radius: 8px; overflow: hidden; border:1px solid #ddd; border-top:none; } .tab { width: 100%; color: white; overflow: hidden; } .tab-label { display: flex

なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

CSSハックとは各ブラウザごとでCSSの実装状況やバグの影響で表示が崩れてしまう時に、特定のブラウザのみにCSSの指定ができるテクニックです。 Chrome、Firefox、Safari、IEの4つブラウザが主に使われていて、最近ではWindows10の登場により新たにEdge(エッジ)というブラウザが生まれました。 タブレット・スマホのブラウザのことも考えると沢山のブラウザやOSに対応したCSSを書くことになります。 webサイトを制作する際に、各ブラウザで実装状況の違いやバグがあるので見た目が崩れないようにいろいろとCSSで試行錯誤することはよくあります。 それでもあのブラウザだけがどうにもならないって時が出てくることもあるでしょう。 Web制作では、PCのいろんなブラウザもそうですしタブレット、スマートフォンでのiPhone、Androidのブラウザなど、どのような状況でもうまく表示

はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内

はじめに そもそもモーダルとは？ 発生した問題と対処法 1. z-indexの値が影レイヤより小さくないか 2. HTMLのtopレベルにmodalを記載していない まとめ ＊＊＊＊＊ はじめに 皆さんこんにちは、こんばんは。 techblogchan（ @techblogchan ）です。 今回はwebサイトを作成していたときに私がハマった問題に関して解決策を上げていこうと思います！ もし同じ問題でハマっている人がいて助けになれば幸いです。 ＊＊＊＊＊ そもそもモーダルとは？ 言葉に馴染みがない人でも見たらあ〜となるはず。 webサイトで会員登録するときなどに出てくるこれです。 引用: newspicks.com 親ウィンドウの上に重なる子ウィンドウ、これがモーダルです。 更に詳しく知りたい方は以下のサイトがとてもわかり易いので、読んでみてください。 https://wa3.i-3-i.

2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。

最近のWebデザインは写真とタイポグラフィ、そしてシンプルな区切り（グリッド）などで表現されることも多く、その中で少しでも面白い見せ方を考えると、曲線や角度など、ちょっとしたアクセントが欲しくなったりします。 ということで、今回はこちら。 ワンカラムに多いコンテンツ区切りを角丸で描く つまりこれですね。 これまでは「マスク画像」として、png画像を乗っけたりして一部を隠すように表現していたことが多いかと思いますが、よくよく考えたら別にCSSでできるもんねぇ。 今までこの手のコーディングをする機会がなく、使いそうで使ってなかったので、メモとして残します。 まずはhtml <div class="wrap"> <div class="arc"> <p> なんか本文 </p> </div> </div> class=”arc”部分の下部で円弧を表現します。 説明が面倒なのでCSSはこちら .wr

2015年3月10日 【javascript】レスポンシブなタブメニューをサクッと実装できる「Responsive Full Width Tabs」 PCサイトをレスポンシブ化する上で悩むのが、メニューのあしらい。 特にタブメニューとなると、スマホサイズになると見づらく、タッチしにくくなってしまうことがよくあります。 そこで今回は、スマホなどの小さな画面で表示したときもバッチリ使いやすい、コピペで使えるレスポンシブタブメニューをご紹介します。 Responsive Full Width Tabs　- codrops PC画面の場合の見え方 スマホ等小さい画面での見え方 画面サイズが大きい時はアイコンとテキストのセットで見せ、小さい画面ではアイコンのみにすることで見やすくなっています。 デモはこちら http://tympanus.net/Blueprints/FullWidthTabs/

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）でもベンダープレフィッ

CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。 ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。 そのままコピー＆ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8　CSSボタンデザイン記事を追加しました。 コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基本形 まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。 フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基本的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig

公開日：2014年9月10日 最終更新日：2019年4月6日 CSS3で追加された線形グラデーション「linear-gradient」と円形グラデーション「radial-gradient」を使用すれば、さまざまなパターンを表現することが可能です。 これに background-sizeプロパティを組み合わせれば、CSSだけで背景画像を作成することができます。 これまで背景にパターン画像を適用するには、タイル状に並べて使う小さな画像を用意しましたが、CSS3をサポートするブラウザが増えてきている現在では、ほとんどのパターンがCSSだけで作成可能になっています。 CSSで作られたパターン画像のコードを配布しているサイトもありますが、この記事では自分でパターンを作成する基本を解説いたします。 【コンテンツ】 仕様策定の動向とブラウザの対応状況 radial-gradient の書式 linear

ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。 スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがスティッキーになったり、実用的なアイデアが満載です。 各デモは「Run Pen」をクリックすると、動作します。 まずは、スクロールすると、ヒーローイメージがズームするヘッダ。 HTMLは非常にシンプルで、CSSもJSもシンプルなので、コピペで簡単に利用できます。

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。