[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 更新日：2019/12/27 Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているかもしれません。 ということで今回は、日々のコーディング作業で気になった覚えのあることをどどんとまとめてみました。 このデザインだとどんな風に困ってしまうのか、そしてどう変えれば改善できるのか、なるべく具体例を挙げて説明していきます。 どのデザインツールでも共通の内容が多いと思いますが、基本的にはPhotoshopでの作業を想定しています。 常識的な内容も多いので、そのレベルは当然できてますという方
![[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 | 東京のホームページ制作 / WEB制作会社 BRISK](https://cdn-ak-scissors.b.st-hatena.com/image/square/61015d8f4b04fb0dced52a6a21c4bd7213a4ba99/height=288;version=1;width=512/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F12%2Fcode-friendly-kv2-1.png)
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
【保存版】ネットフリックスの隠しカテゴリの裏コード＆リンクまとめ – NETFLIXで動画をより詳細なジャンルで探す方法 - usedoor
Netflixでトップページなどには表示されていないより詳細なカテゴリ、ジャンルで動画を探す方法です。 動画見放題サービスの中でも最大手クラスの「ネットフリックス」 日本、海外関係なく映画やドラマ、アニメの他に日テレ系のドラマなども視聴できるサービスです。 ネットフリックスにログインした後のトップページでは、自分の過去の動画視聴履歴から「あなたにオススメ」をチョイスしてくれたり、新着動画が表示されていたりします。 その他にもオススメのカテゴリ、ジャンルなどが表示されます。 表示されていないより詳細な裏カテゴリ、ジャンルと呼ばれるページがある そんなネットフリックスですが、トップページなどには表示されていないより細かくカテゴライズされたカテゴリ、ジャンルが存在しています。 『裏コード』を入力して利用する『裏カテゴリ』『裏ジャンル』などと呼ばれることもあるようですが、直接のリンクが用意されてい
CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 追記: 2023/8/29リリース予定のFirefox 117でもサポート予定。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネストの使い方を学べるデモページもあるので、勉強するのにぴったりです。 CSS Nesting by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSのネストとは CSSのネストの基礎知識 CSSのネストのパーサーについて CSSのネストを検出する方法 デベロッパーツールでCSSのネストをデバッグする方法 CS
インフラ一筋のおじさんが画像生成AI“Stable-Diffusion”を読み込んでみる件 | IIJ Engineers Blog
地方拠点の一つ、九州支社に所属しています。サーバ・ストレージを中心としたSI業務に携わってましたが、現在は技術探索・深堀業務を中心に対応しています。 2018年に難病を患ったことにより、定期的に入退院を繰り返しつつ、2023年には男性更年期障害の発症をきっかけに、トランスジェンダーとしての道を歩み始めてます。 なんだかAIって流行ってますよねー こんにちわ。九州支社で細々と遊んで検証業務にいそしんでいるとみーです。 2022年3月から、どーしても「名前だけ知ってる状態」ってのにもやもやしていて、Deeplearningに手を付けたものの、あまりに内容が奥深すぎて沼にドはまりして周囲に「たすけてぇ、たすけてぇ」って叫んでいる素敵な日々を過ごしています。 取りあえず画像処理としてディープフェイク、NLP(Natural Language Processing：自然言語処理)として簡易チャットボ
先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アスペクト比とは object-fitプロパティ 古いハック: padding-topでアスペクト比を保つ aspect-ratioでアス
モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパーは不要という意味です。 IEのサポート終了（6/15）も近づき、これからはIEを気にすることなく、モダンCSSを使用できます。マイクロソフト社でも6/15を待たずにIEを廃止してください、と通達しています。 参考: Don’t wait for June 15th! Set your own IE retirement date. たとえば、左揃えのリスト要素を中央配置にしたいとします。 HTMLは、下記の通りです。 <ol> <li>Foreword</l
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
はじめに 個人開発の場合はそんなに意識することがないGitですが、チーム開発においては重要な役割を果たします。 はじめのうちは構造が見えず混乱するかと思いますが、流れをイメージ出来ればそんなに難しいものではありません。 これを見れば開発に必要なGitコマンドとリポジトリの構造、Githubでの管理手順を理解し開発の現場で実践できるようになります。 そもそもGitとは？ 変更履歴を記録・追跡するための分散型バージョン管理システムである。 ざっくりいうとファイルのバージョン管理が簡単にできるツールといえます。 目次 Gitを理解するための基本用語 開発の流れ その他開発で覚えておきたい便利コマンドと注意点 vscodeでのGUI操作について 最後に Gitを理解するための基本用語 リポジトリ（repository） ファイルやディレクトリを入れて保存しておく貯蔵庫 リモートリポジトリ...特定
CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg
Web制作において悩みの種の一つが、IE11のサポートです。 main要素に垂直方向のmargin, paddingが効かない、CSS Grid、変数、@supportsなど、IE11が足かせになって使用に躊躇している人も少なくないと思います。 IE11のサポート終了までのカウントダウンが始まりました。 IE11のサポート終了までのカウントダウン IE11は、Windows10にインストールされて出荷されていたため、サポート期間もWindows10のライフサイクルと同じです。 IE11がサポートしていない機能でも、対応策はあります。IE11をサポートするから使用しない、というのはあまり理由にはならないですね。 main要素に垂直方向のmargin, paddingが効かない main要素がinline要素として扱われているため、display: block;を定義する。 CSS Gridの
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです。 今回の記事では、皆さんおなじみの Chrome Devtools にある Performance タブで、フロントエンドのパフォーマンスを計測する方法について書きたいと思います。 はじめに フロントエンドのパフォーマンス・チューニングと言うとバックエンドと比べて後回しになりがちですが、フロントエンドにアプリケーションの複雑性が寄ってきている現在、フロントエンドがボトルネックでレスポンスのレイテンシーが発生することは往々にしてあると思います。 バックエンドではユーザー数の増加や大量の同時接続に耐えられる負荷対策やパフォーマンス・チューニングが中心となりますが、フロントエンドではプロジェクトサイズの増加による JavaScript ファイルのダウンロードやスクリプティング、レンダリング速度の低下等が
Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリをデベロッパーツールで検証およびデバッグする方法を紹介します。 Inspect and debug CSS container queries by Sofia Emelianova, Jecelyn Yeen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 はじめに コンテナとその子孫を見つける コンテナクエリを確認する方 コンテナ要素を検索する方法 コンテナクエリをデバッグする方法 はじめに この記事では、Chromeの
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") by Mohmed Ishak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ファイルを常に新しいタブで開くようにする 2. コメントのカラーを変更する 3. コードを大きく表示する 4. カ
git-replay というコマンドが追加されたみたいなので触ってみた。とは言っても、自分はあんまり凝ったことはやらないので、細かいところまでは踏み込まずに最低限の使い方ができたらいいなってくらいの気持ちで触った。 github.blog この記事には、こんな風に書いてある↓ git replay exists to address these challenges. It offers an alternative to git rebase that, in addition to being far more performant: Can operate in bare repositories. Can rebase branches other than the currently checked-out one (in non-bare repositories). Can
CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便利なautoの使い方、overflowにおけるautoなど、実用的なテクニックが満載です。 Everything About Auto in CSS by Ahmad Shadeed はじめに widthプロパティにおけるauto width:auto; の使いどころ heightプロパティにおけるauto marginプロパティにおけるauto 絶対配置された要素におけるmarginのauto Flexboxにおけるauto Flexboxのプロパテ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
はっきりと分かるようにデザインされたUIは、最高のUI
多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言
「Illustratorの使い方をマスターしたいけど、何から手をつけて良いかわからない。」そんなときは、Illustratorの基本的な使い方を実践的に学ぶことができるチュートリアルを活用してみましょう。 今回は、2020年に入って公開された最新Illustratorチュートリアル、つくり方をまとめてご紹介します。 覚えておくと時短につながる便利な小技テクニックや、Illustratorの基本ツールの詳しい使い方など幅広いツールや機能を学ぶことができるので、初心者のひとにもオススメしたい活用法。 Illustrator初心者も安心！基本の使い方を学ぶ最新チュートリアルまとめ 2019年のIllustrator向けベストチュートリアルは以下の記事よりどうぞ。 総まとめ！2019年のすごいIllustratorチュートリアル、作り方厳選50個 トロピカルなバンガローのイラストを作成する方法 ビ
1-Line Layouts
1-Line Layouts* *10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. [Watch the Video]
この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。 一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない 論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。 コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい（上） パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります（下） 2.Webページのアイテム間の余白スペース幅が不揃い 論理的に分割されたブロックの周りには、同じサイズのパディ
はじめに プログラミング学習を始めて1年経過しました。しかし、今までオブジェクト指向の概念から目を背けてきた結果、現在エンジニアとして苦労しているので、書籍「オブジェクト指向でなぜつくるのか」にて学習中です。 その中で、以下のような章がありました。 「メモリの仕組みの理解はプログラマのたしなみ」 これを見て、自分は今までそんなこと意識していなかったのと強く感じたので、今回はこの書籍で書かれていた、一般的なプログラムの動作環境としての最低限の知識を整理しました。 プログラムが動く仕組みを理解する上で重要な概念 コンパイラ方式とインタプリタ方式 プログラムの基本的な実行方式は大きく分けて2つあります。 コンパイラ方式 コンパイラって何？ コンパイラは、プログラム全体を読み込んで、それをコンピュータが理解できる形（機械語）に一度に変換するプログラムです。 どういう時に使うの？ コンパイラは、プロ
この記事では、覚えておくとフォトショップでの作業効率がアップする便利な時短テクニック25個をまとめて紹介しています。 新しくPhotoshop CCに追加された便利なテクニックから、「あったら便利。」を実現できるショートカット、そしてバナナ隠しコマンドまで、時間短縮につながるものが揃っています。繰り返し作業がラクになるのはもちろん、何度もクリックして表現する面倒な作業にも効果的です。 これらのテクニックを活用して、快適なフォトショップライフを過ごしましょう。 小技テクニックの目次 1. バードアイビュー 2. 選択範囲をペイントできる「クイック選択モード」 3. ツールを一時的に切り替える 4. オーバースクロール機能 5. 調整レイヤー＋描画モードの合わせ技 6. レイヤーやブラシの不透明度をホットキーで変更 7. 選択範囲の移動 8. ラバーバンド・ペンツール 9. ブラシツールの「滑
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
美しい色を選んだのに、グラデーションがくすんでしまうことはありませんか？ 真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。 美しいグラデーションを作成するためにどうすればよいのか、紹介します。 Photoshopなどのデザインツールだけでなく、CSSのグラデーションにも使用できるテクニックです。 The “Gray Dead Zone” of Gradients 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カラーのグラデーションについて、Erik D. Kennedy氏が興味深い現象を指摘しています。2つのカラーを使用したグラデーションで、その2つのカラーを結ぶ線がカラースペース内で彩度ゼロの中央を通ると、グラデーションに「グレーのデッドゾーン」が生じます。
「AWSをこれから始める学生への圧倒的なインプット」というテーマで喋ってきました | DevelopersIO
こんにちは、臼田です。 皆さん、AWSのインプット足りてますか？ 今回はこれからAWSを始めるという学生向けに喋る機会がありましたので、圧倒的なインプットをしたいと思い資料をまとめたので公開します。 資料 思いとか 「AWSの勉強を始めるぞ」となってEC2の立て方とかベーシック話をつらつらしてもつまらないと思ったので、AWSの魅力と無数のサービスを紹介してまずは良さを理解してもらうところに重点を置きました。 そして、勉強方法とどこから手を付けたらいいかのオススメをいくつか盛り込みました。 オンプレミスと変わらない作業をするのではなく、楽しくAWSらしい使い方ができるようになってもらえれば幸いです。 QAとか Q. AWS初めてで何からやったらいいのかわからなかったのですがオススメはありますか？ A. まず大事なのはAWSを使うことを目的としないこと。WebDBのシステム作りたいとかWebア
紙の書類を高精度にテキストデータ化できる無料Webサービス『Free Online OCR』【今日のライフハックツール】 | ライフハッカー・ジャパン
三井住友カード ゴールド(NL)のデメリットは?メリットない・いらないは勘違い【年会費無料になる100万円修行のコツ】
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
■JAFが実証した速攻の車内冷却テクニック 今年の夏も猛暑が続いています。特に、炎天下の野外に駐車した後だと、車内の温度は50℃を超えてしまうことも度々。そんな時、エアコンを使っても「なかなか車内の温度が下がらない！」と困っている人も多いのではないでしょうか。 車内をすぐに快適にする夏の正しいエアコン使用法とは？ 実は、夏場に約5分で車内の温度を快適にできるエアコンの使い方があります。ここでは、ロードサービスを手掛けるJAFの実験をもとに、速攻の車内冷却テクニックを紹介します。 ●「エアコン＋走行」が最も早く冷える JAFでは、2016年に同じミニバン5台を用意し、車内温度が55℃になったタイミングで、それぞれ違う方法で温度低下に挑戦するという実験を行いました。 実験は以下の5パターンです。 1,ドア開閉 エアコンは使わず、助手席の窓だけを開け、運転席のドアを5回開閉して車内の熱気を逃し、
CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに writing-modeによるinlineとblockの違い inlineとはどういう意味ですか？ startとendを正しく理解する 論理として使用できるプロパティは何ですか？ 論理プ
タイトルやラベルの文字数が多くなったり、ボタンの数が増えたり、コンテンツが長い場合と短い場合があったり、想定外のコンテンツが使用された場合に対応できるよう、念のために備えたCSSの実装方法を紹介します。 現状はボタンが2個だけど、1個の場合や3個以上に増える場合も考慮して実装しておくと、メンテナンスが楽になります。 The Just in Case Mindset in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「念のため」の考え方 よくあるデザインで起こる想定外に備える 終わりに はじめに Webサイトを構築する際に、コンポーネントがさまざまな条件下で機能するか確認したい場合がよくあります。「念のため（Just in Case）の考え方」とは、そのコンポーネントに起こり
「保育士一斉退職」の前に 辞めずに保育園を改善させる方法とは（今野晴貴） - エキスパート - Yahoo!ニュース
保育士の一斉退職がここ数年で増加している。毎年のように起きる一斉退職を通じて、保育士の職場環境に問題のあることが、広く世の中に知られるところとなっている。それでも、状況はなかなか変わっていない。介護や保育業界の環境改善に取り組む個人加盟の労働組合の介護・保育ユニオンには、今年も保育士からの「一斉退職しそうだ」といった相談が相次いでいる。 特に、秋から冬にかけての今の時期は、保育園で、保育士らに対して次年度も働き続けるかどうかの意向調査が行われる時期である。退職するのか続けるのか悩んでいる保育士の相談が多いという。 労働環境や保育環境が悪かった時、耐えて続けるのか、辞めるのか。労働者が持つ選択肢はそれだけではない。「職場の改善を追求する」という道がある。 今回の記事では、改善を追求するにはどのような方法があるのかを確認しながら、その中でも特に労働組合でどんなことができるのかを実例を交えつつ紹
[レベル: 上級] Chrome 81 の安定版を Google はリリースしました。 Chrome 81 に追加された新機能の 1 つに、リンク先の特定の場所に直接スクロールし指定したテキストをハイライト表示する機能があります。 #:~:text= で移動&ハイライト Chrome 80 で実装したと Google はアナウンスしていましたが、実際に利用できるようになったのは Chrome 81 です。 ページの URL に #:~:text=○○○ を追加します。 ○○○ は、リンクをクリックしたユーザーをダイレクトに連れていきたい場所のテキストです。 たとえば、次のような URL としてリンクします。 https://webmaster-ja.googleblog.com/2020/04/how-to-pause-your-business-online-in.html#:~:tex
30代は、20代と比べて収入も上がり、結婚する人も多い年齢のため貯蓄がしやすい年齢と言えます。現在は共働き世帯が多いため、結婚をすると独身時代よりも生活費が下がり、貯蓄しやすい人も多いでしょう。30代から資産形成を始めていけば、65歳の基礎年金の開始まで、概ね30年程時間があるので、長期的に資産形成が可能になります。給料が入ったら、一定の金額を先取り貯金をして、そのお金を預金に置くのではなく、保険や投資にお金を移動させることで、少しでもお金を増やすことが出来ます。銀行預金の利息では、ほとんどお金は増えませんので、それ以外の選択肢を積極的に活用していきましょう。 30代から資産形成が勧められる理由 一般的に、30代は資産形成を始めるのに適した年代といわれています。 その理由は、20代の頃よりも収入が増えており、業務内容に対しても慣れてきて、時間を「自分自身」や「家族」のために自由に使えるケー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 | 東京のホームページ制作 / WEB制作会社 BRISK
CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説
CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方
サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
初学者が覚えたいチーム開発でのGit操作 - Qiita
1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA
いよいよ？まだまだ？IE11のサポート終了までのカウントダウンが始まる
Chrome Devtools による フロントエンドパフォーマンスの計測
CSSの実装はコンテナクエリで大きく変わる！ コンテナクエリをデベロッパーツールで検証およびデバッグする方法
コーディングに役立つ！Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック
git-replay を最低限の使い方で触ってみた - Mitsuyuki.Shiiba
CSSのプロパティの値に「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
Illustrator初心者も安心！基本の使い方を学ぶ最新チュートリアル25個まとめ
ウェブサイト作成のよくある間違いと解決テクニックまとめ【保存版】
メモリの使い方の理解はプログラマのたしなみ…？？😰 - Qiita
フォトショップ作業が爆速に！覚えておきたい時短テクニック25個まとめ【2020年版】
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
【Excel】XLOOKUP関数はもう常識！ VLOOKUP関数から切り替えるべき理由【いまさら聞けないExcelの使い方講座】
グラデーションのグレーデッドゾーン、真ん中辺りがグレーにくすむのを避ける方法、美しいグラデーションを作成する方法
Excelでのファイルリスト作成で［F2］キーを使うのは不毛！ 一気にファイル名を取得する方法【残業を減らす！Officeテクニック】
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
約5分で快適！ 炎天下に駐車後、すぐに車内を冷やす「エアコン」の正しい使い方 | clicccar.com
「DeepL」の驚くほど自然な翻訳に迫る。失敗しない使い方
CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど
よくあるデザインで起こる想定外のコンテンツに備える、CSSの実装方法のまとめ
Chrome 81に追加された便利な機能――リンク先ページの特定の場所に移動しハイライト表示
30代・40代でも遅くない！ 資産形成のポイントとおすすめの6つの方法を解説します | ナビナビ保険