css

ブートストラップv3からv4の変更点をご紹介

  • 2017-08-27  最終更新日:2017-08-27

ようやくv4のβ版が登場しました。あれから2年です。。。長いですね。

あとはβ版が何個か出たら正式リリースするようなのでもう少しで正式版はリリースしそうです。

多少変わるところはあるかもしれませんがガラッと変わることはなさそうなのでv3との違いを載せておこうかと思います。

実際リリースされたらここの記事も変更するようにします。

現状のv4のマイグレーションドキュメントの翻訳です。Google翻訳を使っているので変な言葉になっているかもしれませんがご了承下さい。適宜に変えております。

もっと見る

テキスト選択させないCSS

  • 2017-04-30  最終更新日:2017-04-30

今回はcssのプロパティのご紹介です。

サイトによってですが選択できないサイトとかを見たことがないでしょうか?あれ?選択できないぞ。。。

これはCSSで制御しているからなんです。いやJavascriptかもしれませんが。。。

最近は(すでに数年前からできますが。。) CSSで制御できるのでそのCSSをご紹介します。

もっと見る

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

  • 2017-01-21  最終更新日:2017-01-21

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

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

CDNJS

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

もっと見る

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

  • 2016-10-24  最終更新日:2016-10-24

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

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

⇒公式サイトはこちら

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

もっと見る

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

  • 2016-06-25  最終更新日:2016-06-25

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

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

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

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

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

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

もっと見る

CSShakeの使い方と紹介

  • 2016-05-21  最終更新日:2016-05-22

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

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

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

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

もっと見る

HOVER.CSSの使い方

  • 2016-05-07  最終更新日:2016-05-07

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

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

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

もっと見る

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

  • 2016-04-09  最終更新日:2017-11-16

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

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

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

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

もっと見る

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

サイト内検索

最近の投稿

アイキャッチ
大江の郷ヴィレッジにいってきました

正月明けの3連休に大江ノ郷ヴィレッジに行ってきましたのでその感想を述べたいと思います。 大江ノ郷自然牧場 場所は八頭町なので鳥取市の下あたり、鳥取市にはちょくちょく行くのですが、鳥取...

13 Jan 2018

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は比較的天候も良く人も多かった気がしますね。 昨年に引き続き勝田神社の夜中に行って参りました。大晦日深夜の初詣は昨...

05 Jan 2018

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/29〜1/4までお休みでございます。 1/5日から営業開始いたします。 よろしくお願いします。 年末年始の営業時間 12/29-1/4 休日...

29 Dec 2017

アイキャッチ
JPEGデータを拡大してもキレイに保存する方法

オンラインで画像を高画質化かつ拡大してくれるとても便利なサイトです。粗い画像でお困りの方は個々で解決できます。結構すごいです。何がすごいってボケボケの画像がシャープにスッキリになります。小さい画...

23 Dec 2017

アイキャッチ
ワードプレスで各カテゴリーページの先頭に固定表示

ワードプレスの先頭に固定表示機能は便利で特定の記事を固定しておく場合にはとても便利です。この機能って基本的にトップページにしか反映されないのでカテゴリーページにも対応できたらと思い設置してみまし...

16 Dec 2017

著者

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

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

タグクラウド

フッターイメージ