TIPS

February 16, 2017

テキスト選択時(ドラッグ)時に背景色を変えたらWebKit系ブラウザ(Chrome/Safari)だけ色がちょっと違かった話

テキストを選択(ドラッグ、ハイライト)した時の色ってCSSで変えられるんですよね。
普段あまり変えることがないのですが、たまたま必要な機会があった時に「あれ、Chomeで色が暗いぞ?」と気づいた話。
小ネタとしてメモしておきます。

選択時の背景色とか文字色の変え方

参考:「::selection - CSS | MDN」


::selection{
    background: #059;
    color: #eee;
  }
  ::-moz-selection{
    background: #059;
    color: #eee;
  }

これだけです。::selection 擬似要素というそうです。
Firefox(Gecko)はプレフィックス(-moz-)が必要です。
color、background、background-color、text-shadowのみ使えます。
ただし、そもそも非標準なので、将来的にサポートされないかも?

※2017/02/16時点、IE11およびその他は現時点最新バージョンにて確認。

続きを読む

January 11, 2017

iOSでfixed要素の背景がツールバーの高さ分 消える件

スマホ(iOS)のバグ?のお話です。
いつもこの問題に直面するのですが、検索しても出てこないので書いてみます。

※2017/01/11時点、検証可能な範囲 iOS8.4 〜 10.2で発生を確認。

モーダルウィンドウなどを実装する時に、ブラウザ全面に背景色を引いたfixed要素を置くことはよくありますよね。
iOSにおいて、ツールバーが一度出た状態からスクロールして、ツールバーが消える時にこの高さ分(よりやや多め) 背景が消えてしまう問題があります。
文章で説明してもよくわからないと思うので、以下をご覧ください。

cap1.jpg cap2.jpg

数秒以内に正しい状態に治るので大きな問題ではないのですが、割と気になります。
解決方法としては、fixed要素には背景をつけず、背景用のabsolute要素を別に配置する、となります。
発生状態のコードと、解決後のコードを解説します。

続きを読む

December 8, 2016

2016年「今年お世話になったCSS」5選 〜 transition、calc()関数、:nth-childセレクタ など〜

cording.jpg

今年お世話になったCSS Advent Calendar 2016 - Adventar」の記事です。
残念ながら前3日開いてしまってるので、5記事目になります。
後ろも空いてるので、誰か今からでもぜひ登録してください!

今年お世話になったCSSは・・・

最近のバージョンのIEで使えるようになったやつ

もちろんIE以外にも各主要ブラウザ(基本 最新版)で使えることが前提ですが、やはり影響が大きいのはIEの対応状況です。

フリーランスで受託のコーディングをしているのですが、
今年はほとんどが「IE10以上の対応」でした。
去年は「IE9以上」が多く、「IE8」の対応もありました。
ここ半年は「IE11以上」の案件もちらほらあるので、来年はもう「IE11、Microsoft Edge対応」だけになるのではないかと(密かに願ってます)

※当然、案件の事情によって様々かと思います。あくまで私が対応した中での実感です。

リキッド対応・CSSアニメーションで役立つやつ

レスポンシブの案件は去年から多かったのですが、今年はPCでもサイズ別にレイアウトを変えるようなリキッドレイアウトの対応が多かったです。
また、CSSアニメーションでアイコンやパネルの形を変化させるような、やや複雑なアニメーションの機会が増えました。

続きを読む

October 20, 2016

リキッドレイアウトでカラム間の余白だけ固定pxにする方法

リキッドレイアウト小ネタです。
サイト上で必ず出てくる横並びのレイアウトですが、ブラウザ幅に合わせて伸縮させつつも、カラム間の余白は大きくなりすぎると困る!ということで固定pxで指定したいことがあります。
横幅を%指定しつつ、余白をpx指定するサンプルです。border-boxとpaddingを使うのがポイントです。

実装サンプル

デモはこちら

liquid-column-px-demo.jpg

続きを読む

September 26, 2016

みんな大好きリキッドレイアウト 〜固定幅 + リキッドレイアウトの実装〜

こんにちは、武井です。
最近リキッドレイアウト(可変レイアウトの一種)の案件が増えてきました。
リキッドレイアウトと言えば5年ほど前に流行ったような気がしますが、ブラウザ幅100%で展開するサイトはビジュアル的にもインパクトがあり、昨今でも可変レイアウトの需要は高いようです。

リキッドレイアウトは可変レイアウトの一種で、相対値(%)で幅を指定します。
閲覧環境に合わせた幅に可変できるのがメリットですが、「ナビゲーションの幅が可変すると使いづらい」など一部 固定幅にしたい時があります。
今回はそんな 「固定幅 + リキッドレイアウト」の実装方法ついてご紹介。

実装サンプル

サンプルのHTMLとCSSはこちら

liquid_sample.jpg

続きを読む

