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

Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能

5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つけるフルサイズのスクリーンショットをキャプチャリソースのロードをブロック非同期コードの検証コマンドメニューの統一ページの軽量化: 未使用のCSSとJavaScriptを見つける新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show

mirucons 2017/06/07

Chrome 59 Developer Tools. 色々増えてて便利ね

リンク

[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモレスポンシブ対応のテーブルの実装レスポンシブ対応のテーブルのデモデモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

mirucons 2016/10/11

リンク

CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ

CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。フォントのサイズを変化縦と横の比率を維持したボタン縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さアイコンの幅と高さ、そして間隔もキャプション付き画像装飾された背景アイコン付き検索フォームチェックボックスで実装されたトグルブロックの一行の長さボタ

mirucons 2016/09/23

css

リンク

[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。各デバイスのブレイクポイントに合わせたメディアクエリの書き方複数のブレイクポイントを使ったメディアクエリの書き方人気のフレームワークのブレイクポイントの設定レスポンシブの確認が簡単にできる最強ツール各デバイスのブレイクポイントに合わせたメディアクエリの書き方スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ

mirucons 2016/09/12

リンク

はてなブックマーク

タグ

ブックマーク / coliss.com (4)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第4週）

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス