駆け出しフロントエンドエンジニアは何を学ぶべきか - RAKUS Developers Blog | ラクス エンジニアブログ
目次 はじめに スキルマップ HTML CSS JavaScript SPA（Single Page Application） JavaScriptフレームワーク パッケージ管理 TypeScript Git Linux Web知識 テスト ブラウザ コーディングルール Docker（必須ではないが知っておくと良い） 情報収集に使えるWebサイト（おまけ） まとめ おわりに はじめに こんにちは、フロントエンドチームの北嶋です。 弊社でフロントエンドチームを立ち上げてから1年以上が経ち、少しずつメンバーも増えてきました。 最近は来年度の新卒メンバーに対する育成プランを考えているのですが、昨今のフロントエンド技術は移り変わりも激しく、学ぶべき項目が多岐に渡っているため、育成プランを考えるのも一苦労です。 ネットでフロントエンド関連の情報を調べると、今では参考にならない古めの記事も多いですし「
こんにちは！ UIデザイナーのmarinです。 2019/12/6 にFigma がアップデートし、Auto Layoutという機能が搭載されました。このAuto LayoutをFigma ユーザーの皆様がどう活用しているか知りたくて、まずは自分から紹介してみようとこの記事を書いています。 Auto Layoutとはその名の通りなのですが、UI上のサイズ変更やオブジェクト等の入れ替えを自動的に調整してくれる機能です。Sketch にもSmart Layout というよく似た機能が実装されていますね。 XcodeのAuto Layoutや、CSSのFlexboxと同じような挙動をしてくれます。 Auto Layout化することで何が便利なのかUIデザインは基本的に試行錯誤の連続で、一度作ったデザインを変えないということはありません。完成するまで常に試行錯誤を重ね、もちろん完成した後もユーザー
Jun 6, 2023 by Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brando
Grid Layoutは、同じくCSSレイアウト技術のFlexboxでは実現できない複雑なレイアウトを効率良く作成できます。しかし理解が難しい概念を含んでいるため、学習を挫折してしまうケースも多いでしょう。 この記事ではCSS Gridに関する他の記事を読んで挫折した場合でも理解できるように、Grid Layoutの使い方を詳しく紹介します。この記事を読めば、Grid Layoutの使い方を正確に理解できるだけでなく、Web制作においてサイトのレイアウトを組むスピードが劇的に向上します。
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Have you often thought about whether to implement a mobile-first or a desktop-first approach? Recently, I shared a Twitter poll about how many uses mobile-first vs desktop-first, and the results were interesting. The total number of votes is 648, and here are the stats: Mobile-first: 33.3% Desktop first: 21.9% Mix of both: 24.7% In this article, I will explore with you what each method means, and
CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 2019 9/02 CSSで要素を横並びにしたいときに非常に便利なflexboxですが、「最初や最後の一つだけ並び順を逆にしたい...！」という時にどうすればいいのかパッと分からなかったので調べてきました。 「一つだけ並び順を逆に」というのは例えば、3つ並べる要素のうち、2つは左寄せでいいけど最後の１つは右寄せがいい、という場合のことです。 この記事のアイキャッチ画像にある３つのボックスの状態ですね。 floatを使っている時は一つだけrightにするなどすれば簡単に実現できたのですが、flexboxでは少し特殊な方法になります。 方法１：flexboxを入れ子にする これは今回紹介したいメインの方法ではないので詳しくは紹介しませんが、まず最初に思いつく方法ではないかなと思います。 flexboxを入れ子に
この記事は Meguro.es #25 で登壇した内容です。 はじめに 最近 React Native Community の Github org の一員となりました。去年の Advent Calendar で目標を立てていたのですが、新年入って１週間足らずで達成できました。Community の一員になれた経緯はまた別の記事で書こうと思います。Community の一員として Contributors の Discord channel に招待されて、色々な知見が手に入るので、今回はその一部をシェアします。 The New React Native 2020年は React Native が大きく変わる年になります。現在、React Native は内部設計を徐々に変更しています。この内部設計の変化については、React Native Re-architecture として2018年か
Wordpress等で記事の一覧をFlexboxで横並びにすることはよくあると思います。 デザインカンプなどでは「良い感じ」の文字量で作られていることが多いので気にならなくとも、実際に運用が始まった後に「記事毎にタイトルの長さが違っているので高さが揃わず気持ち悪い」ということはよくあると思います。 自分でも良く忘れるのでので、備忘録も兼ねて。 完成形まず、目指すべき完成形はこんな感じです。 分かりやすいようにタイトル部分に背景色を付けましたが、タイトル部分の高さが揃っているのでボタンの位置もそろっており、細かいことを言ってくるクライアントやディレクターも満足してくれるでしょう。 このタイトル部分の高さが記事によって異なることで良く陥りがちなレイアウト崩れがこちら。 タイトル行くらいであれば1行～2行で収まるのでそこまで気にならないかもしれませんが、例えば商品説明などが入る場合は参考画像の比
I haven’t been more excited for a CSS feature like I’m now in the past six years I spent as a front-end developer. The prototype of container queries is now available behind a flag in Chrome Canary. Thanks to efforts from smart people like Miriam Suzanne and other folks. I remember seeing a lot of jokes about the support for CSS container queries, but they are finally there. In this article, I wil
はじめに 今回は新卒1年目の時に自分が先輩エンジニアに質問する際に使っていた質問テンプレートを紹介します。 自分は相手に質問する時は「いかに相手の時間を取らずに解決まで至れるか」を重視して質問を考えています。 いきなり「OOがわからない」「OOのエラーが解決できない」「〇〇が動かない」といった答えを全て相手に丸投げするような質問をしていては成長はおろか、相手から「この子は自分で考えない子なんだな」と思われてしまいます。 そこで今回は初心者が先輩に質問する際にどのような手順で質問を作成すればよいかをテンプレートとして紹介します。 エンジニアとは書いているものの他の職種にも応用できるようなテンプレートだと思うので、ぜひ参考にしていただければなと思います。 この記事の主な対象者 新人エンジニア 質問の仕方が分からない人 エラー解決に時間を大幅に使ってしまう人 Google人工知能開発チームの15
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
HTML/CSS初心者は必見！ どんなデザインでも自由自在にできるFlexbox入門 - Qiita
はじめに 今回は要素を綺麗に配置するときに、大変役立つFlexboxの使い方について紹介します！ ここでは、要素 (アイテム) が入っている箱のことをコンテナと呼んで説明します。 YouTube動画 動画で学びたい方はこちらもどうぞ！ 【YouTube動画】 HTML/CSSのFlexboxについて詳細解説！ これでどんなデザインでも自由自在！【Flexbox入門】 GitHub コードのサンプルをGitHubにアップロードしてます！ Pathや一部コードを修正する必要がありますが、ローカルで試してみたい方はこちらもどうぞ！ https://github.com/yassun-youtube/html-flexbox-samples コンテナ内の全要素の配置 コンテナに入っている要素の並びを一括で指定したい場合は、flex-direction, justify-content, align
What's New in DevTools (Chrome 117) | Blog | Chrome for Developers
Network panel improvements Override web content locally even faster The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them. To override web content, open the Network panel, right-click a request, and select Override content. If you have local overrides set up but disabled, DevTools en
複数のページで構成されたReactアプリケーションを構築する際にはReact単独ではルーティングの機能をもっていないためルーティングライブラリが必要となります。数あるルーティングライブラリの中でReact Routerは最も人気の高いライブラリです。複数のページを持つということはブラウザからアクセスするためのURLが複数存在することになります。アプリケーションを構成するURLにアクセスした場合にどのページコンポーネントのコンテンツを表示させるのかといったルーティングの設定をReact Routerを利用して行います。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReactを利用して構築したい場合にはReact Routerを利用することになります。 通常のWEBサーバではページを移動する度にサーバから送られてくるコンテンツをブラウザ上に描写させるためページ全体の
Simon Holdorf Posted on Oct 6, 2019 • Updated on Apr 27, 2021 • Originally published at thesmartcoder.dev Introduction Whatever you do, it's always beneficial to have the right tools at your disposal. I love working remotely and am a big advocate of doing remote software development. Therefore, I always strive to have the best equipment available to be as productive as possible. Writing posts like
Writing CSS In 2023: Is It Any Different Than A Few Years Ago? — Smashing Magazine
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
Figmaチーム来日！Figma Meetup レポート | CyberAgent Developers Blog
UXエンジニアの谷です。 初来日のFigmaチームを招いてのFigma Meetupが、Abema Towersで開催されました。 このMeetupでは、Figmaの開発に関わるメンバーによるFigmaのショーケースやロードマップ、新機能のお披露目がありました。その後は熱いQ&Aや、ネットワーキングでFigmaづくしの時間を過ごしました。 こちらのMeetupのレポートのハイライトと、私の所感を交えて書いていきます。 Figmaについては、過去の記事「Figmaを導入してコマースサイトを制作してみた話」でFigmaを取り上げているので、そちらもご覧ください。 目次 オールインワンで、コラボレーティブなデザインツール Figmaの特徴的な機能 Figmaに直接質問できる機会 チームとしてのFigmaの素晴らしさ オールインワンで、コラボレーティブなデザインツール デザインプロセスにおける、ワ
Interop 2022: browsers working together to improve the web for developers Stay organized with collections Save and categorize content based on your preferences. For the first time ever, all major browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2022 will improve the experience of developing for the web
A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more. Photoshop was the first professional design app that I learned when I was 14 years old. It was one of the reasons that I became a designer, and eventually a front-end developer. Because of that, I thought it would be interesting to see how
React CRAで簡単に設定できる！初心者向けTailwind CSSのスタイリング方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Tailwind CSSとはなんですか？ 事前準備 TailwindCSSの導入・インストール Tailwind拡張機能 最後に 前回の記事で、Reactでのスタイリング方法についていくつか紹介しました。 dev-k.hatenablog.com 本日は、初心者向けにReactのCRAで「Tailwind CSS」を設定し、スタイリングする方法についてチュートリアルを提供します。 Tailwind CSSは、Reactでのスタイリングに非常に便利なツールであり、この記事ではその設定方法について詳しく解説します。 Tailwind CSSとはなんですか？ Tailwind CSSは、ユーティリティファーストのCSSフレームワークであり、コンポーネントのスタイリングを容易にし、再利用可能なコンポーネントの作成に集中できるように設計されています。 簡単に言えば、Tailwind CSSは、独自の
週刊Railsウォッチ（20200212後編）Rubyistが解説するUnicodeとUTF-8、Sorbetが速い理由、CSSの歴史、2019年の脆弱性まとめほか｜TechRacho by BPS株式会社
2020.02.12 週刊Railsウォッチ（20200212後編）Rubyistが解説するUnicodeとUTF-8、Sorbetが速い理由、CSSの歴史、2019年の脆弱性まとめほか こんにちは、hachi8833です。昨日の大江戸Ruby会議をすっかり見落としてました😇。 大江戸Ruby会議で話すので東京にいたらそこで会いましょう！ https://t.co/w1ADFEMhnx — Aaron Patterson (@tenderlove) February 8, 2020 サイト: 大江戸Ruby会議08 -- 終わりました 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催していま
Posted by Mariana on June 8, 2021 5:04pm 1 min read It does what it says. You can click and download for better quality. :) Tags: CSS, cheat sheet, flexbox
履歴書とポートフォリオの審査を通過したらテクニカルインタビューに進みます。コーディングテストとはテクニカルインタビューの一環で、実際にコードを書いて簡単なプロダクトを作るテストです。Front End Developer の場合テストはほぼ100% JavaScript 重視です。 前述の仕事探し期間に10社以上のコーディングテストを受けました。コーディングテストをそれだけ受けるというのはそれだけ不採用になっている、ということでもあるので僕のレベルが知れてしまいますが、例え不採用でもコーディングテストは 実際に雇ってもらえるレベルを知れる それに対して自分の位置がわかる テストを通して新しい技術を習える 企業の開発スタイルを習える これらを一気に得られる絶好の機会だと思います。 コーディングテストの後にはレビューとフィードバックがあり、その際に良かった点や悪かった点を聞くと丁寧に教えてくれ
【診断に使える】YES・NOチャートをWordPressで作る
Twitterでたまにトレンドに入る「診断メーカー」や「診断ドットコム」のような診断ツールをブログにも取り入れたい！ そう思い作ったのがこちら。 30秒診断 あなたの余命はあと何年！？ ※結果はフィクションです 1.運動は週にどのくらい行ってますか？ 毎日 週2〜3回 ほとんどしていない 2.脂っぽい食べものはどのくらい食べますか？ 毎日 週2〜3回 ほとんど食べない 2.脂っぽい食べものはどのくらい食べますか？ 毎日 週2〜3回 ほとんど食べない 2.脂っぽい食べものはどのくらい食べますか？ 毎日 週2〜3回 ほとんど食べない 3.睡眠時間はどれくらいですか？ 6時間以下 6〜8時間 8時間以上 3.睡眠時間はどれくらいですか？ 6時間以下 6〜8時間 8時間以上 3.睡眠時間はどれくらいですか？ 6時間以下 6〜8時間 8時間以上 3.睡眠時間はどれくらいですか？ 6時間以下 6〜8時
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン93.0.4577.63がリリースされました。開発者向けのアップデートが多数行われています。 New in Chrome 93 - Chrome Developers https://developer.chrome.com/blog/new-in-chrome-93/ New in Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more! - YouTube ◆リリースサイクル短縮 2021年3月に発表していた通り、Google Chromeのリリースが4週間ごとに変更されます。ただし、次回のChrome 94は2021年9月21日にリリース予定とのこと。 ◆CSSモジュールをサポート CSSモジュールがJavaSc
【初心者向け】WEBプログラミング学習完全ロードマップ【MacBook購入から実務まで】 - Qiita
※11/18追記:この記事の内容でフリーランス案件獲得→納品できました WEBプログラミング学習完全ロードマップとは 下記の体験を完全無料にてご提供いたします。お金を取ろうにも、 Qiitaはnoteとかと違って有料記事機能がないですからね。安心です。 ・MacBookを買えば誰でもできます ・プログラミング初心者向けの教材です ・WEBプログラミングの基礎を解説します ・完全未経験でもプログラミングを学べます ・QiitaようなWEBサービスを個人で作れます この記事を読むメリット ・50万円で納品できるWEBサイトを制作するスキルが身につきます 皆さんがたった今使っている「Qiita」というWEBサイトですが、 1から制作すると「納期30~60日、価格50~100万円」の規模です。 本教材ではQiitaを簡略化したWEBサイトを1から制作しますから、 クリアできれば、およそその程度の金
Flexbox、使っていますか？ 機能がありすぎて使うのに躊躇してしまっていたり、正直あまり使いこなせていなかったりしていませんか？ 私ははじめ、どのプロパティを使えば良いのか悩んで悩んで、結局使わずにfloatやdisplay: table;などを使ったりして使用を避けていましたが、使い始めたらとても便利でした。 Flexboxのプロパティには数多くの種類があってとっつくにくい印象を受けますが、実は実際の制作現場で使用するものはそこまで多くありません。 今回は、現場でよく使用するプロパティを、使用例とあわせてご紹介します。 これだけ覚えておけば、サイトを構築する上でほとんど不自由はないと思います。
What's New In DevTools (Chrome 81) | Blog | Chrome for Developers
Moto G4 support in Device Mode After enabling the Device Toolbar you can now simulate the dimensions of a Moto G4 viewport from the Device list. Click Show Device Frame to show the Moto G4 hardware around the viewport. Related features: Open the Command Menu and run the Capture screenshot command to take a screenshot of the viewport that includes the Moto G4 hardware (after enabling Show Device Fr
こんにちは、会社員しょこちゅんです🤗 本日は、タイトルにもある通り、記事の一番下に自分で任意の広告をレスポンシブで入れる方法についてです。 グーグルアドセンスに合格されてない方や、他のアフィリエイトサイトに登録されてる方も多いと思いますので、是非参考にしてみてください。 それでは早速行ってみよー。 レスポンシブデザインとは？ レスポンシブって何？ レスポンシブで作るメリットは？ グーグル広告があるから必要ないんじゃない？ 実際のタグのご紹介 実際使用しているブロックはこちら 実際に使用するタグはこちら 任意の広告タグに張り替える方法 手順の説明 広告の分類ごとに追加していく方法 手順 最後に レスポンシブデザインとは？ レスポンシブって何？ はい、そもそもの質問からお答えします。 レスポンシブデザインとは、スマートフォン対応に作られてるサイトの事です。 分かりやすく説明すると、PCで開い
The Stack
Flow elements require space (sometimes referred to as white space) to physically and conceptually separate them from the elements that come before and after them. This is the purpose of the margin property. However, design systems conceive elements and components in isolation. At the time of conception, it is not settled whether there will be surrounding content or what the nature of that content
週刊Railsウォッチ（20200623後編）Bootstrap 5 alphaリリース、Lambda FunctionsとEFS、DB設計で気をつけていることほか｜TechRacho by BPS株式会社
2020.06.23 週刊Railsウォッチ（20200623後編）Bootstrap 5 alphaリリース、Lambda FunctionsとEFS、DB設計で気をつけていることほか こんにちは、hachi8833です。つい先ほどこのニュース↓を見て一人でどよめいてます。 元記事: 速報：アップル、Macの独自チップ移行を正式発表。初のARM版Macは年内 #WWDC20 - Engadget 日本版 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 ⚓Ruby ⚓mrubyとC言語とRust 元記事: mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは？ | Offers Ma
2021年9月20日、iOS 15のリリースに合わせてSvadilfariというアプリをリリースしました。iOS 15で追加されたSafari機能拡張の仕組みを利用して、Safariにジェスチャー操作を追加するアプリです。 個人で2ヶ月ほどかけて制作したアプリなのですが、想定より多くの方にダウンロードしていただき、「ウェブ閲覧を快適に」「2021年9月の ベストAppとゲーム」の2つのApp Storeストーリーで特集していただきました。また、アプリ単体としてもApp StoreのAppタブで紹介していただきました。 技術的な観点やAppleとのコミュニケーションは別の記事にまとめることにして、この記事ではプロジェクトに取り組んだきっかけや、開発において大切にしたことについて書き留めてみます。 リリースまで まず、アイデアの発想から現在に至るまでの流れをまとめてみます。 6月中旬: W
Python Asyncio入門 - Qiita
Asyncioは、大雑把に言えば、PythonでNodeのような非同期プログラムを行えるようにするモジュールです。Pythonでは、スレッド（concurrent.futures）を用いて並行プログラムを書くことができますが、Asyncioではもう少し軽量の並行プログラムを実現できます。 この辺は「Fluent Python」に詳しいですが、いかんせんAsyncioの箇所は最新のPythonのバージョンで大きく変更されています。以下の公式サイトが貴重な情報源になります。 Asyncio公式サイト ここでは、最も有名なAsyncioライブラリであるaiohttpを使ったソースコードを説明することで、Asyncioの概念を見ていきたいと思います。 aiohttp公式サイト 以下の関連記事を投稿しました (追加 2021/02/13) Django 3.1のAsync Views - Qiita
近ごろの様子
2024年5月 自分の個人ウェブサイト内でのここの呼称を「かつてTwitterとして知られていたプラットフォーム」で統一したい (12時35分) Firefoxに昔からあったので、大して調べずにoverflow-inlineプロパティーを使い始めたら、全然実装されていなかった (7時2分) 東西線の工事の日を確認しているが、関係なかった (8時1分) 隠したテキストは検索できないことがあるので、ちゃんと表示するようにした(v9.30.5) (7時33分) ソフトミント色のAirPods Proとか出たら買っちゃいそう (18時52分) Kindleのマンガが1000冊を超えてしまい、1冊500円とすると50万円だなと思い、ブックオフで売りたい (18時52分) Firefoxのプライベート・ウィンドウのタブでは、ダークモード対応のfavicon.svgでダークモード側が選択されるという学び
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？ - Qiita
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？CSS 「１次元なら Flexbox, ２次元なら CSS Grid」 のように Flexbox と CSS Grid を使い分けると考えている人は多いのではないでしょうか？ じつは、１次元であっても、中身の文字列等の幅に関係ない(つまり 幅 が hug contents じゃない) 要素が含まれるときには、 Flexbox で書くよりも CSS Grid のほうが簡潔になる場合があります。 たとえば、「左側は幅固定で、右側はあまった幅を埋める (ともに中身に左右されない)」のように領域を左右に分ける場合です。 (CodeSandbox のプレビュー画面のサイズを変化させると、左側領域の幅は変わらず、右側だけが変わっていることが分かります。) 1. Flexbox で実装する
IE11でflexプロパティに書いたcalcが機能しないバグ
先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
IE 6-9とOpera 10-11.5では、flexboxを使用することができません。これらが推奨環境に含まれてしまっている場合はflexboxを使用するのを避けましょう。 また、最新のIE11でもいくつかバグが報告されているため、flexboxを使用する際は動作確認を行った方がいいでしょう。 FlexBoxの基本 それではflexboxの基本から学んでいきましょう。 flexboxは、HTML内に親要素となるコンテナを作成し、その中に子要素となるアイテムを作ります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello World !</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div clas
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma のAuto Layout機能を適応して楽をする｜marin
News from WWDC23: WebKit Features in Safari 17 beta
CSS Gridの使い方を丁寧に解説！爆速でレイアウトを完結させよう！ | ZeroPlus Media
clamp() - CSS: カスケーディングスタイルシート | MDN
フレックスボックス - ウェブ開発を学ぶ | MDN
The State Of Mobile First and Desktop First
CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 | WEMO
React Nativeの Re-architecture について。 - Qiita
【Flexbox】孫要素まで高さを揃える方法と、うまく行かない時の対処法（追記あり）｜あたおか
Say Hello To CSS Container Queries
新卒1年目に使ったエンジニア質問テンプレート - Qiita
News from WWDC24: WebKit in Safari 18 beta
React Router v6 はじめでもわかるルーティングの設定方法の基礎 | アールエフェクト
9 Projects you can do to become a Frontend Master
CSS containment - CSS: Cascading Style Sheets | MDN
Interop 2022: browsers working together to improve the web for developers | Blog | web.dev
CSS Findings From Photoshop Web Version
Flexbox CSS Cheat Sheet - LearnPine
アメリカTech企業コーディングテストの傾向と実例（Front End Developer 用） - hoshki.dev
Google Chrome 93安定版リリース、今後は4週間ごとにアップデートへ
プロはこうやって使ってる！制作現場でよく使われるFlexboxの実例5選
【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。 - 花太郎BLOG
個人開発アプリが「月間ベストアプリ」に選ばれApp Storeで紹介されるまで
【2019年＊保存版】FlexBoxで簡単に横並びレイアウト｜初心者でも大丈夫