デザナビ👀デザインを図解で解説 @wkwdesigner フォローするとデザインのヒントやキッカケが見つかる💡 初心者向けデザインテクニック・Tips／デザインのポイントを図解付きで解説💡 ツイートだけではわかりづらい部分はブログで詳しく解説✏️ https://t.co/X9FzimhN9e
撮影時に知っておけばバランスが良くなる構図の12つのパターンが思わず使いたくなる。「それっぽく見えるレイアウト」や「視線を誘導させるレイアウト」も
デザナビ👀デザインを図解で解説 @wkwdesigner フォローするとデザインのヒントやキッカケが見つかる💡 初心者向けデザインテクニック・Tips／デザインのポイントを図解付きで解説💡 ツイートだけではわかりづらい部分はブログで詳しく解説✏️ https://t.co/X9FzimhN9e
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
Class for Zoom誕生！早速解説します。授業でZoom使うならこれ一択！｜わきた #教育 #Web3
今やオンライン会議・オンライン飲み会・オンライン授業の代名詞でもあるZoomですが、Zoomは学校向けに作られたアプリケーションではありません。授業で使うには少し使いづらい部分もありました。 そんなZoomですが、この度、学校向けの最強アドオンが登場しました。その名もClass for Zoom！ どんな特徴があるのか、早速見てみましょう！ 1. 全員見渡せる。TAは上に映る。 クラス全員を見渡せるレイアウトで、ページをスクロールする必要はありません。全員を一斉に見渡せる機能は結構大事ですよね。 通常のZoomのグリッドビューだと、先生も生徒の中に埋もれてしまいますが、Class for Zoomは、先生は左側に単独で表示されます。ちなみにTA(Teaching Assistant)は少し大きめに、上部に表示されます。生徒がプレゼン等をする際、同じように少し大きめに上部に表示することもでき
よくあるデザインで起こる想定外のコンテンツに備える、CSSの実装方法のまとめ
タイトルやラベルの文字数が多くなったり、ボタンの数が増えたり、コンテンツが長い場合と短い場合があったり、想定外のコンテンツが使用された場合に対応できるよう、念のために備えたCSSの実装方法を紹介します。 現状はボタンが2個だけど、1個の場合や3個以上に増える場合も考慮して実装しておくと、メンテナンスが楽になります。 The Just in Case Mindset in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「念のため」の考え方 よくあるデザインで起こる想定外に備える 終わりに はじめに Webサイトを構築する際に、コンポーネントがさまざまな条件下で機能するか確認したい場合がよくあります。「念のため（Just in Case）の考え方」とは、そのコンポーネントに起こり
CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
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
互い違いレイアウトの組み方〜レスポンシブ編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ はっちゃんです。 今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。 レスポンシブ対応で、SP表示時には縦並びになるようにします。 要件 PC表示 ブラウザ幅が769px以上だったらPCレイアウト表示 互い違い SP表示 ブラウザ幅が769px未満だったらSPレイアウト表示 均一に縦並び flex-directionで並びを入れ替える それでは早速組んでいきましょう。 互い違いには、Flexboxのflex-directionを使用します。 See the Pen Alternate Layout1 by k_hatsushi (@hatsushi_kazuya) on CodePen. メディアクエリでSP時にはFlexboxを解除 Flexboxを解除するだけで、DOMを書いた順に縦に積み上がっていきます。 See the Pen Alterna
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
