週刊Webテク通信

2019年6月第4週号 1位は, ハンバーガーメニューではなくソーセージリンクを使ってみよう,気になるネタは,Google,オリジナルタブレットから撤退し,Chrome OSではノートPC「Pixelbook」に専念

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2019年6月17日~6月23日の間に見つけた記事のベスト5です。

1. Using Hamburger Menus? Try Sausage Links · Bradley Taunthttps://bradleytaunt.com/2019/06/14/hamburger-menu-alternative/

ハンバーガーメニューではなくソーセージリンクを使ってみようという記事です。

角丸の長方形で囲まれたテキストボタンが横並びになり,横スクロールできるメニューを「ソーセージリンク」と呼んでいます。ソーセージリンクのコーディング例も掲載してあります。

ハンバーガーメニューとソーセージリンクそれぞれの,良い点,悪い点もまとめています。

ソーセージリンクの良い点
  • CSSが必要最小限
  • スクリーンリーダーやキーボードのみの操作でも問題ない
  • JavaScript不要
  • メニューを開閉するためのトグルボタンが必要ない
  • 最初からいくつかのメニュー項目を何も操作せずに見られる
ソーセージリンクの悪い点
  • 見た目が魅力的ではない(スクロールバーが出てしまうケースも)
  • 小・中規模のメニューリストに向いており,大規模なサイトマップには向かない
  • 端をぼかしたり途中で見切れている状態にしないと,スクロールできることがわからない

図1 ハンバーガーメニューではなくソーセージリンクを使ってみよう

図1 ハンバーガーメニューではなくソーセージリンクを使ってみよう

2. How to Section Your HTML | CSS-Trickshttps://css-tricks.com/how-to-section-your-html/

HTMLでの, <nav>, <aside>, <article>, <section>,<header>,<footer>といった領域を区切るタグの使い分けについて解説した,内容が充実した長い記事です。

CSSでスタイリングするためだけに<setion>を使わない,<header>タグで囲まれた中に<header>,<footer>を入れないなどのルールや,実際のコーディング例などを紹介しています。

図2 HTMLでの領域を区切るタグの使い分け

図2 HTMLでの領域を区切るタグの使い分け

3. Complete Guide To Cross Browser Compatible CSS Gradients | LambdaTesthttps://www.lambdatest.com/blog/complete-guide-to-cross-browser-compatible-css-gradients/

クロスブラウザでのCSSグラデーションの完全ガイドです。

  1. 線形グラデーション
  2. 円形グラデーション
  3. 円錐型グラデーション
  4. 線形ストライプグラデーション

上記4種類のグラデーションのコーディング方法を丁寧に紹介しており,各種ブラウザでの対応状況やクロスブラウザ互換のコーディングテクニックも詳しく解説しています。

図3 クロスブラウザでのCSSグラデーション完全ガイド

図3 クロスブラウザでのCSSグラデーション完全ガイド

4. 12 Inspirational Example of Adding Human Illustrations to Websiteshttps://speckyboy.com/human-illustrations/

ウェブサイトに暖かさと個性を追加する,人間のイラストを使った実例を12個まとめた記事です。

数字とテキストだけの「顔のない」インターフェイスに,人のイラストが入ることで「冷たい」印象を和らげることができるとのことです。

最近のウェブデザインに使われるイラストとして,無機質な感じのベクトルイラストがトレンドだということをあらためて実感しました。

図4 人間のイラストが使われたウェブサイトの実例いろいろ

図4 人間のイラストが使われたウェブサイトの実例いろいろ

5. 404 Illustrations - Trendy 404 page images for your next projecthttps://www.kapwing.com/404-illustrations

404(Not found)エラーのためのイラスト集です。ダウンロードして利用できます。

犬が紙をくわえたイラストの下には「このページは犬が食べました」など,それぞれのイラストの下に書かれたメッセージも面白いですね。

図5 404エラーのためのイラスト集

図5 404エラーのためのイラスト集

そのほか,最近の記事の中から,気になるニュース記事を紹介します。

先週の気になるWebサービス

RecordScreen.io - Record your screen right from the browserhttps://recordscreen.io/

RecordScreen.ioは,ブラウザから起動させるだけで画面の動きを動画で撮影できるサービスです。動画はwebmフォーマットでダウンロードできます。

ブラウザのウィンドウだけでなく,別のアプリや画面全体を撮影可能です。パソコンのカメラで自分を撮影した動画を左下に合成できる機能もあり,YouTube動画作成にも役立ちそうです。

設定画面がビデオ通話/ビデオ会議のサービスと似ています。ビデオ通話サービスの画面共有機能と同様の技術を利用しているのでしょう。撮影する領域の指定ができず,縦長のアプリケーションの画面を撮影すると変倍されていたりと,まだ洗練されていない印象ですが,お手軽で便利なサービスだと思います。

図6 ブラウザから起動させるだけで画面を動画で撮影できるサービス

図6 ブラウザから起動させるだけで画面を動画で撮影できるサービス

今週の気になるWebネタ

Google,オリジナルタブレットから撤退し,Chrome OSではノートPC「Pixelbook」に専念 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1906/21/news063.html

Googleがオリジナルタブレットの開発を終了するそうです。2018年のChrome OS搭載タブレット「Pixel Slate」が最後となりました。

日本では,Pixel Slateは発売されていないですし,Chrome OS端末もほとんど話題になることもありません。ただ,海外ではChrome OS端末自体の人気はそれなりにあるようです。

個人的には最近iPad(+Apple Pencil)のクリエイティブ分野での可能性を大いに感じています。クリエイターみんながタブレットを使うようになれば,タブレット事業に参入するところもまた増えて盛り上がるんじゃないかと思います。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/