AmaiSaetaのブックマーク - はてなブックマーク

分かると、実に、おもしろい！ QRコードの仕組み

少しマニアックな知識、QRコードの仕組みを紹介します。 QRコード決済、リンクをQRコードで提供するなど、日常的に使用されているQRコードにあるそれぞれのパターンがどのように機能しているか、どういう役割をしているのか、なぜ上下逆さにしても読み取れるのか、なぜ一部が隠されても読み取れるのかなどが分かります。 QR codes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに QRコードの仕組み終わりにはじめに QRコードがどのように機能しているのか、疑問に思ったことはありませんか？控えめに言って、実に、おもしろい！注意: この記事⬇では非常にマニアックな内容が含まれています。 QRコードの仕組み QRコード（Quick Response code）は自動車部

AmaiSaeta 2022/09/29

リンク

CSSは確実に進化している！新機能、単位を変数として利用できる「Variable Units（変数単位）」

今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめそしてCSSの新機能として、単位を変数として使用できる「Variable Units（変数単位）」が登場しようとしています。たとえば、--baseを8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--baseで32pxになります。 The Future of CSS: Variable Units by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Var

AmaiSaeta 2022/08/06

記述が煩わしくなくなって助かるというのは分かるんだが、態々新文法を追加する事か？ | 徒に新機能を追加すると、仕様の複雑性が増し、将来本当に渇望される機能とバッティング起こす可能性が……

リンク

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSグラデーションが算出される仕組みおすすめのカラーモードこれらの知識を活用する美しいグラデーションを生成できるツール終わりにはじめにさっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

AmaiSaeta 2022/01/27

あとで読む

リンク

CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック

テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ

AmaiSaeta 2021/03/12

リンク

JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。デモページ仕組みは、簡単です。ヘッダは外側と内側の2

AmaiSaeta 2021/03/02

リンク

Web制作者が知っておくと便利なCSSの小ネタ

CSSの進化はすごいですね🚀 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCSSの小ネタを紹介します。 CSS Tips by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにスムーズなスクロールはたった1行のCSSで CSSだけでテキストを省略複数行のテキストも省略できます水平と垂直方向のすべてに中央揃え影を画像のコンテンツのみに与える CSSでカーソルをSVGに変更 CSSだけでタイピングのエフェクトテキストのハイライトカラーを変更どんな要素でもサイズを変更 CSSで実装するモーダルサイズ指定にcalc()関数が便利空の要素をスタイ

AmaiSaeta 2021/01/28

いや便利なんだけれど、勧告状態でない物はそれを書いておいて欲しいし、ベンダ独自拡張（ベンダプレフィックス付きのやつ）は取り上げないで欲しい。

CSS
tips

リンク

CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しいこれらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、

AmaiSaeta 2020/05/18

リンク

[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

AmaiSaeta 2018/07/27

擬似要素の奴はアクセサビリティ的にもボタンにしろよとは思うものの、他はいろいろ応用が効きそう。

リンク

[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

子要素を親要素の左右の中央寄せに配置するのは、簡単です。インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置「position

AmaiSaeta 2018/03/10

高さが表示領域を越えた時の崩れを考えると、flexbox安定な気がする。

リンク

[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。はじめに pxとemとremの検証方法検証1. html要素でfont-sizeを指定検証2. ブラウザでズームが可能検証3. ブラウザでフォント設定が変更可能検証の結果はじめにあなたはMedia Queriesで使う単位にpx, em, remのどれが一番

AmaiSaeta 2016/12/30

CSS

リンク

ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu

AmaiSaeta 2013/08/22

おもしろい挙動ではある。

リンク

[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック

天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。ここではネガティブマージンではなく、

AmaiSaeta 2013/07/09

transformかぁ。 CSS Transforms は2013年7月9日現在まだ Working Draft だし、そういう意味でまだ現実的ではないな……

CSS
tips

リンク

[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。外部ファイル当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形）あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]

AmaiSaeta 2011/08/30

要Canvas。 | 円形でないローディングアニメーションとは思いつかなかった。 | アニメGIFで良くね?という気もするが、Tumblrみたいな(画像使えない)とこだと助かるのかも知れん。

リンク

ログインフォームに大切な7つの要素と重要な1つの機能

ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。元記事では下記のCSS3で実装されたフォームもダウンロードできます。フォームのタイトルこのフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。非メンバー用のリンク非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。ラベルとフィールドログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。パスワードを忘れた場合これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。また、配置する

AmaiSaeta 2011/02/19

リンク

[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例

CSS3 Media Queries 下記は各ポイントを意訳したものです。はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方まずは、デモページをみてください。ブラウザのサイズを変更すると、スタイルが変更されます。

AmaiSaeta 2011/02/18

リンク

[CSS]text-shadowでここまでできる、かっこいいエフェクト集

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト

AmaiSaeta 2010/11/11

"炎のテキストエフェクト"とか良いな。

リンク

2010年に備えて、知っておきたいウェブデザインのトレンド

2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。また、同著者の別エントリーに対応したものもあります。これはもう使用しない方がいいウェブデザインのトレンドはじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページレイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウトはじめにこのリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。ト

AmaiSaeta 2009/11/05

特大ヘッダは流行らないで欲しいなぁ。いやスプラッシュページ噛ますよりは全然マシだけど。 | フッタ特大にしてもblogとかだったらAutopagerizeの影響で見ないとかもごもご……

リンク

ウェブデザインの見栄えをよくするための7つのキーワード | コリス

7 Key Principles That Make A Web Design Look Good下記、そのポイントを意訳したものです。1. バランス2. グリッド3. カラー4. グラフィック5. タイポグラフィ6. ホワイトスペース7. コネクションおわりに1. バランスバランスで一番大切なことは、デザインが一方向に偏らないことです。対称あるいは非対称のものでもウェイトにはバランスをおくようにします。実例： Subtractionこのグラフィックの重要なポイントは右のクロスです。このクロスはビジュアルのウェイトに大きな影響を与えています。この小さなクロスがどれだけグラフィックのバランスに効果があるかは、あなたの手でクロスを隠して見てください。これが非対称のバランスと呼ばれるものです。ビジュアルのサイズやカラーをコントロールし、ウェイトを調整することができます。仮にクロスのカラーがオ

AmaiSaeta 2009/10/23

リンク

これはもう使用しない方がいいウェブデザインのトレンド

昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。過激な表現も一部あるので、留意ください。はじめに鏡面反射アクアフラリッシュコーヒーカップ地球コミックフォントストックフォトペーパーポラロイド特大のRSSアイコン音の自動再生カウンターマーキーブラックの背景スプラッシュページスキップの無いイントロブラックの背景はじめにトレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。