これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか
ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。 下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインのディテールは脇に置いておく 配下ページのレイアウトを実装する時に考えること ディテールを掘り
「可愛くしてください！」「おしゃれにしてください！」それは具体的にどうすれば？クライアントからのふわっとした要望に応えるデザイン書
クライアントから「可愛くしてください！」「おしゃれにしてください！」「かっこよくしてください！」「企業イメージ出してください！」 デザイナーなら誰もがそんな要望を受けたことがあると思います。 そんなふわっとしたリクエストや要望、赤字に応えるためのデザインの修正方法・テクニックを解説したデザイン書を紹介します。 本書は、今年も快進撃が止まらないソシム社の新刊。 またもや興味深い、面白い書籍の登場です！ 今回はデザインの何かに特化して学ぶ的なものではなく、デザインの方向性、修正・手直しの方法を解説した一冊です。リクエストや赤字の具体例が数多く掲載されており、「あるある！」と心の声で叫びながら、デザインを楽しく学べます。
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。
JavaScriptの非同期処理を理解する その2 〜Promise編〜 | さくらのナレッジ
こんにちは！小田島です。前回の「コールバック編」を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に「シリーズで理解が深まる」というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。 非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。 今回の目的 今回説明するのはPromiseです。これはFutureパターン（Promiseパターン）というデザインパターンの一種で、ECMAScript
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
【Power Automateの新しいRPA機能】Power Automate Desktopの操作方法(ExcelとWebブラウザ操作の自動化) - Qiita
【Power Automateの新しいRPA機能】Power Automate Desktopの操作方法(ExcelとWebブラウザ操作の自動化)RPAPowerAutomateDesktop サンプルファイルについて 2021/7/24 追記 Github に、本ページで扱う Excel ファイルやサンプルのフローをアップロードしました。 よろしければご使用ください。 以下のイベント用にで作成したファイルになります。 はじめに Microsoft Igniteの発表でPower Automateの「per user with attended RPA plan」で「Power Automate Desktop」が使用できるようになりました。2020年9月24日でPreview版です。 この記事でPower Automate DesktopのWebレコーダーによる自動化やExcel操作を通
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
リコー経済社会研究所 | リコーグループ 企業・IR | リコー
「あれっ！こんなところを間違えてるよ」―。パソコン画面上で何回も確認して間違いがなかったのに、紙に印刷すると原稿のミスが...。こんな経験をした人も多いはず。だが、その理由がよく分からない。もちろん、できる限り間違いを減らし、仕事はスムーズに進めたい。紙と画面の違い、その使い分けを考察してみた。 「反射光」と「透過光」 画面よりも紙のほうが、間違いに気がつきやすい。これは私が今まで何度となく経験してきた。新型コロナウイルスの感染拡大に伴い、リモートワークを始めてからは、自宅などにプリンターが無かったり、あってもその能力不足で印刷に手間取ったり。だから、紙でのチェックを怠りがちになり、ミスが生じて後で大きなしっぺ返しを食らう。 情報処理学会の研究報告（注）が、紙と液晶ディスプレーにおける「反射光」と「透過光」の性質の違いなどに着目し、実験を行った。反射光はいったん紙に反射してから目に入る光、
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Western Digital製の一部HDDの回転数が公称スペックと異なることが判明
ハードディスクドライブ(HDD)の回転数は主に5400rpm(毎分回転数)と7200rpmの2種類が存在します。回転数の違いによってデータ転送速度や消費電力が変わるため、回転数はHDDの性能をはかる上で重要な要素となります。アメリカのストレージメーカー・Western DigitalのHDDで、「5400rpmクラス」を名乗るHDDが実際は7200rpmだったことが、有志による検証で判明しました。 WD Elements and My Book 8TB appear to be 7200rpm, despite reporting as 5400rpm : DataHoarder https://www.reddit.com/r/DataHoarder/comments/gy3lvw/wd_elements_and_my_book_8tb_appear_to_be_7200rpm/ Wes
リスニング能力をひたすら鍛え上げられるサイト「ELLLO 」
PCやスマホを使って、英語学習を時短にする便利なサービスやツールなどを紹介する連載。今回は、初心者から上級者まで、幅広くリスニング能力を向上できる「ELLLO」をご紹介します。 ELLLOは、「English Listening Lesson Library Online」の略で、読んで字のごとく、英語のリスニング学習に特化したオンライン学習サイト。3000以上という多くの無料のレッスンが用意されており、幅広いレベルの学習者が利用できる。もともと、日本で英語教師だったTodd Beuckens氏が創設したサイトで、2004年にスタートしたサイトだ。 メインの学習コンテンツは、ひたすら英語の音声を聞くというもの。スクリプトも用意されているため、聞き取れなかった場合も内容は把握できる。理想的なのは、スクリプトを見なくても聞き取れるようになることだ。 メインコンテンツとなるリスニングレッスンは、
コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック
ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Border Generator by Amit Sheen (@amitsheen) on CodePen. このテクニックのポイントは4つの背景（background）を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景（上下左右に沿って1つずつ）を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。 ジェネーターで自分好みのボーダーを簡単に作成で
商用利用無料、UIデザイン用のSVGアイコンが220種類！改変・再配布も可の太っ腹ライセンス -System UIcons
システムとプロダクトのUI用にデザインされた、オープンソースのSVGアイコンを紹介します。Webサイトやスマホアプリに最適です！ アウトラインのシンプルなデザインで、220種類のアイコンが揃っています。SVGなので、サイズやカラーなども簡単に変更して利用できます。 System UIcons System UIcons -GitHub System UIconsの特徴 System UIconsのダウンロード System UIconsの使い方 System UIconsの特徴 System UIconsは、システムとプロダクトのUIによく使用されるアウトラインのアイコンです。フォーマットはSVGなので、使いやすいと思います。 ライセンスはThe Unlicenseで、商用プロジェクトでも無料で利用できます。改変・再配布もOKです。
書籍「作ろう！CPU」
各ボードの詳細はこちらをご参照下さい。 この他にも、スイッチとLEDがそれぞれ4個以上搭載されているFPGAボードなら、ほぼ確実に動くと思われます。 いろいろな方への紹介文 本書の主な想定読者は、電気や回路や CPU について何も知らない方です。 しかし回路に詳しい方々からも、「こんな考え方があるのか！」という驚きの声を多数いただいております。 筆者として、本当に嬉しい限りです。 様々なバックグラウンドの方に楽しんでいただくために、以下に10通りの紹介文をひねり出したので、興味のある項目に目を通してもらえると幸いです。 電気や回路を全然知らない方へ プログラマーの方へ 情報学科の学生さんへ 論理回路を教えておられる先生方へ FPGAに挫折した経験のある方へ ハードウェア記述言語に詳しい方へ アナログ回路に詳しい方へ 物理に詳しい方へ 数学に詳しい方へ 人間の欲望を重視する方へ 電気や回路を
科学的根拠が明示されない日本の感染症対策の咎 【対談】西浦博・京都大学大学院教授×森田朗・NFI代表理事（前編） | JBpress (ジェイビープレス)
政策決定者は完成症対策と経済活動の「両立」を唱えるが、その政策決定の裏に根拠があるかといえば明示的なものは何もない（写真：ZUMA Press/アフロ） 少子高齢化と人口減少が進むわが国の社会の質を維持し、さらに発展させるためには、データの活用による効率的な社会運営が不可欠だ。一方で、データ活用のリスクにも対応した制度基盤の構築も早急に求められている。新型コロナウイルスの世界的な感染拡大によって、これまでの経済、社会のあり方は大きく変わろうとしている。 その中で、日本が抱える課題をどのように解決していくべきか。データを活用した政策形成の手法を研究するNFI（Next Generation Fundamental Policy Research Institute、次世代基盤政策研究所）の専門家がこの国のあるべき未来図を論じる。 今回は、新型コロナウイルス感染症対策専門家会議のメンバーを務め
Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめ コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV
│コロナ制圧タスクフォース
新型コロナウイルスから社会を守る時限的な緊急プロジェクト『コロナ制圧タスクフォース』は、様々な研究分野から日本を代表する科学者が横断的に結集したものであり、科学による客観的真理を解き明かすことにより医療崩壊を防ぐことを喫緊の目標と捉え、その達成の先に、新型コロナワクチン開発を目指します。 研究統括責任者 初代 ［氏名］金井隆典（かないたかのり） ［所属］慶應義塾大学医学部内科学（消化器）教授 第二代 ［氏名］福永興壱（ふくながこういち） ［所属］慶應義塾大学医学部呼吸器学教授 タスク発起メンバーが所属する大学／医療・研究機関は以下の通りです。 •慶應義塾大学医学部 •東京医科歯科大学M&Dデータ科学センター •東京医科歯科大学統合研究機構 •東京医科歯科大学医学部附属病院 •大阪大学大学院医学系研究科 •大阪刀根山医療センター •東京大学医科学研究所 •北里大学大村智記念研究所 •北里大学
【PHP8.0】非厳密な比較演算子`==`の挙動が今さら変更になる - Qiita
結果は順にtrue、true、falseです。 これがPHP7までの非厳密な比較(等価)演算子だったわけですが、まあおかしいよねってことで、この挙動がPHP8.0で変更になることになりました。 よもや今さら基本中の基本である比較演算子の動作を弄ってくるとは思わなかったぞ。 以下はSaner string to number comparisonsの日本語訳です。 PHP RFC: Saner string to number comparisons Introduction ==やその他の非厳密な比較演算子を用いた文字列と数値の比較は、現在は、文字列を数値にキャストし、その後整数か浮動小数の比較を行っています。 この結果、多数の不可解な結果が得られますが、中でも注目すべきは0 == "foobar"がtrueになることです。 このRFCでは、文字列が実際に数値型文字列である場合にのみ数値型
CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App
レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！ Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！ Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。 ユーザーインタラクションは、すべてのデバイス間でミ
CSSとコンポーネント設計に対する考察 - uhyo/blog
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
PDFのコピペが文字化けするのはなぜか？～CID/GIDと原ノ味フォント～
1. PDFのコピペが 文字化けするのはなぜか？ — CID/GIDと原ノ味フォント— 細田 真道 http://www.trueroad.jp 2021 年 2 月 26 日 細田 真道 PDF コピペ文字化け 2021-02-26 1 / 49 NTT Tech Conference #5 Presentation Copyright (C) 2021 Masamichi Hosoda 2. 自己紹介 自己紹介 楽譜作成プログラム LilyPond コミッタ ビルドシステム、フォント、PDF 出力等 GNU 公式文書フォーマット Texinfo コミッタ 国際化、XƎTEX/LuaTEX、Unicode、日本語対応等 は ら の あ じ 原ノ味フォント主催 日本語 TEX デフォルト和文フォント（2020∼） 第 10 回日本 OSS 奨励賞受賞 LilyPond FIT2018 FI
公開鍵暗号関連のテキストの間違いの典型例 - Qiita
はじめに 背景 世間一般の公開鍵暗号関連の解説書・サイトは99%あてになりませんが、一例として、とある情処対策の解説動画の添削を行います。 ※twitterで問題点を説明する機会があったので、折角なら記事として共有できる形にしようという動機からです。 対象 対象の動画は https://www.youtube.com/watch?v=rgK4FGENzMo で、2021/3/1時点の内容を元にしています。 ※後日修正される可能性もあるため。 なお、先に断っておくと、この動画が特別酷いわけではなくて、大体どれもどんぐりの背比べです。如何にみんな真面目に情報を検証していないか、ということが実感できます。 動画のスライドの添削 スライド1: ディジタル署名(～0:48) 第1段落「公開鍵暗号方式を使って」 ディジタル署名とは、公開鍵暗号方式を使ってデジタル文書の正当性を保証する技術です この表現
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初代ガンプラ王のプラモ教室、エアブラシの塗膜を綺麗に塗る理論を聞く。『これもう大学とかで教えてもいいんじゃないかなぁ』
Tabler Icons
商用利用無料、UIデザイン用のSVGアイコンが558種類！デザインに合わせたカスタマイズも簡単な優れもの
電子工作のための電気回路基礎講座
石綿（アスベスト）含有品の流通について
Icons - Material Design
same-site/cross-site, same-origin/cross-originをちゃんと理解する