2016.06.16

CSSだけで画像トリミングできたよ

サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩…

2016.06.03

CSSで実装する、マウスオーバーで表示される吹き出し

ちょっとした動きをJavaSciptなしで実装できないかと思い、 CSSのみで吹き出しの表示・非表示を作成しました。

2016.06.01

マルチカラムレイアウトとは？記事やブログ、商品説明などの文章の段組の場合、これまでだとfloatを使用し、並べて。。。などの方法で配置していたのですが、親要素にカラム数・幅を指定するだけで綺麗に並んでくれるマルチカラム…

2016.05.30

CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入…

2016.05.23

前回はCSSアニメーションの「animation」と「transition」についてまとめましたが、今回は、要素を変形させる「transform」について。前回記事→CSS3でアニメーション：初歩の初歩

2016.05.18

Photoshopをメインツールとして使い始めて数年になりますが、ここ最近のバージョンアップで使用感が大きく変わってきたなぁと実感しています。特にウェブデザインのためのツールとしては、よりマークアップへの連携がしやすい…

2016.05.09

公式のツイートボタンとオリジナルのツイートボタンを同一ページに設置した際に、オリジナルのツイートボタンをクリックするとポップアップが2窓開いてしまう現象があったので、その際の解決法をまとめました。（他にもSNSのボタン…

2016.04.22

グノシーやスマートニュース、日経電子版などのニュース系アプリでよく使われているUIで、スワイプで記事一覧が横スライドしていくものがあります。大量の更新記事をカテゴリ毎に効率よく見せるのに非常に効果的なUIです。 web…

2016.04.06

Craftについてプロトタイプで有名なInVisionから出ている、ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopの無料プラグインです。公式サイト http://labs.invisio…

2016.03.30

ここ最近、古い IE のサポートが公式に終了するなど、対応ブラウザに大きな変化がありましたので調べなおしてみました。［参照］2012.03.15「Webフォントを使ってみる」Tips Note https://www…