Asial Blog

Recruit! Asialで一緒に働きませんか?

タグ「CSS3」の一覧

Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript
アニメーション
CSS3
MovieCropデモ
ハイブリットアプリ開発に使えるスマートフォン対応のアニメーションライブラリをまとめました。

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
JavaScript
CSS3
クロスブラウザ
icon
iframeを使って外部サイト(自分で更新できない)を表示したいときに、
iframe内のコンテンツを拡大縮小する方法

サイトコンテンツを固定幅のまま、あらゆるブラウザで、
ウィンドウサイズに合わせてピッタリに拡大縮小する方法

HTML5プロフェッショナル認定試験レベル1 受験記

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
資格
icon
・HTML5プロフェッショナル認定試験とは
・試験の対象職種
・出題範囲
・勉強方法
・受験結果

画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応)

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
icon
こんにちは、鴨田です。

何らかの要素が縦横中央揃えになっているデザインが結構な頻度で出てきます。
デザイナーとしては見栄えを考えてそうしているのですが、
コーダーとしては、横方向はまだしも縦方向の中央揃えは何かと面倒だったりします。

いくつかケースがあると思うので、それぞれに関して自分ならこうする、
というコーディングをしていきたいと思います。

CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう

カテゴリ :
バックエンド(プログラミング)
タグ :
HTML5
CSS3
CSS
1024ピクセル_1
CSS3のメディアクエリを使って、動的にサイトのデザインを変更する方法についてご紹介致します。この方法を利用することで、Webサイトをスマートフォン・タブレットの両方に対応することができます。

CSSだけで作るアイコン付きボタンの作り方

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
デザイン
ボタン
icon
こんにちは、鴨田です。

近頃はボタンのデザインに限らず、CSSで実現できるものは、
グラフィックにせず、CSSだけで書いています。

ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、
最近はあまりPhotoshopを開くこともなくなってきています。

ということで、本日はCSSだけで作るアイコン付きボタンの作り方です。
アイコン付きというのがポイントです。

【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか!

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
iPhone
Android
CSS3
icon
こんにちは、相変わらずドラクエ10三昧の橋本です。
最近はライノス道場に通っています。


さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います(いつも忘れるので)。

決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
jQuery
icon
こんにちは、鴨田です。

年の瀬ですね。
年をとる毎に一年があっという間に過ぎてしまうので、
もう今年も終わりかと嘆く日々です。

ということで、個人的には今年最後のブログとなります。

スマホサイトを作っていると、
見出しリストの作り方というのが、大分テンプレート化するので、
今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。

もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
iOS
Android
01.png
こんにちは、鴨田です。

最近、アイコンがセットされたWebフォントを使うことで、
画像を使わずにアイコンを表示するという手法が流行っていますね。

すごく興味はあったのですが、なかなか使う機会もなく、
便利そうだなと思っていただけで、今まで使ったことがありませんでした。

しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。
(プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・)

CSS Filter Effectsの使い方

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
CSS3
HTML5
CapturFiles-7月-04-2012_08.06.50.png
こんにちは、橋本です。

今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。
途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。