September 22, 2016

比率がバラバラな画像の高さを固定して、余った横を見切れさせつつセンタリング

こんにちは、武井です。
何らかの記事一覧ページなどで、バラバラのサイズの画像を特定の統一サイズで並べたい時があります。
縦横比率が統一されてるなら単純に縮小すればよいのですが、縦長の画像も横長もあるときは一手間必要です。
縦のサイズを固定して、余った横は見切れさせつつセンタリングする実装のメモ (横が足りないときは横があいたままセンタリング)。

実装サンプル

デモはこちら

実装サンプルキャプチャ

続きを読む

September 10, 2016

モバイルコーディングで便利なpxを%に計算するSass関数作った

モバイルのコーディングは、横の余白やwidthは%で指定する仕様の場合が多いです。
しかし、デザイン上で%を指定してもらえることはほとんどないので、pxサイズを元に計算することになります。

逐一計算するのも面倒なので、こんな関数にしました(SCCS)。

※ご使用は自己責任でお願いします。2016/09/09現在の内容です。

関数


// px to percent
@function px-to-per($px, $parent_width:750){
      @return decimal-round( ( $px / $parent_width * 100% ) , 2);
}

// math function
//  _decimal.scss | MIT License | gist.github.com/terkel/4373420
@function decimal-round ($number, $digits: 0, $mode: round) {
      $n: 1;
      // $number must be a number
      @if type-of($number) != number {
            @warn '#{ $number } is not a number.';
            @return $number;
      }
      // $digits must be a unitless number
      @if type-of($digits) != number {
            @warn '#{ $digits } is not a number.';
            @return $number;
      } @else if not unitless($digits) {
            @warn '#{ $digits } has a unit.';
            @return $number;
      }
      @for $i from 1 through $digits {
            $n: $n * 10;
      }
      @if $mode == round {
            @return round($number * $n) / $n;
      } @else if $mode == ceil {
            @return ceil($number * $n) / $n;
      } @else if $mode == floor {
            @return floor($number * $n) / $n;
      } @else {
            @warn '#{ $mode } is undefined keyword.';
            @return $number;
      }
}

使うとき

例) .content というdivの左右に58px相当のpaddingをつける


.content{
        padding: 0 px-to-per(58);
}
続きを読む

January 26, 2016

Google アナリティクスのスパムには、フィルタとセグメントの合わせ技で立ち向かえ

Googleアナリティクスの『スパム』が昨年ごろから流行しているのをご存知でしょうか?
参照元やキーワードなどに様々なデータを残し、不審なサイトへのアクセスを誘導する迷惑行為です。
多くのサイトでフィルタによる除外が紹介されていますが、フィルタの課題点に触れつつ、セグメントを組み合わせた対処法をご紹介していきます。

続きを読む

January 24, 2016

Git初心者・中級者へ捧げるGitを学ぶためのまとめ

私がGitと出会ったのはまだ専門学生の頃でした(2010年ごろ)。
「バージョン管理システム」って言葉すら知らなかった状態でGitから手を出したのですが、当時思ったのは「いくら調べても初心者が学べるGitの情報が少ない」ということです。
しかし、最近は随分Gitが人気になって情報も増えてきたように感じます。それでいてまだまだ需要の多いGitですので、勉強サイトやツール等をまとめてみたいと思います。

続きを読む

June 20, 2015

GUIツールで送る快適な Gitライフ@Creators MeetUp #29

第29回 Creators MeetUpの登壇資料です!
・最近非エンジニアさんもGitを使うことが多くなってきた
・ネットの情報も増えてきたけど、コマンドベースだからGUI情報が少ない
・GUIで非エンジニアさんも、もっと気軽にGitに触れてほしい!
というお話です。

似たスライドですが、GitとGitHubの違いとか、鍵作成とcloneの仕方などから説明しているのもありますので合わせて参考いただければです。
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜

私はエンジニアですが、cherry-pickとかrevertとかってコマンドでやるとややこしいので、GUIツールの方が楽ちんだなーと思うので逆にコマンド使いの方にもオススメです。

April 18, 2015

Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27

第27回 Creators MeetUpの登壇資料です!
Tumblrを頑張ってカスタマイズして、SNSっぽさをなくしてWebサイトとしての使い方をしてみたよ!っていうお話。

以前、お仕事で制作させていただいた[g]ift ギフトというサイトの事例です。

Tumblrは各種CMSと違って本当にシンプルな機能しか用意されていないので、Webサイトとして使うのは大変でした。
まず投稿もシンプルなタイプしか用意されてなくてブログ記事っぽく書けなかったり、カテゴリ・サブカテゴリという概念がなくて全てタグでまかわなくてはいけなかったり。

その分、Web制作に馴染みのないお客様には、SNS投稿の感覚でサイト更新ができるのはとてもいい提案だな、と思いました。