css

Jan 21, 2017

bttn.cssで簡単にボタン作成

2017-01-21
css button ボタン

簡単にボタンが設置できるbttn.cssのご紹介です。数も12種類のボタンだけで色と大きさが指定できます。

容量も少ないのでさくっと出来ます。下記公式サイトからダウンロードして使うかcdnjsからのリンクでhead内にご使用ください。ここで使っているアイコンフォントも紹介しておきます。

CDNJS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.min.css">

Read more

Oct 24, 2016

指定サイトのCSSを解析してくれるサイトのご紹介

2016-10-24
blog web css 解析

気になるサイトのCSSを解析してくれるサイトCSS Stats GitHubをご紹介したいと思います。

単純にURLを貼り付けるだけで解析してくれるのでとても簡単に解析情報を見ることができます。

⇒公式サイトはこちら

どんなフォントを指定しているとか配色はどんな色にしているとか詳細度のグラフなどあります。曲線がなるべくなだらかなほうがよいそうです。

Read more

Jun 25, 2016

CSSだけでInstagram風のフィルターが使えるcssgramが便利

2016-06-25
blog web css Instagram filter インスタグラム風

インスタグラムはやってますね、私も1年ほど前に登録したもののあまり使っておりません。。。さてそんなインスタグラムの写真フィルターのようなライブラリがありましたのでご紹介します。

簡単に言えば、CSSgramはCSSで画像をInstagramのようなフィルターっぽく編集できるライブラリです。

ここでやっているのは、基本的に画像にグラデーションオーバーレイ、フィルタやブレンド機能を使って似せているような機能です。

簡単にInstagram風のフィルターが使うことができます。

対応ブラウザはIE(インターネットエクスプローラー)は対象外となっております。Google Chrome、Firefox、Opera、Safariが対応しているようです、edgeは対応しているのかな、cssの問題なのでおそらく対応していると思われますが。。

こちらは公式サイトです。⇒CSSgram test sheet

Read more

May 21, 2016

CSShakeの使い方と紹介

2016-05-21
web blog css shake シェイク

今回はブルブル震えて注目してしまう動きCSShakeをご紹介します。

jQueryのプラグイン jRumble とかでもありますが今回は簡単に導入できて実装できるCSSでのご紹介です。

CSSShake公式サイトからダウンロードして使います。こちらの公式サイトにも使い方は載っておりますが、簡単に説明します。

インストールはnpmかbowerよりできます。公式サイトからダウンロードしても良いです。

Read more

May 7, 2016

HOVER.CSSの使い方

2016-05-07
web blog css hover

今回は手軽にhoverアニメーションできるhover.cssのご紹介です。hoverしたら動きが実装できます。

以前 CSS3でのアニメーションライブラリanimate.cssの使い方のご紹介しましたが、今回はhoverに特化していますのでcssを読み込んでクラスを付加するだけでhoverするときに限りますが簡単にアニメーション実装できます。

Hover.css公式サイトにもサンプルがあります。デモページの内容はこちらの公式サイトと同じです。

Read more

Apr 9, 2016

CSS3でのアニメーションライブラリanimate.cssの使い方

2016-04-09
web css animate アニメーション

ウェブ上でも最近は動きのある要素を取り入れているサイトも多くなってきました。アニメーション動作を取り入れる場合はJavaScript(主にjQuery)が多いのですが、実はCSSだけでも動きのある要素を出すことも出来るんです。まずは公式サイトで動きを確認します。いろいろ出来ますね。

CSS3になって出来る要素がだいぶ増えてきました。JavaScriptでしか出来なかったこともCSSだけで出来る要素も増えてきたので下記のようなブログなどをチェックしてみると良いでしょう。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

CSS3は要素によってはまだ対応していないブラウザもありますので HTML5/CSS3ブラウザ対応状況確認のサイトなどでどのブラウザ対応状況を確認してみると良いです。

Read more

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
anime.jsの使い方

今回はオブジェクトに動きを加えたり、ちょっとしたアニメーションを付け加えるのにとっても役立つアニメーションライブラリのご紹介です。 anime.jsはとっても軽量でかつ簡単に使えるので去年あた...

18 Feb 2017

アイキャッチ
鳥取県米子市の大雪での現状報告

先月に続いてまた大雪です。鳥取市の方がだいぶ雪が積もっていますね。90cmとは。。。 先月同様駐車場から出られないほど雪が積もりました。今日は雪かきで疲れました。。。週末で助かった部分がありま...

12 Feb 2017

アイキャッチ
親要素をクリックしたら子要素のリンクを発動させる方法

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。 例えばli要素の中にdi...

04 Feb 2017

アイキャッチ
ワードプレスでデバッグログをダッシュボードに表示させる方法

ワードプレス運用中のサイトのエラーログを出力させてそれをダッシュボードで見る方法をご紹介します。 ログ出力方法は結構いろいろなサイトに書かれているのですがそれをダッシュボードに表示させる方法が...

28 Jan 2017

アイキャッチ
bttn.cssで簡単にボタン作成

簡単にボタンが設置できるbttn.cssのご紹介です。数も12種類のボタンだけで色と大きさが指定できます。 容量も少ないのでさくっと出来ます。下記公式サイトからダウンロードして使うかcdnjs...

21 Jan 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