フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
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を調整
フルスクリーン表示するjQueryのレスポンシブメニュー｜Gimmick log
公開日：2017.12.25 更新日：2020.05.13 jQuery, ナビゲーション ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。 ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。 サンプル See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen. ↓別ウィンドウで見たい方はこちら デモページ html htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。 <div class="header"> <div class="logo">SITE NAME</div> <a
16:9一覧表
16:9一覧表 横ヨコ 縦タテ 倍率バイリツ 16 9 1 32 18 2 64 36 4 96 54 6 128 72 8 160 90 10 192 108 12 224 126 14 256 144 16 288 162 18 320 180 20 352 198 22 384 216 24 416 234 26 448 252 28 480 270 30 0.25 512 288 32 544 306 34 576 324 36 608 342 38 640 360 40 672 378 42 704 396 44 736 414 46 768 432 48 800 450 50 832 468 52 864 486 54 896 504 56 928 522 58 960 540 60 0.5 992 558 62 1024 576 64 1056 594 66 1088 612
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
Google Maps API Styled Map Wizard
Navigate to the map region you wish to use to preview your style. Jump to a particular location using the Enter a location field in the top right. Select a type of feature to style in the Selectors panel. If you only wish to style the Geometry or Labels for the selected feature type, select the required Element Type. Select the combination of Stylers to apply to the selected feature type. Once you
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
画面解像度 - Wikipedia
この記事は、全部または一部が他の記事や節と重複しています。 具体的にはディスプレイ解像度との重複です。記事のノートページで議論し、 重複箇所を重複先記事へのリンクと要約文にする（ウィキペディアの要約スタイル参照）か 重複記事同士を統合する（ページの分割と統合参照）か 重複部分を削除して残りを新たな記事としてください。 （2021年6月） 画面解像度（がめんかいぞうど、display resolution, screen resolution）は、慣用的にコンピュータ等のディスプレイに表示される総画素数を指す。 本来の「解像度」の言葉通り、画面の精細さを指すこともあるが、区別する場合は画素密度またはピクセル密度 (pixel density) と称される。
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
Apple元社員が開発した、iPadをMacの「遅延ゼロ」のUSBモニターにできる「Duet Display」が公開
元Appleエンジニアが開発したiPadをUSB接続でMacの外付けディスプレイ化できるアプリ「Duet Display」がApp Storeにて公開されました。 Duet Displayは元Apple社員のエンジニア達が開発したアプリで、iPadをMacにUSBで有線接続する事によって「遅延ゼロ（Zero Lag）」の快適な外付けディスプレイにできる事が売りと謳っています。以下が公式プロモーション動画。 Duet DisplayはiTunes App Storeで1,000円の有料アプリとして販売されており、Mac側のクライアントはwww.duetdisplay.com/macにアクセスする事でダウンロード可能。なお、インストール時には再起動が必要です。 接続に関して特に設定は必要なく、iPad側とMac側両方でDuet Displayアプリを起動した状態でUSBケーブルで接続すれば自動
ピクセルアスペクト比計算機 Ver.2.2
略語表記の意味 ・DAR(Display Aspect Ratio) 画面表示する際のアスペクト比になります。 ・PAR(Pixel Aspect Ratio) ・SAR(Sample Aspect Ratio) 1ピクセルあたりのアスペクト比になります。 x264cliの--sar SAR_W:SAR_H mp4boxの-par TrackID=PAR_W:PAR_H wmvの-pixelratio PAR_W PAR_H などが該当します。 参考：ageha 縦横（アスペクト）比
iPadをMacのセカンドディスプレイとして使う新しい方法「Duet Display」、元Appleエンジニアが開発 - こぼねみ
MacのセカンドディスプレイとしてiPadなどiOSデバイスを活用する新しいソリューションが登場しました。 「Duet Display」は、iOSデバイスをMacの外部ディスプレイとして使うことできます。 すでに同様のアプリはいくつも存在していますが、「Duet Display」はそれらにない利点があるようです。 「Duet Display」は元Appleのエンジニア、Rahul Dewan氏によって開発されました。 Duet Display Duet, Inc.仕事効率化¥1,840 有線接続でマルチディスプレイ 「Duet Display」は、MacとiOSデバイスをLightningケーブルで接続します。 つまり、ワイヤレスではなく有線接続です。 そのことで遅延がなく（ゼロ・ラグと表現されています）、Air Displayのようなワイヤレスで接続する場合よりもストレスが少ないようです
SurfacePro2にOSXをインストールする夢 - yorunokitsune
最近夢系の話題全然聞かないなぁと思ってinsanelymacを覗いたらSurfaceProで夢を見るのがそこそこ（９０ページくらい）賑わってて、でも日本語の記事みたいなのが全然無かったので折角なのでエントリ書きました。 [Guide] SurfacePro 1 & 2 Osx-Android-Windows multiboot - Installation Guides - InsanelyMac Forum の通りにやれば誰でも出来るので、この記事も９割５分くらいこの記事の翻訳みたいな感じになっています。 ＊使ったもの Surface Pro 2(今回はサイレントアップデート前のモデル) MacbookPro Retina13inch（Marveriks動いているMacであればなんでもいいです） USB8GB（8GBでギリギリ足りました。） USBは２つあるとデータ転送に使えて便利 マイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
