アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

CSS3

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

ハイブリットアプリ開発に使えるスマートフォン対応のアニメーションライブラリをまとめました。

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

iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小する方法 サイトコンテンツを固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小する方法

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

・HTML5プロフェッショナル認定試験とは ・試験の対象職種 ・出題範囲 ・勉強方法 ・受験結果

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

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

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

CSS3のメディアクエリを使って、動的にサイトのデザインを変更する方法についてご紹介致します。この方法を利用することで、Webサイトをスマートフォン・タブレットの両方に対応することができます。

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

こんにちは、鴨田です。 近頃はボタンのデザインに限らず、CSSで実現できるものは、 グラフィックにせず、CSSだけで書いています。 ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、 最近はあまりPhotoshopを開くこともなくなってきていま…

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

こんにちは、相変わらずドラクエ10三昧の橋本です。 最近はライノス道場に通っています。 さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います(いつも忘れるので)。

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

こんにちは、鴨田です。 年の瀬ですね。 年をとる毎に一年があっという間に過ぎてしまうので、 もう今年も終わりかと嘆く日々です。 ということで、個人的には今年最後のブログとなります。 スマホサイトを作っていると、 見出しリストの作り方というのが、…

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

こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったこ…

CSS Filter Effectsの使い方

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

CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方

こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビ…

【CSS3】HSL色空間による色指定のすゝめ

こんにちは、橋本です。 今日は、知らない人も多いCSS3の隠れた(?)新機能、HSL色空間による色指定について書いてみたいと思います。

Webフォントを使ってみた(前篇)

教育コーディネーターの岡本です。 本日はデブサミで出展者としてMonacaの宣伝をしております。 見かけた方は是非、お声掛け頂ければと思います。 さて、ブログの方ですがWebフォントのお話をしたいと思います。

【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ

こんにちは、橋本です。 今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。 iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。 そんなときにこの記事を参考にしてもらえる…

HTML5+CSS3の導入時に役立つ7つの設定

こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今…