【CSS】メンターさんによるコードレビュー（受講生276人分）を全て読んでみた話 - siroemk’s blog
この記事はフィヨルドブートキャンプ Part 2 Advent Calendar 2020 - Adventarの13日目の記事です。 昨日は takopommさんの CSSで図形を描く復習 - takopomm’s diaryでした。 CSSでクリスマスツリーを作るなんて素敵ですね！ フィヨルドブートキャンプ のアドベントカレンダーは、どの記事も名作揃いなので ぜひぜひ読んでみてくださいね〜！ フィヨルドブートキャンプ のアドベントカレンダー Part 1とPart 2 目次 目次 はじめに(コードレビューを読んでみた理由) 今回読んでみたコードレビューは? こういうレビューが多かったよ！ 1. そこにあるべき余白がない 2. 行間がないと詰まっちゃう！ 3. スクロール（overflow）について 4. グローバルナビの文字しかクリックできない 5. グローバルを汚染する！！？ 6.
Safari 14.1 未満のバージョンに Flexbox の gap プロパティのフォールバックスタイルを追加するための CSS ハック
Safari 14.1 で Flexbox の gap プロパティが Safari でも使えるようになりました。 Safari 14.1 Adds Support for Flexbox Gaps ただ、Safari のバージョンアップは OS のアップデートが絡むので、他のブラウザに比べてすぐにサポートを切りにくいです。Flexbox gap はとても便利で Safari 以外の 主要なブラウザでは対応されている ので使いたいけど Safari のせいでまだ使えないと嘆いている方も多いのではないでしょうか？僕も同じくでした。 自分を含めそんな方々を救うために、それを解決する CSS ハックを作ってみましたので紹介します。（この CSS ハックにどれくらいのニーズがあるかわかりませんが 😅） 問題点 この問題の一番ややこしいところは CSS Grid 用の gap プロパティは Safa
/************************************ ** アイコンつきリスト ************************************/ /* ボックス全体 */ .iconbox{ margin: 0 auto 2em; /* 余白 */ background: #fef9ed; /* 背景色 */ border-radius:4px; /* 角丸 */ max-width:600px; /* 横幅 */ padding: 0; /* 余白 */ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */ } /* ボックスタイトル */ .iconbox .box-title { font-size: 18px; /* 文字サイズ */ background: #fdc44f; /* 背景色 */ text-
Future of React Native
naturalclar.devFuture of React NativeFebruary 05, 2020 この記事は Meguro.es #25 で登壇した内容です。 はじめに 最近 React Native Community の Github org の一員となりました。去年の Advent Calendar で目標を立てていたのですが、新年入って１週間足らずで達成できました。Community の一員になれた経緯はまた別の記事で書こうと思います。Community の一員として Contributors の Discord channel に招待されて、色々な知見が手に入るので、今回はその一部をシェアします。 The New React Native 2020年は React Native が大きく変わる年になります。現在、React Native は内部設計を徐々に変更していま
A while ago, I was inspecting facebook.com home page feed to learn and see how they build things out. I’m always curious to see how people write CSS. I noticed a very, very interesting border-radius value for the card component in the main feed. I shared the following tweet about this little discovery. Then, I received this reply from Miriam Suzanne: is it always 8px? That math looks like a toggle
最近読んだ本の中に、『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』という一冊があります。ウェブにおける汎用性や拡張性について、私自身が日頃から考えていたことが言語化されており大変感銘を受けましたので、今回本noteでは内容を紹介がてら私なりの考察を述べてみたいと思います。 本書はウェブサイト「Every Layout」の内容を日本語版として翻訳したもので、CSSについて書かれた技術書ですが、いわゆるセレクタの書き方やコンポーネントの分類について解説しているような一般的なCSS設計書ではありません。 ページを割いて主張されるのは、もう少し抽象的な、CSSが本来持つ柔軟性や汎用性といった性質についてであり、その性質を尊重・活用しながら、効率的に再帰的かつ堅牢なレイアウトを体現することを目指す具体的なメソッドです。 結果として本書はCSSの更なる習得を目指す
Introducing Bevy 0.1
Introducing Bevy 0.1 Posted on August 10, 2020 by Carter Anderson ( @cart @cart_cart cartdev ) After months of work, I am ecstatic to finally announce Bevy Engine! Bevy is a refreshingly simple data-driven game engine and app framework built in Rust. It is free and open-source forever! It has the following design goals: Capable: Offer a complete 2D and 3D feature set Simple: Easy for newbies to pi
ウェブサイトにおいて優れたユーザーエクスペリエンスは、よく考えられたナビゲーションメニューから始まると言ってもいいでしょう。ナビゲーションメニューはウェブサイトの要とも言え、訪問するユーザーに対する快適な操作性にもつながります。 ウェブサイトのナビゲーションメニューに必要なすべての要素がまとめれていることから、Bootstrapのナビメニューはカスタマイズ用の基本テンプレートとして活用されています。 この記事では、特にはじめて扱うひとがつまずきやすい、Bootstrapナビゲーションメニューのカスタマイズ方法3つをご紹介します。一緒にまとめた無料ツールを利用すれば、より手軽にナビメニューを拡張することができます。 Bootstrap ナビゲーションメニューについて知っておきたいこと Bootstrap ナビゲーションメニューは、ウェブサイト制作において柔軟でとても強力なツールです。さまざま
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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
この記事では、デザインのさまざまなルールや原則、配色などを楽しく学ぶことができるオンラインゲームをまとめて紹介しています。 遊び感覚でデザインスキルをアップできるので、なにもしたくないときの暇つぶしにもオススメです。 ペンツールの使い方をマスターしたり、配色センスを磨いたり、CSS Gridなど新しいウェブ技術を習得したりと、お家時間にいかがでしょう。 楽しく学ぼう！デザイナーにおすすめのデザイン独学ゲームまとめ Color Game お題として表示される色を、目がどれだけ正確に認識できるかを競う配色ゲーム。色相、彩度、補色などのカラーホイールから色を選ぶだけ。 The Bézier Game ペンツールのベジェ曲線を扱いをマスターするゲームで、ステップごとに出題されるお題の形状に合わせて、決められた手数で再現しましょう。 Shape Type デザイナー初心者がつまづきやすいペンツールの
JavaScriptがなくなった
もう相対日時にするやつとutm_*を削除するやつしか動かしてなかったので、JavaScriptをなくした。再構築したので消えている。 最近はデフォルトでJavaScript無効でも生きていけるようなインターネットになってきた気がする。HTML Living Standardのおかげかなって思ったけど、どちらかというとSVGやFlexboxやなんやのおかげなのかもしれない。 話題の遅延読み込み(loading属性)もそういうやつっぽいけど、挙動としてどうにもならない問題があるような気がしてならない。回線が安定していて、無制限で、マシンパワーも余っているなら、遅延読み込みする必要はないけど、それをブラウザーが知ることは難しそう、というような話。「多分あと10分くらいはハードウェアやインフラをこれくらいまで使えますよ～」みたいなのがOSがブラウザーへ教えないといけないのかな。 遅延読み込みはペー
Having a consistent ratio between the width and height of images and other responsive elements is important. In CSS, we used the padding hack for many years, but now we have native aspect ratio support in CSS. In this article, I will discuss what is aspect ratio, how we used to do it, what’s the new way of doing it. Of course, there will be use cases with a proper fallback for them. Let’s dive in!
ぼくの職場の新人さん向けに、サイト制作（とくに静的サイト）を作るのに便利なサービスをまとめたので記事にしました。 もう少しあるので、あとで加筆修正するかもしれません。 静的サイトジェネレーター『Hugo』『Middleman』などお好みで StaticSiteGen 静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。 このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。 ホスティング『Netlify』 Netlify: All-in
CSSでボタンや見出しを作成する際など、ボックスの中に文字を中央配置する機会は多いと思います。今回はそんな文字の上下中央配置について、実装の方法をいくつか挙げてみようと思います。 実際のCSSや見た目のデモはこちら↓ ①text-alignとpaddingで中央配置 まずはtext-alignとpaddingで中央配置する方法です。 .wrap.pattern-1{ text-align:center; padding:20px 0; } 文字をセンタリングした上で上下に同じ大きさのpaddingをつける方法です。 問題点としては、要素の高さ、文字の量がfont-sizeや行数に影響される点が挙げられます。 ②heightとline-heightで中央配置 .wrap.pattern-2{ text-align:center; height:60px; line-height:60px;
How We Improved SmashingMag Performance — Smashing Magazine
In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board. Every web performance story is similar, isn’t it? It always starts with the l
【4年連続、売上第1位！】 【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】 ずっと、一番売れているHTML本! 大反響! 32刷突破！ 読者の圧倒的な支持！シリーズ35万部突破の大ヒット! 全国の書店員がオススメする本(CPU大賞)第1位! 2019-2022年、年間売上 第1位!※ Web制作に必要な知識がすべて身につく! ※日販売上げランキング: HTML関連書籍 —————————————————————————- Web界隈やデザイナーに大人気！ Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、 Manaによる渾身のHTML & CSSとWebデザインが学べる本 —————————————————————————- 今のWebサイトの作り方が一気に学べる！ ・知識ゼロから体系的に学べる！HTMLとCSSの基本 ・最新の技術
初心者向け：ReactアプリケーションでのTailwind CSSスタイリングガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日は、初心者向けのReactアプリケーションにTailwind CSSを統合した、効果的なスタイリング方法について解説します。 初心者向けのReactで学ぶTailwind CSSチュートリアルとなります。 まず、Tailwind CSSをReactに統合する手順については以前の記事で詳しく紹介しています。 手順については、以下のリンクを参照してください。 dev-k.hatenablog.com このチュートリアルでは、すでにプロジェクトにTailwind CSSがインストールされていることを前提としていますので、その点をご了承ください。 それでは、Reactで学ぶTailwind CSSの効果的なスタイリング方法について見ていきましょう。 Tailwind CSSの特長と利点および考慮すべき短所 Tailwind CSSのカスタマイズとtailwind.config.jsファイルの重
Building a switch component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a responsive and accessible switch component. In this post I want to share thinking on a way to build switch components. Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview A switch functions similar to a chec
flexbox 子・孫 要素の高さを揃える方法
CSSのflexboxは子要素の高さを揃えますが、孫要素の高さは揃えてくれません。 このページでは、子・孫 要素の高さを揃える方法を紹介します。 デモ 子要素の高さを揃える 孫要素の高さを揃える 孫要素の高さを揃える + ボタンを下に設置 複数の孫要素の高さを揃える + ボタンを下に設置（強引） デモ See the Pen flexbox sample by kura (@kuranopen) on CodePen. 子要素の高さを揃える Flexboxを使えば、通常子要素の高さは揃います。 HTML <div class="flex1"> <div class="item"> <p class="text">テキストテキストテキストテキスト</p> </div> <div class="item"> <p class="text">テキストテキストテキストテキストテキストテキストテキス
2024React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Support in React NativeReact Native 0.71-RC0 Android outage postmortemReact Native 0.71: TypeScript by Default, Flexbox Gap, and more...First-class Support for TypeScript202
Teaching CSS via CSS-Tricks Jump to heading # 今、CSSを教えるということ Jump to heading # CSSを教える際、とあるレイアウトを再現しよう。となることは多く、レイアウトを再現するための"ハック"について伝える必要があり、どうしてもCSSの本質的なコンセプトからは少々遠い所から始めなければならかった。 Rachel Andrew氏はFlexboxやGridが存在する現在、別のアプローチでCSSを教えることができるはずだと説く。 Tradeoffs: The Currency of Decision Making via Farnam Street Jump to heading # 意志決定のための"貨幣": トレードオフ Jump to heading # 何をするか? 何が優先順位が高いのか? 時間であれ、体力であれ、お金
Figmaで実装しやすいデザインをつくるための心がけ
こんにちは🌤 ソーシャルデータバンクのデザインチームでインターンをしている河合です。 普段の業務では、弊社のプロダクトであるLinyのUI改善やデザインシステム構築に関する業務、さらに社内で使うシステムのUIデザインをしています！ この記事では、私が他職種（主にエンジニア）にとって見やすいFigmaでのデザインデータ作成を行うために、日頃心がけていることについてお話しできたらと思います。 前提：UIデザインに従事するのであればマークアップの知識はあったほうがいい 「デザイナーはコードも理解できたほうがいいのか？」という議論は業界でたくさんあるかと思いますが、個人的にはデザイナーもエンジニアリング領域の知見は持っておいたほうがいいと思っています。 なぜならデザイナー（特にこの記事でいうデザイナーはデジタルプロダクトのUIデザイナーを指す）は、「絵を描く人」ではなく「開発者」である からです
３カラムの記事一覧を作成する方法 | AndHA Blog
この記事では、サイトでよく見かける下記のようなカード型の記事一覧を作成する方法をご紹介します。 あくまで一例として、参考にしてみてください。 今回はカードのエリアにホバーすると、サムネイル部分に黒いマスクと「Read More」がフワッと出現するようにしてみます。 <section class="ly_section"> <div class="ly_section_inner"> <h2 class="el_lv2Heading">３カラムの記事一覧</h2> <!-- ここから3カラム記事エリア --> <ul class="card_items"> <li> <a class="card_item" href="#"> <article> <figure class="card_item_imgWrapper"> <img src="assets/img/photo.jpg" alt
What's New in DevTools (Chrome 113) | Blog | Chrome for Developers
Override network response headers You can now override response headers in the Network panel. Previously, you needed access to the web server to experiment with HTTP response headers. With response header overrides, you can locally prototype fixes for various headers, including but not limited to: Cross-Origin Resource Sharing (CORS) Headers Permissions-Policy Headers Cross-Origin Isolation Header
[CSS] gapって使っていいの？
ファンタラクティブのエンジニアの 太田 です。 InternetExplorerのサポートが終了した現在、cssでflexboxを使わない理由はなくなったと思います。 flexboxでgapを使うべきか考えました。 (gridではいくらでも使えばいいと思ってます。) gapとは 要素間の余白を定義するプロパティです。 gapのメリット 要素間が同じ余白のサイズであれば、親要素にgapを指定するだけで、要素間の複数のmarginを書かなくてよくなる。 カラム落ちの余白を気にしなくていい gapを使うべきパターン カラム落ちを考慮する必要があるレイアウト 横並びで1行の要素数が画面サイズによって決まるようなレイアウトではgapを使うことを検討できます。 marginを使用した場合はきれいに並べようとすると非常に複雑な計算が必要となり、状況によっては実現不可能な場合もあります。 gapを使えばと
![[CSS] gapって使っていいの？](https://cdn-ak-scissors.b.st-hatena.com/image/square/d0639c9e8b608d3b41086d8b66a0d7db3cb31a64/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--lUAO_ycr--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255D%252520gap%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%252584%2525E3%252581%2525AE%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AHidetoshi%252520Ota%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4YmI2YjY4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252596%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxZWY4MWQxNDUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対
モーダルウィンドウとは モーダルウィンドウは画面中央にウィンドウが表示され、表示されたウィンドウ以外の背景を薄暗く表示させることでユーザに伝えたい内容を際立たせるための技術です。Webの世界ではさまざまな場所で利用されているので、モーダルウィンドウという言葉にピンとこない人でもこの技術に触れたことのない人はいないでしょう。あるサイトにアクセスすると急に画面中央にモーダルウィンドウが表示され消し方がわからないといった経験をしたことのある人も多いかと思います。英語ではmodalという単語を使うので検索する場合はmodalと検索することで情報を見つけることができます。 モーダルウィンドウ 注意点 本文書では作成するモーダルウィンドウの見栄えは重視していません。これまでの個人的な経験では見栄えに注目した場合にCSSが複雑になりCSSの記述箇所で勉強を諦める人もいます。本文書では仕組みに注目している
Mozilla's Vision of the Web
Firefox is no longer supported on macOS 10.14 and below. Please download Firefox ESR (Extended Support Release) to use Firefox. Mozilla’s vision for the evolution of the Web March 23, 2022 Mozilla's mission is to ensure that the Internet is a global public resource, open and accessible to all. We believe in an Internet that puts people first, where individuals can shape their own experience and ar
bootstrap、便利ですよね。僕はずっとお世話になっています。 bootstrapの魅力はなんといってもクラスを指定するだけでコンテンツを横並びにすることができるグリッドシステムです。 でも絶対に一度はつまづく問題が「グリッドシステムで横並びにしたボックスコンテンツの高さが合わない問題」です。 ここではくわしく説明しませんが、floatプロパティを使って横並びさせた時の宿命です。 ボックスに枠線や背景色をつけなければそこまで気になりませんが、つけたい時絶対ありますよね。 このグリッドシステムで横並びさせたボックスの高さを揃える解決法をまとめます。 グリッドシステムで高さが合わない例 以下はグリッドシステムで高さが揃わないコード例です。 子要素であるinner-boxに、borderプロパティを指定します。 <div class="row"> <div class="col-sm-4">
2021/04/11 追記 他サイトに行って生成するという体験が個人的に残念だったため自作しました。 Figma からそのまま使えるコンポーネントのコードが生成できたら…。 そんなことを夢想する方もいらっしゃるのではないかと思いますが、実は Figma 自体の Auto Layout が進化してきていることによって意外と現実的なものになってきています。 それを実現してくれる Overlay という Figma から React のコンポーネントなどを生成するツールについて紹介いたします。 目次 Figma の Auto Layout とスタイルの取得方法について 要件 Overlay の紹介 導入する上での課題・もう一声ほしいところ おまけ: FigmaToCode も面白そう Figma の Auto Layout とスタイルの取得方法について はじめに、これなら確かに自動生成できそうだ
Everything about SwiftUI is new. And the layout system is no exception. SwiftUI no longer uses Auto Layout, gone all of the cruft introduced over the years. SwiftUI has a completely new layout system designed from the ground up to make it easy to write adaptive cross-platform apps. I have always been fascinated by the layout systems. I built an open-source UIStackView replacement, designed a conve
2021年11月10日と11日の2日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2021」がオンラインで開催されました。そこで堀越良子氏がLINEにおける「テクニカルライティング」の仕事について、ロッサ・ロマン氏が「テクニカルライティング」チームにおけるエンジニアの役割について紹介しました。まずは「テクニカルライティング」の仕事とは何かについて。 「テクニカルライティング」の専門チーム 堀越良子氏（以下、堀越）：それでは「LINEの開発者向けドキュメントを支える『テクニカルライティング』の専門チーム」というセッションを始めます。まずは私たち2人の自己紹介をいたします。 このセッションの前半を担当します、テクニカルライターの堀越良子と申します。私はもともとWeb制作会社でインフラエンジニアをしていましたが、その時に書いた技術書が縁で、
Wait, what? Yes, you heard that right. The Chromium team is experimenting with a new type of query, which is called State Query. Last year, size container queries got supported in all major browsers. They let us query a container based on its width. .card-wrapper { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: flex; align-items: center;
Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It's too hard. It's too simple. It's unpredictable. It's not a real programming language. Peter Griffin struggles with blinds dot gif. I don’t know why CSS sparks so many different emotions in developers, but I have a hunch as to why it can sometimes seem illogical or frustrating: You need a certain mindset
訪問者が利用する端末やブラウザのサイズによってページのデザインが変わる仕組みのことを「レスポンシブ」と言います。レスポンシブウェブデザインでは、ブラウザのサイズ（横幅）に応じて、読み込むスタイルシートが切り替わるメディアクエリ(Media Queries)とい... テーブルのタテが２列の場合のレスポンシブ対応 はじめに、左に項目名、右にデータという形で２列に収まるテーブルのレスポンシブ対応について見て行きましょう。ここではPCとスマホで下記のように表示を切り替えることが目的です。 そもそも論になってしまうのですが、２列であればスマホでそのまま表示させても見栄えが悪くない場合もあります。「本当にスマホ対応させる必要があるのか？」も検討した上で先に読み進めてくださいね。 ２列のテーブル場合は、スマホ表示時にth要素とtd要素をdisplay:block;にすればほぼ完成です。と説明されること
Scoped CSS is Back
Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from the community, it died. Well, great news — it’s back. And it’s so much better than the previous version. Even better, the W3C spec is mostly stable, and there’s a working prototype in Chrome now. We just need a little interest from the commun
週刊Railsウォッチ（20210413後編）RubyMineのRBSサポートとCode With Me、GitHub ActionとDockerレイヤキャッシュほか｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙇 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 RubyMineがRBSに対応 元記事: RubyMine 2021.1 の新機能 つっつきボイス:「お〜、Ruby 3のRBSがRuby
「table-layout: fixed;」の使い方 基本の使い方 セルごとに文章量の違う表組を作ってみました。 「table-layout」プロパティを何も指定しない（初期値：autoと同様）とこのようになります。 列幅は、文章量が多い列が長くなり、少ない列が短くなっていますね。 では、この表組に「table-layout: fixed;」を指定してみます。 するとこのように、列幅が均等に分割されました。 列数がいくつあってもすべて均等幅になります。 表示している画面のサイズから自動で計算し、均等に列幅を調整してくれるのです。 一部の列幅だけ指定したい場合 すべての列幅を均等にするのではなく、一部だけ「○px」に固定して、残った列の幅を均等にすることもできます。 CSS table { table-layout: fixed; } table th:first-of-type { wid
コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっています。より理解しやすいようコードを丸っと貼っておりますので、記事が長くなっています。予めご了承ください。また、今回の記事に登場するフッターは、以下のデモページより確認していただけます。こちらも合わせてご覧ください。 Footer DEMO ロゴとメニューが縦に並んでいるフッター【難易度★☆☆】横並びを縦並びにするテーブルレスポンシブ【難易度★☆☆】ロゴとメニューが横並びで、子メニューがあるフッター【難易度★★☆】メニューが多いフッター【難易度★★★】会社概要エリアとメニューが50%ずつ並んでいるフッター【
vue.jsを使ってアプリケーションを構築する際にドラッグ&ドロップでファイルのアップロードを行いたい時、ライブラリなしでコードを書きたいと思ったことはありませんか？本文書はそんな人のためにvue.js入門者でもできるドラッグ&ドロップのファイルアップロードについて基礎から説明を行っていきます。今までライブラリに頼って一度もドラッグ&ドロップの自作にチャレンジしていない人であればこんなに簡単なの！と驚くこと間違いなしです。 初期設定 手元の環境ですぐに動作確認ができるようにvue.jsはcdnを利用します。任意のフォルダを作成し、index.htmlファイルを作成してください。 index.htmlファイルに以下のコードを記述しファイルをドロップする四角枠を作成します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイコン吹き出し付きボックスをHTMLとCSSで作る！レスポンシブ対応！
Conditional Border Radius In CSS
デザイナーのための『Every Layout』〜真に汎用的なレイアウト設計を目指して｜金 成奎
つまずきやすいBootstrapナビゲーションメニューの基本カスタマイズ方法総まとめ
CSS スクロールスナップの基本概念 - CSS: カスケーディングスタイルシート | MDN
楽しく学ぼう！デザイナーにおすすめのデザイン独学ゲーム22個まとめ
Let's Learn About Aspect Ratio In CSS
平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ – すきせか
CSSで文字を上下左右中央に配置する方法いろいろ｜株式会社くふうしずおか
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | SBクリエイティブ
Building a switch component | Articles | web.dev
React Native in H2 2021 · React Native
Vol.250 - Frontend Weekly Tokyo
IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
Reactの基礎を学ぶのにモーダルウィンドウはいい教材 | アールエフェクト
【bootstrap3】グリッドシステムのボックスの高さをCSSだけで揃える。
Figma からコンポーネントのコードを生成！Overlay のレビュー
SwiftUI Layout System
社内に「テクニカルライティング」のチームがある理由 「プロダクトの品質」だけでなく「ドキュメントのわかりやすさ」もポイントに
Future CSS: State Container Queries
The CSS Mindset
CSS｜Tableをレスポンシブ対応させる方法 | コトダマウェブ
表組以外の要素幅も均等にできる「table-layout: fixed」の便利な使い方
フッターデザイン【レスポンシブサイトのサンプルソース】 | 東京のホームページ制作 / WEB制作会社 BRISK
【vue.js】ドラッグ&ドロップでファイルアップロード | アールエフェクト