週刊Webテク通信

2013年8月第2週号 1位は,CSSで水平垂直センター揃えをする方法,気になるネタは,「Amazon Art」──美術作品を画廊から直接購入できるオンラインショップがスタート

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

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

1. Absolute Horizontal And Vertical Centering In CSS | Smashing Codinghttp://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

ウィンドウや領域の真ん中にコンテンツを表示する方法について,様々な方法を紹介した記事です。

CSSでコンテンツを垂直方向のセンター揃えにするのは,意外と大変です。水平,垂直方向両方のセンター揃えをCSSで実現するテクニックを,それぞれの長所,短所とともに掲載しています。

やはり問題になってくるのはブラウザのサポート状況で,対象とするブラウザの範囲によって,使えるテクニックが決まってきます。

可変する高さに合わせて垂直方向のセンター揃えを行いたい場合,Table-CellかFlexboxを使う方法がおすすめとのことです。IEは10でないと対応していませんが,Flexboxは記述が簡単で魅力的です。

図1 CSSで水平垂直センター揃えをする方法

図1 CSSで水平垂直センター揃えをする方法

2. 10 CSS selectors you shouldn’t code without | Webdesigner Depothttp://www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/

便利だけれど忘れられがちなCSSセレクタを10個紹介しています。

  • *(全称セレクタ)
  • A + B(隣接セレクタ)
  • A > B(子セレクタ)
  • A[href*="example"](属性セレクタ)
  • A:not(B)(否定擬似クラス)
  • 色々な疑似クラス

古いブラウザを対象にする場合には,対応状況を気にする必要がありますが,利用すれば効果的で便利な指定ができるはずです。

図2 便利なCSSセレクタの紹介

図2 便利なCSSセレクタの紹介

3. Creative Link Effects | Codropshttp://tympanus.net/codrops/2013/08/06/creative-link-effects/

リンクテキストに対するロールオーバー効果を多数紹介したチュートリアルです。アニメーション効果もCSSだけで実現しています。

水平メニューを想定した,シンプルながら目を引く効果が揃っています。

図3 リンクテキストに対するロールオーバー効果いろいろ

図3 リンクテキストに対するロールオーバー効果いろいろ

4. 25 Useful Code Snippet Repositories and Resources - Bloom Web Designhttp://bloomwebdesign.net/2013/08/code-snippet-repositories-and-resources/

コードスニペットの共有サイトなどを多数紹介しています。

コードスニペット(Code Snippet)もリポジトリー(Repositories)も,短い日本語にするのが難しいですね。コードスニペットは,よく使われる短いコードの断片(Snippet=断片,切れ端)のことです。リポジトリーは貯蔵庫,倉庫,集積所といった意味で,IT用語ではソースコードやデータの仕様などが保管されているデータベースのことだそうです(実は初めて知りました)⁠

図4 コードスニペットの共有サイトいろいろ

図4 コードスニペットの共有サイトいろいろ

5. Skeuocard by kenkeiterhttp://kenkeiter.com/skeuocard/

クレジットカードの番号入力用のインターフェイスです。クレジットカードを模したレイアウトになっており,確かに分かりやすいですね。

番号からクレジットカード会社を自動認識してマークが現れたり,カードを裏面にひっくり返してセキュリティコードを入れたりと,なかなか凝っています。

図5 クレジットカードの番号入力用のインターフェイス

図5 クレジットカードの番号入力用のインターフェイス

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

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

Clouduphttps://cloudup.com/

Cloudupは,ビデオや写真などを簡単に共有できるWebサービスです。

インターフェイスは英語ですが非常にシンプルで分かりやすく,パスワードで閲覧制限もかけられるので,写真を知人と共有する場合に便利だと思いました。

Flickrで言うとSets(フォルダのようなもの)に当たる,Streamsという単位で管理して,Streamsごとにパスワードを決めることができます。新規のStreamsを作った時点でURLが生成され,ファイルをアップロード中でも,Streamsのタイトルを変更したりパスワードを決めたりの設定作業が行えます。タイトルは日本語でも問題なさそうです。短縮URL風の短いURLなところもうれしいですね。

YouTubeの動画やSoundcloudの曲を登録することもできます。その場合はCloudupのサーバーにアップされるわけではなく,埋め込まれる形になっています。オンラインブックマーク的な使い方もできそうです。

Cloudupは現在招待制ですが,わたしは以下の記事に掲載されている米Lifehackerの招待コードの入ったリンクを使わせていただきました。

図6 ビデオや写真などを簡単に共有できるWebサービス

図6 ビデオや写真などを簡単に共有できるWebサービス

今週の気になるWebネタ

「Amazon Art」─⁠─美術作品を画廊から直接購入できるオンラインショップがスタート - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1308/07/news063.html

米Amazonが,画廊と提携して美術作品を販売するオンラインショップ「Amazon Art」をオープンしました。10ドルのものからあるそうですが,485万ドル(約4億7千万円)の作品もあるとのことです。

このAmazon Artの商品もAmazonアソシエイトの対象なら,売れると大きいですよね。仮に報酬率が1%だったとしても,4億円のものが売れれば,400万円入ってくることになり,一攫千金ですね。

Facebookで海外の美術関係者やお金持ちと友達になって,それからさりげなくAmazon Artへのアフィリエイトリンクを投稿して…などと妄想してしまいました。

AmazonのアフィリエイトといえばAmazon Publisher Studioという新しいツールが登場しています。これは,自分の管理するサイトやブログに専用のコードを貼り付けるだけで,ページ上の画像やテキストに簡単にアフィリエイトリンクを追加できるというもの。これはお手軽で面白そうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入