週刊Webテク通信
2021年7月第2週号 1位は,CSSグリッドを使って画像の上に文字やボタンを配置するテクニック,気になるネタは,GitHubがコーディングの提案を行う新しいAIツールをプレビュー
ネットで見かけたWebテク
1. Positioning Overlay Content with CSS Grid | CSS-Trickshttps://css-tricks.com/positioning-overlay-content-with-css-grid/
CSSグリッドを使って,
以前よく使われていたposition:absoluteを使った絶対配置の手法に比べて,
以下の3つのパターンでのCSSグリッドでの記述方法を紹介しています。もちろんレスポンシブ対応です。
- メインビジュアルで画像の中央に文字を重ねる方法
- メインビジュアルをカルーセルにした場合にボタンを配置する方法
- 画像の上に文字と複数のボタン類を配置する方法
2. UI & UX Micro-Tips: Volume Six. | Marc Andrewhttps://marcandrew.me/ui-ux-micro-tips-volume-six/
UI/
- モバイルアプリでは常にタブバーを表示し続ける
- 文字の太さの違いだけで強調や上下関係を作れる
- モバイルではタップできる領域を大きくする
- 可能な限り一貫性のあるナビゲーションにする
- コンテンツの多いサイトでは検索機能を目立たせる
- 文字サイズを適当に選ばずタイプスケールを使う
3. 7 Website Navigation Examples That Will Inspire Your Designhttps://www.webfx.com/blog/web-design/website-navigation-examples/
Webサイトのナビゲーションの優れた例を7つ紹介した記事です。
構成/
4. 26 CSS Techniques Free Code - Twibbrhttps://twibbr.com/css-techniques/
アニメーションやトランジションを中心にCSSのテクニックをまとめた記事です。
JavaScriptを使わずCSSだけで実現した複雑なアニメーションや動きのあるUIなどを紹介しています。
5. 20 Best New Sites, June 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/06/20-best-new-sites-june-2021/
D2C系のページ中心に優れた新しいWebサイトをまとめた記事です。コピー,
紹介されているMama Joyce Peppa Sauceのサイトは,
そのほか,
- 広告ゼロのサブスク型検索エンジン登場 米スタートアップが提供,
月4. 95ドル - ITmedia NEWS
Medium,Quoraの記事作成者に収益を配分する仕組みもあるんですね - Slack,
立ち話感覚の 「ハドルミーティング」 など複数の新機能 - CNET Japan
Discordのように音声で会話できる機能が登場するようです - Facebook,
ニュースレター配信サービス 「Bulletin」 を提供開始 - CNET Japan
「Bulletinのライターは,サブスクリプション収益の全額を受け取ることが可能」 とのこと
先週の気になるWebサービス
TailwindCSS Buttonshttps://devdojo.com/tailwindcss/buttons
Foxtail CSShttps://foxtailcss.com/
今回は,
TailwindCSS ButtonsはTailwindCSSで記述したボタン集で,
Foxtail CSSを使うと,
Tailwind CSSのCSSをすべて読み込んでいるわけではなく,
今週の気になるWebネタ
GitHubがコーディングの提案を行う新しいAIツールをプレビュー | TechCrunch Japanhttps://jp.techcrunch.com/2021/06/30/2021-06-29-github-previews-new-ai-tool-that-makes-coding-suggestions/
GitHubから発表された,
今のところPython,
とはいえ,
バックナンバー
週刊Webテク通信
- 2021年7月第5週号 1位は,Webデザイナーはそろそろスライダーを辞めるべきという提案,気になるネタは,音声SNS「Clubhouse」が脱ベータ,招待・承認が不要な正式サービスに
- 2021年7月第3週号 1位は,ユーザー体験の原則を5つ紹介,気になるネタは,東京駅などの屋内を「Googleマップ」がナビする新機能--JR東日本の17駅から順次提供へ
- 2021年7月第2週号 1位は,CSSグリッドを使って画像の上に文字やボタンを配置するテクニック,気になるネタは,GitHubがコーディングの提案を行う新しいAIツールをプレビュー
- 2021年7月第1週号 1位は,サインアップ/ログインのUXを良くするヒント,気になるネタは,「Chrome」のサードパーティークッキー廃止が2023年に延期
関連記事
- 2022年4月第3週号 1位は,カルーセルのUXをより良くデザインする方法,気になるネタは,月600円で容量無制限のクラウドバックアップが可能な「Dropbox Backup」がローンチ
- 2022年4月第1週号 1位は,UI/UXデザインのテクニックを6つ紹介,気になるネタは,TVer,リアルタイム番組の「追っかけ再生」可能に 民放の「公式テレビ配信サービス」へ
- 2022年3月第1週号 1位は,有名サービスのアプリやサイトのUIにダメ出し,気になるネタは,Instagramの「リール動画」,Facebookでも利用可能に
- 2021年9月第4週号 1位は,UIデザインにアイコンを使うときに守るべき10のルール,気になるネタは,音楽機器のズーム社,商標権侵害でWeb会議「Zoom」提供のNECグループ会社を提訴
- 2021年6月第4週号 1位は,CSSでの縦横比の設定方法,気になるネタは,Spotifyがライブオーディオアプリ「Greenroom」を提供開始,Clubhouseのライバル誕生