BLOG

ウェブ制作で学んだことやデザイン・コーディングのネタを中心に、自分の好きなウェブサービスやガジェットの話題などを発信しています。
  • 2018/2/13

    iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話

    作っていたサイトで、ちょっと写真をカッコよく表示したいなと思いborder-radiusとoverflow:hiddenを利用した角丸マスクで表示するようなものを作りました。その時iOSで少しハマったので、その対処法などをご紹介します。

  • 2017/7/7

    CSSで2重線を付ける方法と注意点

    CSSで2重線を付ける時、どう実現するでしょうか?
    一番簡単に実装する方法としては、borderのスタイル指定で「double」を指定する事だと思います。しかし、border:doubleはちょっと癖があり、指定によってはブラウザ間で表示が異なる事があるので注意しなければいけません。

    ここではそんな注意点をご紹介します。

  • 2017/6/3

    CSS3のアニメーション終了時のイベント

    CSSのtransitionやanimationの終了時に何かjavascriptで処理をしたい場合、終了時のイベントを取得すれば操作が可能です。イベントの取得方法をご紹介します。

  • 2017/5/29

    モダンブラウザ用に最低限のリセットを施したminireset.css

    モダンブラウザ用に最低限のリセットだけを施したミニマムサイズのリセットCSS「minireset.css」をご紹介します。

  • 2016/6/22

    CSSフレームワークのメリット・デメリット

    基本的に自分はあまりCSSフレームワークを積極的に使う方ではないのですが、業務上Bootstrapで作られたサイトの改修を行うことがあります。そこで感じているCSSフレームワークのメリット・デメリットをまとめてみました。

  • 2016/3/2

    最近増えてきたFlexboxベースのCSSフレームワークをご紹介

    最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。

  • 2015/12/11

    cssだけで吹き出しを作る方法

    webサイトのちょっとしたアクセントデザインとして、吹き出しを使うことがあると思います。
    以前までは画像をつかって吹き出しを作っていましたが、簡単なものならばcssだけで吹き出しを作ることができるので、その方法をご紹介します。

  • 2015/11/25

    iPhoneやiPadなどでoverflow:scrollで出来た要素内のスクロールを滑らかにする方法

    スマホ用のサイトを作っていて、overflow:scrollでスクロールする領域を作ることはよくあると思います。しかし、自分で作ったスクロール領域はiPhoneやiPadで見ると滑らかなスクロールをしてくれません。

    そんな時はcssの-webkit-overflow-scrollingプロパティを使うと、慣性スクロールが有効になり滑らかなスクロールが実現できます。