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
今月から開発に混ざってphpやcssの勉強を始めました。 その中で、エクセルで作られた表をサイト上にテーブルに組み直さなければならないときがありました。 エクセルのデータを入れると自動で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の問題

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でブレイクポイントを変更する

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で要素の大きさを変えるアニメーションを実装してみる

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サイトでメインアイキャッチ画像に動画を利用してみる。

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