プログラミング1年くらいやってつまづいたこと
プログラミングを本格的に始めてから1年くらい経ったので、今まで印象に残ったつまづきポイントを書いておく。 C言語 去年の今頃は 42 Tokyo の Piscine に参加していた（そのときの記事）。 このときはC言語でひたすら libc の再実装をしていた。それまでは Python や JavaScript でちょっとしたスクリプトを書いただけでC言語を書いたことが無かったのでとても辛かった（毎日100回の Segmentation fault を見る生活を4週間続けた）が、コンピュータの基礎に近づけた気がした。メモリをいちいち人間が確保したり解放したりしなきゃいけないというのがとても面倒だった覚えがある。 ところで、人間がコンピュータを使って何かしらの課題を解決しようとしたときに突き当たる壁として、ハードウェアやソフトウェアにそれぞれ多数の階層が積み重なっていて、どこで何が行われている
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 デザインディレクション・ブック 橋本 陽夫 現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂3版 GA4対応】 小川 卓 解釈可能なAI Ajay Thampi(著), 松田晃一(翻訳) PowerPoint 目指せ達人 基本&活用術 Office 2021 & Microsoft 365対応 PowerPoint基本＆活用術編集部 ランサムウェア対策 実践ガイド 田中啓介, 山重徹 TODによるサステナ
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
ContentsWeb Inspector ExtensionsContainer QueriesWeb Push for macOSSubgridFlexbox InspectorAccessibility ImprovementsAnimation ImprovementsOverscroll BehaviorShared WorkerAnd moreFeedback WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, la
はじめに 今回は新卒1年目の時に自分が先輩エンジニアに質問する際に使っていた質問テンプレートを紹介します。 自分は相手に質問する時は「いかに相手の時間を取らずに解決まで至れるか」を重視して質問を考えています。 いきなり「OOがわからない」「OOのエラーが解決できない」「〇〇が動かない」といった答えを全て相手に丸投げするような質問をしていては成長はおろか、相手から「この子は自分で考えない子なんだな」と思われてしまいます。 そこで今回は初心者が先輩に質問する際にどのような手順で質問を作成すればよいかをテンプレートとして紹介します。 エンジニアとは書いているものの他の職種にも応用できるようなテンプレートだと思うので、ぜひ参考にしていただければなと思います。 この記事の主な対象者 新人エンジニア 質問の仕方が分からない人 エラー解決に時間を大幅に使ってしまう人 Google人工知能開発チームの15
Stay organized with collections Save and categorize content based on your preferences. Layout patterns built using modern CSS APIs to help you build common interfaces such as cards, dynamic grid areas, and full-page layouts. `�[U `��[U We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to
2021年から開発の現場で使える3つの便利CSS - aspect-ratio, gap, is()
ブラウザは日々進化しています。2021年もブラウザには多くの新機能が追加されました。 私はCSSの新機能を1年かけてチェックしてきましたが、その中でもとりわけ便利だと思った3つの機能を紹介します。いずれも、2021年に全モダンブラウザ（Chrome、Firefox、Microsoft Edge、Safari）で使えるようになったもので、日々の開発をラクにしてくれることでしょう。 動画や画像のアスペクト比を指定できるaspect-ratioプロパティ aspect-ratioプロパティとは、ボックスのアスペクト比（幅と高さの比率）を指定するプロパティです。 構文
CSS Layout Generator
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
flex-growとflex-shrinkのお話です。 ある日の我が家 娘（6歳）「ねぇ、パパ？」 ワイ「なんや、娘ちゃん？」 娘「パパはいつも、お仕事でどれくらいコードを書いてるの？」 ワイ「どれくらいって、沢山やで」 ワイ「それはもう山のように書いてるで」 娘「へー、山のようにかぁ」 娘「動かざること山の如しって感じ？」 ワイ「そうそう、ワイのコードはたいがい動かへん・・・コラッ！」 ワイ「誰がバグ製造機やねん」 娘「ところで、そんなパパに聞きたいことがあるの」 ワイ「なんや？」 お買い物サイト製作中 娘「実は今ね」 娘「お友だちから受注したショッピングサイトを制作してるの」 ワイ「受注て」 ワイ「最近の6歳児は受発注すんのかい」 ワイ「まあええわ、そんでどうしたんや」 娘「えっとね」 娘「今、デザインデータを見ながらコーディングをしてるんだけど」 娘「↑このデザインが、CSSで上手く
Flexboxのチートシートの一部 displayプロパティ Flexboxを使用するには親要素にdisplay: flex;（または、display: inline-flex;）を適用すると、その子要素がFlexアイテムになります。 flex-directionプロパティ FlexアイテムがFlexコンテナでどのように配置されるか明示します。方向は2種類で、横列（row）の水平、縦列（column）の垂直に配置できます。 flex-wrapプロパティ Flexコンテナが複数のFlexアイテムを一行（no-wrap）、または複数行（wrap）に配置することをコントロールします。 Flexboxの各プロパティの詳しい説明は、下記の記事をご覧ください。 CSS Flexboxの基礎知識と使い方をやさしく解説
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
Flexboxでレイアウトする時、その背後にある思考プロセス
Flexboxはフレキシブルで、レイアウトをする時に非常に便利です。しかし、便利な機能と混乱を招く可能性がある機能があり、その背後にある思考プロセスについての一例を紹介します。 The Thought Process Behind a Flexbox Layout 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxについて学びたい方は、以下の記事をご覧ください。 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル CSS Flexboxの各プロパティの使い方を詳しく解説 Flexboxレイアウトの背後にある思考プロセス 2つのボックスを並べて配置、Flexboxはそういったものが得意だと聞いています。 親要素に「display: flex;」を加えるだけで、子は並べて配置される クールですね
この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。 コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。 ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう。 前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。 よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 コンテンツ目次 1. background-imageによる実用アニメーションサンプル集 2. 無限
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Flexboxで左と右の両端揃えにしたい 解決方法1: マークアップを追加する 解決方法2: flex-growを使用する 解決方法3: margin: auto;を使用する はじめに これは一見すると些細なことですが、ようやく最終的な解決策にたどりついたので、記事に書こうと思います
はじめに 業務でCSSを書くようになってから、いくつかの月日が流れました。 CSSを学び始めた当初は、要素をキレイに横並びにすることすら手こずっていましたが、最近は随分スムーズにデザイン通りのスタイルを書くことができるようになりました。 今日に至るまで、過去の自分が書いたCSSへの後悔の念で眠れない日々や、原因のよくわからない表示崩れの悪夢にうなされる夜もありました。1 これからCSSを学ぶ人、CSSにはあまり詳しくないけどたまに書くよという人にそんな思いをして欲しくない。できたらCSSのことを好きになって欲しい。 そんな思いで自分がスタイルを書く時・レビューをする時に気をつけていることを（自戒も込めて）まとめまてみました。 🤔 良いスタイルってなんだろう？ スタイルを書く時に大切だと考えていることは3点あります。 開発効率 デザイン再現性 パフォーマンス 開発効率 色々な記事や本でも引
ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた（microCMS + Amazon S3） | DevelopersIO
はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。 今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました！ ※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。 ヘッドレスCMSとは？ CMS（Content Management System）とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。 最も
我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜｜seya
やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集
Reactで余白をどうスタイリングするか
最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない まず前提として「子コンポーネントは親コンポーネントの"レイアウトのスタイル"を知ってはならない」です。 (太古に書いた記事から具体例を引用) 例えば、こんな感じのアイコンが複数並べたコンポーネントが存在するとします。 アイコンの間にはmarginが等間隔でありますね。 このmarginをアイコンコンポーネント内で定義していたとしましょう。 さて、他のページでこ
ダークモード時の画像の扱い方
2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ ↑私が10年以上利用している会計ソフト！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @
デザインの変更に合わせてHTMLを変えるのではなく、HTML（文章構造）を変更せずに、CSSでさまざまなデザインを適用する時に役立つ実装テクニックを紹介します。 CSS GridとFlexboxそれぞれの効果的な使い方、コードの並び順と見た目の並び順を変える方法など、トライアンドエラーの過程も解説されているので、勉強になると思います。 HTMLを変更せずに、CSSでさまざまなデザインを適用 Evolution of Web Designというプロジェクトを見たことがありますか？ Webページのデザインが1993年から2015年までの間にどのように変化したかを見ることができます。このアイデアはとても刺激的で、私も同じことに挑戦しようと思いました。それは、HTMLコンテンツには一切触れることなく、複数のデザインを適用することです。 この記事では、HTMLコードを変更せずにCSSでさまざまなスタ
理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
ユーザー登録すら不要！Web開発で使いたくなる無料の厳選ツールをまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで便利に使える無料のオンラインツールやサービスなどを厳選してご紹介します。 面倒なユーザー登録が一切不要なものを集めているので、サイトにアクセスすればすぐにでも使うことができるものばかりです。プログラミング、デザイン、アイデア発想など、さまざまなシーンで活用できるので、ご興味ある方はぜひ参考にしてください！ ■プログラマーに最適な検索エンジン！ 【 Hello 】 プログラムを書いてるときに、構文の書き方やエラーの原因を探るために検索することはよくあると思います。 そのようなときに、この検索サービスを使うと知りたい情報だけをまとめて一気に表示してくれるようになります。英語で検索することに最適化されていますが、ある程度は日本語でも対応してくれます。 例えば、配列をループさせる方法を検索すると以下のように表示されます。 すぐに
WEBデザイナーを目指す方や、若手デザイナーから「勉強法がわからない」と言うコメントをかなり聞きます。 そこで、会社の後輩を教育していた方法を思い出しながら、デザインとコーディングをどんな順番で勉強したら良いかを考えて見ました。 ※WEBデザイナーを想定した内容ですが、グラフィックの方はコーディングを除外すれば内容はあまり変わりません。 以下、本編に入る前に２つの留意点を最初に説明します。 留意点１：勉強を進める３つのポイント WEBデザインを勉強するときに、迷うのは以下の３つだと思います。 １．「コーディング」と「デザイン」をどんな順番で勉強するか？ ２．学校ではコーディングメインで「デザイン自体を教わってない」 ３．「模写」をするのが良いとよく聞くけど、どうやるの？ 勉強法６ステップはこれが組み込まれた内容になっています。 割とよく聞くのが、デザインとコーディングを別々に勉強しているケ
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 手を動かしてわかるクリーンアーキテクチャ ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 Tom Hombergs(著), 須田智之(訳) 詳解 AWS CloudFormation 潮村 哲 その決定に根拠はありますか？ 確率思考でビジネスの成果を確実化するエビデンス・ベースド・マーケティング 小川 貴史, 山本 寛 プログラマーのためのVisual Studio Codeの教科書【改訂2版】 川崎 庸
この記事では、ウェブデザインの仕上がりをワンランクアップする最新HTML／CSSスニペットをまとめてご紹介します。 掲載しているほとんどの作品が、レスポンシブ対応となっており、コードを直接コピペできるのも特長です。 CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います。 昨年人気の高かったベスト・スニペット100や、一発コピペできるCSSボタン、すごいCSSアニメーションなどと一緒にチェックしてみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 コピペできる！Webサイトがかっこよくなる最新HTMLスニペットまとめ ホバーで文字テキストが分割されるエフェクト See the Pen Split animation on hover with
GWにFigmaに入門したエンジニア
スターフェスティバル株式会社 エンジニアの@nano72mkn です！ 今回は、GW にエンジニアが Figma に入門した時のこれ覚えておけば Figma 活用できるんじゃない（個人的意見）のまとめをしていこうと思います！ Figma 活用技術 これから紹介する機能たちは、同じ要素を使い回す場合にとても力を発揮します！ エンジニアで Figma を触らないといけなくなった時、使い回し技術だけでも習得しておけばデザインを崩すことがなく手を入れることが可能です！ AutoLayout フロントエンジニアの方にはFlexBoxとpaddingが設定できるようになる機能といえばイメージが湧くと思います！ 等間隔で配置させることができる 各要素間をひとつひとつ調整する必要はないです！ 要素の内側に余白を持たせることができる ドラッグ＆ドロップで簡単に並び替えができる 並び替えた後に他の要素の位置を
CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じるかもしれません。 そこで、CSS Grid Layoutの重要なポイントに絞って、分かりやすく解説したいと思います。 もう迷わない！CSS Flexboxの使い方を徹底解説 CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法... Web Design Trends
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
flexプロパティの実践的な使い方を徹底解説
Webページやスマホアプリのレイアウト・コンポーネントを実装する際に知っておくと便利なflexプロパティの基礎知識と実践的な使い方を紹介します。 スペースいっぱいにアイテムを伸縮させて配置したり、画像・アイコンとテキストを並べて配置したり、フォームの入力欄とボタン、複数カラムの垂直方向の揃えなど、実践的な使い方を徹底解説です。 Digging Into the Flex Property by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに flex-growプロパティとは flex-shrinkプロパティとは flex-basisプロパティとは flexのショートハンドプロパティ flexプロパティの便利な使い方 flexのショートハンドを勧める理由 flexプロパティの使用例 flexプ
フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
Defensive CSS
👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CSSでulにborder: 1px solid red;を設定しています。 しかし、ボーダーはリスト全体ではなく左端の1列のみに適用されます。このバグは現在、Chrome, Safari, Firefoxで確認できます。 参考: Issue 507397 ※上記ではEdge（non chromium version）は期待通りに表示されるとあり、Edge 115（chromium version）ではバグで表示されます。 See the Pen "flex-f
先日リリースされたChrome 92のデベロッパーツールに、CSS Gridの実装に役立つ新機能が2つ加わりました！ 1つ目はCSS Grid editorでデバッキングツール、2つ目はCSS Gridのオーバーレイ、どちらもWeb制作でCSS Gridを使用する時に大活躍すること間違いなしです。 参考: New CSS Grid debugging tools 機能は簡単に言うと、先日当ブログで紹介したCSS FlexboxのCSS Grid版です。 参考: 先日の記事 CSS Gridの新機能は非常に便利で、使い方も簡単です。 まずは、Chrome 92にアップデート済みか確認します。
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年１月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。 背景 まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。 最近displayプロパティに
「おしゃれでかっこいいウェブサイトを作りたいけど、レイアウトにいつも困る。」 「同じような似たデザインから抜け出せない」 「周りがあっと驚くWebデザインがしたい」 「CSS Grid や Flexbox プロパティの使いかたを覚えたい」 そんなひとにおすすめしたい、コピペで利用可能な、おしゃれでモダンなWebレイアウト25選をご紹介します。 すべてのテンプレートの特長が以下のとおり。 ✅ モバイルファースト・アプローチに沿ったレイアウト ✅ すべてのブレイクポイントに対応したレスポンシブWebレイアウト ❌ position: absolute;は利用しない ✅ CSS Grid テクニックのみで表現 最先端のCSSテクニックを活用することで、これまでは考えられなかった構図を実現できるようになっています。 コピペでできる、おしゃれな無料レイアウト25選（CSS Grid & Flexbo
Defensive CSSを書こう
はじめ はじめまして、チームラボ フロントエンド班のLIUです。中国四川出身で、CSSとホラー映画が大好きマンです。新卒でチームラボに入社し、現在フロントエンドエンジニアとして働いています。 この記事では、フロントエンド勉強会（チームラボ内で、隔週で開催しているフロントエンドに関するLT会）で発表したDefensive CSSについての内容を紹介します。 レスポンシブデザイン タイトルは「Defensive CSS」ですが、まずはレスポンシブデザインについて話したいと思います。 モバイル通信の発展や、スマホブラウザがPC並みのパフォーマンスを実現したことで、レスポンシブデザインが広く普及しました。これにより、フロントエンジニアはスマホ専用サイトの制作から脱却し、CSSを用いて簡単に画面サイズに応じたレイアウトを実装できるようになりました。 しかし、レスポンシブデザインにはメリットだけでなく
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
New WebKit Features in Safari 15.4
News from WWDC22: WebKit Features in Safari 16 Beta
新卒1年目に使ったエンジニア質問テンプレート - Qiita
Layout patterns | Patterns | web.dev
6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」 - Qiita
CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です
【CSS】あっという間に悩み解決！新常識な最新テクニック24選
CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita
デザインの変更に合わせてHTMLを変えるのではなく、CSSでさまざまなデザインを適用する実装テクニック
デザインも上達！WEBデザイン勉強法６ステップ｜佐々木 康友
CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方
コピペできる！Webサイトがかっこよくなる最新HTMLスニペット38選
一番分かりやすいCSS Grid Layoutの使い方ガイド | Web Design Trends
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
Svelteで始める頑張らないフロントエンド生活 前編
2023年版！エンジニア必見のチートシート集 - Qiita
HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ
【CSS】displayプロパティに2つ値が入るってマジ！？ どゆこと！？ - Qiita
コピペで簡単、おしゃれ無料Webレイアウト25選（CSS Grid・Flexbox活用）