cssだけでグラデーションのボタンを作る

CSS on 30 Sep , 2016

グラデーションの背景やボタンは非常に綺麗ですが、画像で作ってしまうと、色を変更したいときに面倒ですよね。特にグラデーションのボタンなんかは、オンマウスで切り替わったりすると、変更があったときにまた切替前と切替後で2枚作成しなければいけません。でもこれがすべてCSSで指定してソースを変更するだけでいいので簡単ですね！ OFF… ON！！！まずボタンはこのように記述します。 --　HTML　-- TEST 次にcssでグラデーションをかけます。好みの色にするのが結構大変でした…。 --　CSS　-- .btm-l { height: 143px; width: 80%; text-align: center; font-size: 40px; color: #fff; margin: 0 auto; pad...

エクセルを使ってテーブルを作る方法

CSS on 22 Apr , 2016

今月から開発に混ざってｐｈｐやｃｓｓの勉強を始めました。その中で、エクセルで作られた表をサイト上にテーブルに組み直さなければならないときがありました。エクセルのデータを入れると自動でHTMLに変換してくれるサイトもあるのですが、それを使うとイメージ通りに作ってくれないときがあります。だからと言って、すべて手打ちしてしまうと時間がかかってしまい、とても効率が悪いです。そこで、全自動とはいかないんですが、大量のエクセルデータをいっぺんに入力する方法をご紹介しますね。まず、エクセルを開きます。データが入っている表の列を追加します。追加する位置は各データとデータの間です。その後、そこにタグを入れて…… 全ての列にタグをそれぞれコピーします。後はこれを全選択コピーして貼るだけです。そうすると勝手にタグの入っ...

google mapをcssで丸に切り抜く方法

CSS on 12 Jan , 2016

google mapをcssで丸に切り抜きたかったので試しました。当然以下のcssコードで行けると思ってました、ええ。 #map_canvas{ width: 400px; height: 400px; overflow:hidden; border-radius: 200px; } chromeや、ieだとコレで問題なく丸に表示されるのですが何故かsafariだと四角のまま。。。 #map_canvas{ width: 400px; height: 400px; overflow:hidden; border-radius: 200px; -webkit-transform: translateZ(0); -webkit-mask-image...

Bootstrap3からBoosstrap4へ移行する際の注意点！

CSS on 26 Oct , 2015

Bootstrap3からBoosstrap4へ移行する際の注意点！ IEのサポートが終了（ついに。。。）いよいよBootstrapからIEが除外されました。 cssのフォントの単位がpxからremを使用するようになっています。remはルートのフォントサイズからの相対的な大きさなので、ルートのフォントサイズを変更すれば全てのフォントサイズの大きさを相対的に変更することが出来ます。逆にIE8対応サイトでBootstrapを使いたい場合はBootstrap3を使うしかないですね。ブレークポイントの変更スマホサイズのブレークポイントが750pxから544pxに変更 Bootstrap3で1番幅が狭いブレークポイントである[sm]が750pxだったので、pcでブラウザの横幅を750px以下にしてしまうと画像などの横幅が750px（横幅100%）な...

iphoneが抱える背景画像cssの問題

CSS on 20 May , 2015

全面背景画像を固定したサイトデザインはインパクトがありますよね。しかし通常PCサイトで使用する「background-attachment:fix」はそもそもmobile safariが対応していないため背景divをfixするなどのハックを使うはめになります。（いろんなとこで紹介されているので調べてみてください）背景固定はwebデザインの手法として定着しつつあるから是非公式には対応してほしいところです。ちなみに上記ハック方法でも実は問題があったりします。。「background-attachment:fix」と良く併用するのが「background-size:cover」ウインドウサイズに合わせて背景画像を伸縮してくれるすぐれものです。これ自体はmobile safariも対応しているのですが、、問題はmobile saf...

Bootstrapでブレイクポイントを変更する

CSS on 11 May , 2015

Twitterが作ったcssフレームワークおBootstrapは便利ですね。ブレイクポイントが768px未満、768px～991px、992px～1199px、1200pxと分かれているんですが、最少のブレイクポイントが768pxとなっています。 PCでブラウザをぐりぐり動かして768px以下になると、Bootstrapではスマホサイズ(モバイルサイズ)となってしまいます。スマホサイズは480px位からブレイクして欲しいところです。デフォルトのContainer sizesは768pxから1120pxになっています。1120pxが大きすぎるので最大Container sizesを980pxにします。 Bootstrapにはcssのカスタム機能があるので、ブレイクポイントとContainer sizesをカスタマイズしてみます。カスタマイズ内容はスマホサイ...

モバイルフレンドリーへの対応はお済みですか？

CSS on 3 Apr , 2015

いよいよ、4月21日にモバイル端末のGoogle検索結果が大きく変わります。この影響については、いろんなサイトで騒がれていますが、それもそのはず、Google様自身が「Google の検索結果に大きな変化をもたらします。」と言ってますからね。 Google WEBマスター向け公式ブログ http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html Googleは普段、アルゴリズムの変更時には、「検索結果の何%に影響」みたいな言い方をしますが、今回は違いますね。これについても、色々な憶測があるようですが、そんな憶測はするだけ無駄なので、できることをしっかりやって、後は信じて待ちましょう。さて、もう1ヶ月以上前に発表されていますから、既に対応済みの方が多い...

css3で要素の大きさを変えるアニメーションを実装してみる

CSS on 25 Mar , 2015

cssのtransformを使うと比較的軽量かつスムーズなアニメーションを実装できる。ここ最近では、Jqueryと併用されることも増えてきたんじゃなかろうか。 JqueryのAnimateよりもcssのtransformのほうがスマートフォン端末ではスムーズにうごいたりする。是非積極的に活用していきたいところです。今回は、要素の大きさを自在に変える例を書いておきます。 transformのscaleを使用します。 ①CSS側でアニメ設定 @-moz-keyframes scaleAnim{ 0%{-moz-transform: scale(0, 0);} 50%{-moz-transform: scale(5, 5);} 100%{-moz-transform: scale(1, 1);} } @-webkit-ke...

回れよ回れ！！

CSS on 10 Mar , 2015

開発途中でローディングGIFや、プログレスバーのデザインが出来上がるのを待っている間デバック用にとりあえず処理中の状態を見えるようにする時、css3のtransformを使って遊んでいます。何をするかというと、単純にトリガーになった要素を transform:rotate で回転させているだけ。 transformもアイデア次第で色々利用できると思います。具体的には、 var Rotate = function(element, step, sec) { this.step = 1; this.sec = 10; this.elm = element; this.r = 0; this.end = true; this.hTimer = null; if (arguments.length > 1...

WEBサイトでメインアイキャッチ画像に動画を利用してみる。

CSS on 25 Feb , 2015

回線速度の水準が上がってきたので動画を利用したwebサイトを多く見かけるようになった。いままで静止画が当たり前だっただけに、動画を使ったサイトに出会うとちょっと印象に残ったりします。サンプルサイト http://h-print.co.jp/ 実装の手順は実に簡単！html5のビデオタグを利用するだけです。再生できる拡張子はこちらの３種です。 mp4 webm Ogg この3種どれにすればいいの？って話ですが結論から言うと、「mp4」を用意すればほぼOKです。というのも、ブラウザごとに、再生できるファイルが違うため、過去は「mp4」と、「webm」または「Ogg」のどちらかを用意しないと主要ブラウザに対応できませんでした。 2015年2月現在 Internet Explorer Firefox s...