CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
ゲーム開発者のための C++11～C++20, 将来の C++ の展望 - CEDEC2020 - Speaker Deck
ゲーム開発者のための C++11～C++20, 将来の C++ の展望 【CEDEC ページ】https://cedec.cesa.or.jp/2020/session/detail/s5e8327a52702c 【解説付きの書籍版 📚】https://zenn.dev/tetsurom/books/cpp11-cpp20-for-game-developers
iOS16には、iPhoneのホーム画面の操作に関連した多くの新機能が搭載されています。iPhoneのホーム画面をうまく設定するテクニックを、米メディア9to5Macがまとめているのでご紹介します。 ホーム画面の便利テクニックを知り、iPhoneを快適に使いこなす iPhoneを使う時に必ず操作するホーム画面には、最新のiOS16で導入された新機能のほかに、使い慣れているからこそ見落としがちな基本的な操作方法があったり、地味だけど覚えておくと操作が快適になったりする小技があります。 これらのテクニックを知り、ホーム画面を使いこなせると、iPhoneの使いこなしレベルが1段も2段もアップします。 ちなみに、9to5Macが紹介した85の便利技のうち、筆者の個人的なオススメを3つに絞ると、28番、35番、49番です。 押さえておきたい基本技 アプリを開く/閉じる ディスプレイズームを使う 壁紙
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
え？まだgit checkoutしてるの？
公式ドキュメントには以下のように書かれています。 THIS COMMAND IS EXPERIMENTAL. THE BEHAVIOR MAY CHANGE. 和訳：このコマンドは実験的です。動作が変更される可能性があります。 この記事の内容と違う場合があるので、ご注意ください。 この記事は2024年2月28日時点の情報です。 え？まだgit checkoutしてるの？ git checkoutといえば、ブランチを切り替えたり、git addしたファイルを元に戻したりするコマンドですが、それはもう古いです。 実は2019年8月リリースのgit 2.23からgit switchとgit restoreが追加されました。 知らなかった人も多いのではないでしょうか？(恥ずかしながら私は知らなかった...) 「先輩、checkoutってなんすか？」と後輩に聞かれる前に、この記事を読んでgit sw
9時間足すんだっけ引くんだっけ問題～あるいは、諸プログラミング言語はいかにタイムゾーンと向き合っているか - エムスリーテックブログ
私は日付時刻の処理が大好きです。 タイムゾーンの問題でデータ抽出が9時間分漏れていたとか、朝9時の始業前のログが昨日付けになってしまっていたなんていう問題が起こると喜んじゃうタイプ。 そんな私にとって、各プログラミング言語が標準で持っている日付時刻型クラスにはそれぞれ思うところがあり、今日はちょっとその品評会をしてみたいと思います。 エムスリーエンジニアリンググループ、Unit1（製薬企業向けプラットフォームチーム）三浦(@yuba@reax.work) [記事一覧 ]がお送りいたします、エムスリー Advent Calendar 2023の2日目です。 至高の日付時刻型を持つ言語、BigQuery SQL 不足はないが蛇足、Java 8 日付時刻で画竜点睛を欠いたC# C#よりややまし、Python 型は良い構成、なのに命名と処理関数で損しているPostgreSQL まとめ We ar
2022/06/22追記 最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。 本記事では、ES2021すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け
初めて知ったときは感動したけど 自分の中で知ってて当然になってしまった小技をまとめました まだこの小技を知らない人に届いてくれるとうれしい Dockerfile RUNを1つにまとめる
ミラティブのサーバサイドをGo + Clean Architectureに再設計した話 - Mirrativ Tech Blog
こんにちは、テックリードの夏です。 今年4月にCTOからテックリードに肩書が変わり、ガリガリコードを書くようになりました。 背景については、こちらをご覧ください。 www.wantedly.com 普段はプロダクト側の機能開発と、サーバ側の基盤開発を半々ぐらいの割合で仕事しています。 一口にサーバ側の基盤開発といっても定義が曖昧なのですが、基本的にはこんな感じのタスクをやっています。 インフラコストの最適化 不正なアクセスからの防御 障害の再発防止 新技術の導入やアーキテクチャの整備 今回はこのうち「新技術の導入やアーキテクチャの整備」の中で、サーバサイドをGo + Clean Architectureで再設計したことについてお話したいと思います。 背景 ミラティブは2015年春頃に開発が始まり、同年8月にサービスがリリースされ、2020年8月で5周年を迎えました。 その過程で組織やプロダ
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
しばらくすると、その文字盤が「リフトアップ」され、ライン上の任意の位置にドラッグできるようになります（Redderユーザーのwccn616さんがこの機能を実演している様子をこちらの記事で見ることができます）。 5．Apple Watchの調子が悪いときは強制的に再起動させるPhoto: Twin Design (Shutterstock)通常、Apple Watchの電源を切るには、サイドボタンを長押しして、「電源オフ」スライダーをスワイプします。 しかし、時計の調子が悪いときは、このオプションにアクセスできないことがあります。その場合は、強制再起動を行うことで、通常の入力ができなくても、時計の電源を再び入れることが可能です。 Digital Crownとサイドボタンを同時に押し続けると、Apple Watchが真っ暗になるのがわかります。Appleのロゴが表示されるまでボタンを押し続け、
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
この記事のねらい Obsidian はすごくよいノートアプリです。さまざまな思考スタイルに寄り添ってくれます。その代わり、どう始めればいいか迷いやすいところがあります。 この記事では、ノートの枚数でユーザレベルを分けることにし、「ゼロイチ期→育成期→発展期→達人期」と名付けました。くわしくは本記事後半の Obsidianユーザレベルのめやす をご覧ください。 そのなかでも、ゼロイチ期、つまりObsidianをまだ使っていないころから、ノート数が10枚ていどのころに役立つ情報を集めました。 ヒトが考えるためには書くツールが必要です。Evernoteがグダグダのいま、（ほかにもたくさん選択肢はありますが）Obsidianはオススメできる鉄板ツールのひとつです。ぜひ10枚の壁を越えて、見える風景を味わってみてください。 ゼロイチ期（ノート 0-10枚）に役立つ情報 まずは、Obsidianが何な
一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの制御構造 CSSの実装テクニック 終わりに はじめに CSSは、スタイルのシステムに特化
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
macOS Sonomaをベースに、Macの知られざる小技・裏技を一気に40個紹介してます。知らないテクニックも必ずあるはず！ ◆おすすめの初期設定動画 https://youtu.be/yOCJaY-IeIc Apple製品や周辺機器 / Macのあるデスクづくりを中心にガジェットの情報お届けしております。 チャンネル登録はこちら！→https://www.youtube.com/channel/UCRlsT-5KoV_J-JoG9WQFzGw?sub_confirmation=1 ------------------------------------------------------- ▼今回のチャプター（目次） 00:00 - Macを使いこなすために知っていたい小技・裏技40TIPS ＜Finder系 (8項目)＞ 00:55 - クイックルック ファイルを選択して
ChatGPTを使うときに「これ知っておくと便利じゃね？」という知識をまとめてみました。 特にITが苦手という初心者の方にも「ChatGPTってこういう使い方もできるんだ！！」と知っていただけると幸いです。 創造力が必要な質問も答えてくれる 最近、とある内容で話をしようと思い、そのタイトルづけで悩んでいた私。 「内容は決まっているのだが、タイトルは決まっていない。何かキャッチーな内容で考えてほしいな。」と思い、ChatGPTに聞くと以下の返事が返ってきました。 このようにクリエイティブ性が求められる答えも瞬時に答えてくれるのがChatGPTです。 「自分の代わりに考えてくれる機能である」というのを前提知識として持っておくと、使い方の幅も広がりやすいのかなと感じてます。 出してくれた答えにアレンジを加えることが可能 一度提示された回答に追加で指示をすることで"より精度の高い回答を出させる"と
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
リンカ
ついに、リンカの説明をするときが来た。 ここに至るまでに、何度「リンカのところで説明する」と書いただろうか？ ここまで読んできた人ならば、 リンカというものが、なにやら色々やっているんだな、というのはわかってきたのではないかと思う。 筆者が常々思っていることのひとつに、「C言語に関する書籍は、リンカの説明をおざなりにしすぎだ」というのがある。 多くのC言語の書籍は、 コンパイラがソースコードをアセンブリコードに変換します アセンブラがアセンブリコードを機械語に変換します リンカが機械語をリンクして実行ファイルが作られます と、いう解説がなされがちである。この説明を見たら、多くの人が、「え、リンクってなんですか？」と、思うに違いない。 アセンブラには、「人間が読めるニーモニックを、機械が読める機械語に変換する」みたいな、最低限の説明が付くものの、 リンカの説明は「リンクをします」のひとことだ
h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。 下記のようにボーダーや背景をボックスからはみ出して配置できます。
人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは？ ✨ 唱える呪文（プロンプト）って何？ ✨ 画像を
日本語の文字入力に使用されるキーボードには、大きく分けて日本語配列の「JISキーボード」と英語配列の「USキーボード」があります。 漢字変換をはじめとした日本語入力のしやすさから、日本ではJISキーボードのニーズが高いですが、USキーボードと比べてどのような違いがあるのでしょうか。 本記事では、日本語配列と英語配列の違いやJISキーボードならではの独自キーとその役割、入力効率アップに役立つ小技もあわせてご紹介します。 JISキーボード（日本語配列キーボード）とは JISキーボードとは日本語配列キーボードともよばれ、JIS規格に準拠して作られた日本語配列のキーボードです。 「JIS」とは日本産業規格を指します。規格がないと多様化・複雑化・無秩序化してしまうモノやコトについて、この「規格」を設けることで、互換性の確保や生産効率化などを実現しています。 JISキーボードはQWERTY配列（英字最
プログラミングを行う上でバージョン管理システムとしてよく利用される「Git」において、ほとんどの操作をやり直せるコマンド「git undo」をTwitterで働くエンジニアのarxanasさんが開発・公開しています。 git undo: We can do better https://blog.waleedkhan.name/git-undo/ Gitはユーザーのさまざまなうっかりミスに対してデータが失われにくい構造に設計されているものの、実際に操作ミスをしてしまった際にもとの状態に戻すにはそれぞれの状況に応じて別のコマンドを使わなくてはならず、「初心者がさらに間違いを重ねて複雑怪奇な状態にしてしまう」というケースがありがち。 こうした状況を解決するためにarxanasさんが開発したのが「git undo」です。git undoはその名の通り、間違って行ってしまった操作をやり直せるコマン
Reactを使うならReact Developer Toolsの再レンダリング時ハイライトくらい設定してくれ
モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記事を読むと React Developer Tools の簡単な使い方を知り、useState の再レンダリングについて動きがイメージできるようになると思います React Developer Tools これのこと。React を使った開発をするのであれば、必ず導入しないといけないレベルのもの。 再レンダリング時ハイライトの設定 React Developer Tools をインストールした後、F12 を押下して Component を選択この歯車を押下す
VS Codeは毎月のようにアップデートされ、便利な機能がどんどん追加されています。最近追加された機能をはじめ、Web制作で役立つ便利な機能を紹介します。 特に人気が高い機能拡張と同じレベルの仕事が、VS Codeの基本機能・設定だけで利用できるので、便利です。 VS Code: You don't need that extension by Rob O'Leary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タグの自動名前変更と終了タグ補完 2. 設定の同期 3. モジュールの自動インポート 4. HTMLとCSSのスニペット管理 5. ダミーテキスト 6. 末尾のスペースを自動的に削除 終わりに はじめに 私は最近、VS Codeを深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
新年度、新学期に向けて洋服を新調することの多い春。「パンツを買って裾上げしたけど思ったより長かった！」や、「子どもに大きめのズボンを買ったら裾が長すぎて引きずってしまう」ということはありませんか？ 面倒で難しいズボンの裾上げ。プロのような技術はなくても、布を切らずに簡単にキレイに裾上げできる方法があったらいいですよね！ そこで今回は、知って得する簡単な裾上げ方法をご紹介します。 ズボンの裾上げって面倒！ ズボンの裾上げはちょっとかがり縫いをするだけとはいえ、測って、アイロンをかけて、場合によっては切ったり仮縫いをしたりと、工程がたくさんあって面倒ですよね。 筆者も、子どもが履いているデニムパンツの裾が少し長いことが気になっていましたが、裾上げが面倒で折って履かせていました。しかしこのまま履かせていると裾が擦り切れてしまいそうで、簡単に裾上げできる方法がないか調べてみることに。 すると、裾を
CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方
Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F
<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの
![[CSS] button要素のスタイルシート、最新テクニックを徹底解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9ba8b37585d86205a71d0de6b3c024cd8265254/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202001%2F2020031410.png)
ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Border Generator by Amit Sheen (@amitsheen) on CodePen. このテクニックのポイントは4つの背景（background）を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景（上下左右に沿って1つずつ）を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。 ジェネーターで自分好みのボーダーを簡単に作成で
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
モダンCSSによる絶対配置（position: absolute;）の削減
CSSで見出し固定＋レスポンシブ対応の表を作成
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
iOS16のホーム画面を知り、iPhoneを使いこなす！85の便利技 - iPhone Mania
明日からできる、爆速Figma活用術 - エムスリーテックブログ
JavaScriptのES2021で追加された新機能まとめ
【個人的に】Dockerがはかどる小技 - Qiita
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
Apple Watchの隠れた便利機能14選 | ライフハッカー・ジャパン
ゼロイチObsidian｜ゼロからはじめるObsidian案内 - Qiita
CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
Macを使いこなす！知ってるだけで差がつく小技・裏技40選
【初心者必見】ChatGPTで知っておくと役立つ便利な使い方5選を紹介 | DevelopersIO
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
アイコンデザイン 7つの原則、優れたアイコンをデザインするために
【第4弾】少しのコードで実装可能な10のCSS小技集
CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
画像生成AIでウェブサイトやUIデザインを生成するコツ
JISキーボード（日本語配列キーボード）の基礎知識と入力効率アップの小技を解説 | PFU
Gitの操作を間違ってしまった時に簡単に元に戻せる「git undo」を使う方法
コードを書くのが楽になる！知っておくと便利なVS Codeの機能・設定のまとめ
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック
Chrome の console.log でハマらないために
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
裾を切ってミシンで縫う必要なかった…！目からウロコの「最もカンタンなズボンの裾上げ方法」とは
[CSS] button要素のスタイルシート、最新テクニックを徹底解説
こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック