CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
Backlogの通知をLambdaで受けてSlackに通知してみた | DevelopersIO
Backlogの通知をLambdaで自由に色々いじってSlackに飛ばします。Lambdaに飛ぶのでピタゴラスイッチし放題です。 業務ではBacklogでプロジェクト管理を行っています。 一方、メンバーとのコミュニケーションはもっぱらSlackを使っているので、 情報はできるだけSlackに集約させたいなぁと思っています。 そう思った時、さすがはBacklog、当然のようにSlack連携が用意されています。 もちろんベーシックな通知はこれでばっちりです。 しかしBacklogで色々管理をしたり、徹底的にラクをしていくためにも、 私にはゴリゴリにカスタマイズ可能な通知が必要だな、と思ってしまいました。 ということで、Backlogでのイベント発生を起点としてピタゴラスイッチを楽しむためにも、 ここはLambdaへ全ての通知を飛ばしておくことにしました。 もちろんLambdaに飛ばすだけだと何
Visual Studio Code でフロントエンドの開発環境を構築してデバッグする - Qiita
Webフロントエンドの開発を行ったことがない人向けに、Visual Studio Code でフロントエンドの開発環境構築からデバッグまでを説明します。 また、Google Chrome の デベロッパー ツール(Chrome DevTools) の使い方についても一部のパネルの説明をします。 開発環境の準備 フロントエンド開発で必要な開発環境の準備を行います。 使用するOSは Windows でも Mac でも構いません。 開発ツールのインストール フロントエンド開発なので、Webブラウザが必要となり、この記事では Google Chrome を使って説明します。 また、ファイルを記述するためのテキストエディタが必要となり、この記事では Visual Studio Code を使って説明します。 ソフト名 用途 バージョン ※
PyCon JP 2018: Webアプリケーションの仕組み - 清水川のScrapbox
Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 26 2018, 19:50:54)
レスポンシブデザインで気をつけたい、電話番号の扱い - Qiita
レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。 電話番号の自動リンク機能を無効化する iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。 しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。 電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。 <!DOCTYPE html> <html> <head> <!-- 電話番号の自動リンク機能を無効化 --> <meta name="format-detection"
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開
Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- body content --> </div> <dialog> <h1>Add to Wallet</h1> <label for="num">How many gold coins do you want to add to your wallet?</label> <div><input name=amt id="num" type=number min=0 step=0.01 value=10
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
お古な PC でも使えます。オンライン解剖学ソフト５選！ | 東洋医学の穴
BioDigital Human: Explore the Body in 3D! オンラインで軽快！ 使ってみて勝手が良かったのがこのアプリ。 BioDigital Google Chrome ならウェブアプリからインストールできるお！ さっそく筋肉を剥がして、上腕骨頭を露出させてみた。 回旋動脈なんかもバッチリ描写されてますね。 何といっても気に入ったのは、スナップショット機能！ このブログに張り付けてる写真がそうです。 ダウンロードファイルはPNG形式。 次は同じアングルで、女性モデルに変更。 オッパイを確認しなくては！ (*´д`*)ﾊｧﾊｧ そんな事を考えたあなたはスケベ。 さーてどんな表示がされるでしょうか … あれっ。 以外とふつう。 しかたないので、広頸筋と大胸筋、三角筋を剥がして、烏口突起周辺を表示。 小胸筋、上腕二頭筋短頭に烏口腕筋。 結節間溝に至るまで けっこうリアル
サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
Big Sky :: Ruby の a = a + 1 はなぜ undefined method '+' for nil:NilClass なのか
以前からずっと疑問に思っていた事があった。 ruby の後置 if/unless で条件が偽になった場合でも代入構文が実行されるのはどうしてだろう 例えば以下のコードを irb や pry で実行してみて欲しい。 a = 1 if false 続けて a をタイプする。すると nil が表示される。 僕のこれまでの理解だと後置if/unlessは、ステートメントに作用するのでそのステートメント自体が無効になる、つまり代入自体されなかった事になるという理解だった。ruby のパーサのソースコードを見ても後置ifはステートメントに作用している様だった。 | stmt modifier_if expr_value { /*%%%*/ $$ = new_if($3, remove_begin($1), 0); fixpos($$, $3); /*% $$ = dispatch2(if_mod, $
【保存版】検索上位の800万ページに見る「HTMLの各要素」利用状況のすべて
#概要 このHTML利用データはGoogle検索結果上位２０位のページから収集された800万のインデックスページを参照しています。 検索順位上位のWebページは平均して２５の異なる要素型を使用していることがよく分かります。 以下はそれらの検索順位上位のWebページのほとんどのページで使用されている２５個の要素です。 #Doctype doctypeはHTML文書の冒頭に記載され、ページが利用している(X)HTMLのバージョンを示しています。 #基本要素とメタデータ htmlはルート要素としても知られており、doctype宣言のすぐ後に記載されWebページのコンテンツをラップします。メタデータはスタイルやスクリプト、データなどのページ情報を含んでおり、検索エンジンまたはブラウザーがページを利用・レンダリングするのに役立ちます。 #コンテンツセクショニング コンテンツセクショニング要素を使えば
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 - NxWorld
特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
JOOY [ジョーイ] | メンズファッション、デート・恋愛、ライフスタイルWebマガジン
新しいファッションアイテムを買った時の新鮮さ、飾りすぎずに程よく決めるコーディネート・着こなしから生まれる自信、自分らしいスタイルで出かける時の満足感。そういった気持ちを男性にもっと感じてもらい、思い切り人生を遊んでクールな男性を目指して欲しい、そんな思いから"JOOY"は生まれました。 遊び心があるけどやり過ぎないメンズファッション、最旬トレンドを交えた定番のコーディネート、おすすめのスニーカー・ジャケットなどのトレンドアイテム、ツーブロックやパーマなど最新の髪型・ヘアスタイル、スタイリッシュな大人のデートスポット、ランチ・ディナー・合コンに使えるグルメ情報、女性にあげたいプレゼントや彼女を喜ばせるサプライズ、休日に楽しみたい旅行・観光スポットなど、同性からも異性からも一目置かれるクールな大人になるための情報をお届けします。
![JOOY [ジョーイ] | メンズファッション、デート・恋愛、ライフスタイルWebマガジン](https://cdn-ak-scissors.b.st-hatena.com/image/square/4f0a6d33854ff5a88e13d7ea3db038155173a11e/height=288;version=1;width=512/https%3A%2F%2Fjooy.jp%2Fassets%2Fogp-efdfdc5df6839c9dc1fb625a52c22b438ed40277a95e1a27bc21316082965b6a.png)
[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
![[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital](https://cdn-ak-scissors.b.st-hatena.com/image/square/85c7ac74adf21dfa1eefc8107e751ebe22fc1082/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112604.png)
nginxでアクセスログにhttp2の通信か出力する - ASnoKaze blog
「nginxでアクセスログにspdyのバージョンを出す」の時と同様にlog_formatで出力できる。 nginx 1.9.3 + patch.http2-v2で試す 環境構築は「nginx1.9.3 HTTP/2 パッチを試す」 設定 http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' 'h2:$http2'; access_log /var/log/nginx/access.log main; server { listen 443 ssl http2 ; ssl_prefer_server_ciphers on; ...このように、log_formatの部分に$http2を加えるだけ。 出力
[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="touchpoint.min.js"></script> </body> Step 2: JavaScript タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。 プロトタイプであれば、「window」でいいでしょう。 <script> TouchPoint.init(window); </script> エレメントを指定したり、波紋のカラーや
![[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/46be404c8d2f64ff7f9750d80ed6af78be5437ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080501.gif)
[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素
![[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42d4f0aeabe8d5c05510d7c537c44691f1eec9d1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015071301.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた | CriativeTips
