文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ
CSS Gridを使用して、Webページでよく使用されるレイアウトやコンポーネントの実装で起きる問題を解決する実装テクニックを紹介します。 Modern CSS grid solutions to common layout problems by Kevin Pennekamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 動的な中央揃えのレイアウト レスポンシブ対応のマルチコラムのグリッドシステム 2方向のカードレイアウト まとめ はじめに レイアウトと構成は、CSSにおいて最も難しいポイントに一つです。特にレスポンシブを考慮する場合は、なおさらです。最近では、メディアクエリを使用しない実装が増えています。これはさまざまなブレイクポイントを使用することで、CSSの保守性が低くなるからです。 しかし、CSS Gri
【100%見たことない】完全オリジナル！ハンバーガーメニューのCSSアニメーション３３選（解説付き） - Qiita
コピペだけで作れるハンバーガーメニューのCSSアニメーションを３３個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります 完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています CSSハンバーガーメニュー３３選 １. コピペだけでCSSアニメーション！そのまま使えるシンプルなハンバーガーメニュー３選 hoverやクリック（タップ）でデザインに変化が起きるよう作ってあるのでWeb制作やWebアプリケーション等でそのまま使えます。 ２. コピペでCSSマテリアルデザイン！Web制作で使えるオシャレなハン
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
CSS(SCSS) で作るペルソナ5 風メッセージウィンドウ - Qiita
ペルソナ5 の UI かっこいいですよね。 今は ペルソナ5S が出ていますが、今回は ペルソナ5 のメッセージウィンドウを、 もしかしたら CSS で作れるんじゃないか、と思って作ってみました。 画像としてはこんな感じ これがゆらゆらアニメーションします。 特徴 自由変形した四角形。 白と黒で重なったウィンドウ 吹き出しの矢印の部分の複雑な形 不規則にそれぞれの枠が別々で動くアニメーション 動作サンプル( Codepen ) See the Pen Persona5 Message Window by ばりとん📛フルスタックエンジニア兼ITコンサル (@dd0125) on CodePen. ソースコード <link rel="stylesheet" href="persona5.css"> <body> <h1>ペルソナ5 メッセージウィンドウ</h1> <div class="me
[CSS設計] 私のためのFLOCSSまとめ - Qiita
FLOCSSとは 「Foundation Layout Object CSS」 OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。 構造 dartsassに移行しましたので構造を修正しました。 scss/ ├─ foundation/ │ ├─ _base.scss │ ├─ ... │ ├─ index.scss ├─ global/ │ ├─ mixin/ │ │ ├─ _hover.scss │ │ ├─ ... │ │ ├─ index.scss │ ├─ variable/ │ │ ├─ _color.scss │ │ ├─ ... │ │ ├─ index.scss │ ├─ index.scss ├─ layout/ │ ├─ _header.scss │ ├─ ... │ ├─ index.scss ├─ object/ │ ├─ component/ │
![[CSS設計] 私のためのFLOCSSまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6e4205cb63d37afdc3a94a9dc478d0acb1cb81c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJUU4JUE4JUFEJUU4JUE4JTg4JTVEJTIwJUU3JUE3JTgxJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFRkxPQ1NTJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01M2NmYmJlNzZiNTA0NjllYjVkNDc5NmYyZDJmMWYzMQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXBlci1tYW5hLWNoYW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY0YmM5NGI1OTlkNDkyMWUxYmU2MzAzZTQ2MGViYzM3%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U09SSUNI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D90834c4f84e9bbce7b511fc34a3ad75e)
20 Amazing Pure CSS Animated Buttons - 1stWebDesigner
If you want to give your website a little extra flair, you’ll definitely want to investigate and utilize CSS animated buttons. These bits of code add a layer of interactivity to your website that most site visitors will appreciate. Plus, they can be used to add a sense of dynamics and further help to solidify your brand. If you’re not sure where to start in getting these buttons for your site, how
[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その2） - Qiita
この記事について 前回 [BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その1） 前回はheaderとfooterのBEMについて解説したので、 今回はここのメインエリアに関して解説していくぞい。 とりあえずindexページ作ってみよか 複数のページを作る上で一番混乱するのは共通化する部分とページごとの部分の命名方法な気がする、というか私は毎回そこで一回発狂する。 でも突然発狂しても読んでる人がドン引きするだけなので、 うわあああああああってなるところを示して一緒にうわあああああああってなってもらおうと思う。 ので一回何も考えずindexページをBlock,Element,Modifierにわけてみるぜ。 はい、こう！！！ 気がついたら全部Blockになってた・・・・ indexページなので、ページ全体のBlockはindexにしたよ
![[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その2） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3190957e7b3459ba82c09f93e4cecf4f8275f0ef/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQkVNJUU4JUE4JUFEJUU4JUE4JTg4JTVEJUUzJTgxJTg2JUUzJTgyJThGJUUzJTgxJTgyJUUzJTgxJTgyJUUzJTgxJTgyJUUzJTgxJTgyJUU0JUI4JTg5JTI4JUU1JThEJThEJTVFbyU1RSUyOSVFNSU4RCU4RCVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVBQSVFMyU4MiU4OSVFMyU4MSVBQSVFMyU4MSU4NEJFTSVFMyU4MSVBRSVFNiU5QiVCOCVFMyU4MSU4RCVFNiU5NiVCOSVFMyU4MiU5MiVFMyU4MyVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MyVCQyVFMyU4MyU5NSVFMyU4MyVBQyVFMyU4MyVCQyVFMyU4MyVBMCVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFNiU5NSVCNCVFNyU5MCU4NiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU5RSVFRiVCQyU4OCVFMyU4MSU5RCVFMyU4MSVBRTIlRUYlQkMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRhYWNhMTM2ZmNiYzNhZWZlZTRlYjk5Y2FhMjdhYTFh%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Ddf48367be52e5d807a0d4b2897f459b5)
CSS-Only Carousel | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow. Setting some boxes in a horizontal row with CSS Flexbox is easy.Showing only one box at a time with overflow and making it swipable with overscroll-behavior is easy.You can make the “slides” line up n
CSSで変数（カスタムプロパティ）を使ってみよう
2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク
（個人的まとめ）よく使うflexboxの設定
flexboxって？ flexboxレイアウトは、複数の子要素を揃えてレイアウトする仕組み 参考：A Complete Guide to Flexbox 親要素のCSSを設定するだけで子要素が簡単に揃ってくれる。 最低限「display: flex;」だけで横に揃う bootstrapの場合、揃えたい子要素全てにclass="col-xx-yy"を書く必要があるのに対して、flexboxの場合は必要な最小コードはたった一行、揃えたい子要素の親要素に加えるだけ。 目的 個人的にflexboxでよく使うコードのメモを残す 基本のき flexboxを使う最小限のコード 横に揃えるだけなら、親要素に display: flex;を加えるだけ。
Sass：cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録 - NxWorld
CSSでイージングを使用する際、easeやlinearの場合はそのままその名前を値に記述すればいいですが、例えばeaseOutCubicやeaseOutExpoなどを使用したいときはcubic-bezierを用いて記述する必要があります。 ただ、それぞれの指定数値をいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので、簡単に指定できるように変数化してみた備忘録です。 紹介しているイージング名やcubic-bezierの各値については、「Easing Function 早見表」を参照しており、それに加えease, linear, easeIn, easeOut, easeInOutも含めてあります。 単純な変数化 $ease : cubic-bezier(0.25, 0.1, 0.25, 1); $linear : cubic-bezier(0, 0, 1, 1
【CSS3】Transform（変形）関連のまとめ - Qiita
#はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。 transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。 ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。 jQueryやJavaScriptを使って似たようなことができますが、CSSを使う方がヌルヌル動きます。 transform（変形）には、2D（ XY 方向）と 3D（ XYZ 方向）があり、3D 表示するには複数のプロパティを指定する必要があります。 解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。 検証する場合は、一読して全てのプロパテ
UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
【JavaScript】スクロールに連動して要素を自由自在に表示させる［AOS］の使い方
ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト［AOS（Animate On Scroll Library）］の使い方を紹介します。 まずは試しに実装してみたサンプルをご覧ください。 DEMO : https://on-ze.com/demo/js-aos/ 要素を表示させる際の動きは「Fade」「Flip」「Zoom」の３種類が用意されています。 ここにタイミングや速度、上下左右の動きや回転の向きを指定できるので、実際にはかなり多くのカスタマイズが可能です。 jQuery不要で動くのも嬉しいですね。 配布されているJSファイルとCSSファイルの２つを読み込み、特定の要素に『data-aos』属性を指定するだけで動きます。 各ファイルのダウンロードは以下より。 AOS : http://michalsnik.github.io/aos/ AOS（Animate
CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 - NxWorld
ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは覚えておきたい！ コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方
CSSWAND
