Web制作技術

スポンサーリンク
HTML/CSSコーディング

CSSのtransformでクルクル回転するパネルのサンプル

CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。
HTML/CSSコーディング

CSSキーフレームアニメーションを使ったバナーの作りかた

広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。
HTML/CSSコーディング

画像不要CSSだけで作るテキストロゴデザインのTips

WebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつ...
スポンサーリンク
JAVASCRIPT

Googleブログ検索の結果をRSSで取得する方法

小ネタ連投ですが、Googleブログ検索の結果でリストされるページをRSSとして受け取る方法。これまた自分用備忘録。
JAVASCRIPT

RSSフィードURLを検索してJSONで受け取る方法

以前RSSフィードをJSONとして受け取る方法~Google Feed APIの応用という記事で、ある特定のRSSフィードURLからデータを受け取る方法を紹介しましたが、今回は任意のワードを含むであろうブログサイトのRSSフィードURL自身...
HTML/CSSコーディング

ブラウザをテキストエディタっぽく使うサンプルを作ってみたら意外に単純にできますた

なんだかidea*ideaさんの たった一行でブラウザをシンプルなメモ帳に変える方法 という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが…いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。...
HTML/CSSコーディング

CSSで作る立体的なボタンセットのサンプルコード

よく見かける立体感のあるボタンの作りかた。グローバルナビゲーションで使われるような横並びのボタンセットをリストアイテムとした場合のサンプルです。
Design

Google画像検索オプションで再利用可能なイメージを探せるのよ

フリーの画像サイトについては過去に当ブログでも 商用・無料で利用できる国内フリー写真素材24サイト 2012年10月版 こんな記事を書いてますが、実はGoogleの画像検索でもオプション指定で様々なライセンスの画像探せるって知ってました? ...
HTML/CSSコーディング

CSS知らないとハマり続けるfloatboxの貫通問題

CSSでデザインしてて、「あれっ」と思うこと。親要素の中にfloatした子要素を入れると子要素の高さが親要素の高さに反映されず貫通して表示されてしまう問題。基本的なことですが一応整理しておかないといつまでもハマり続けたりするので備忘録を。 ...
HTML/CSSコーディング

WindowsでWebコーディング→Notepad++使えば良いとおもうよ!

まったく、マイクロソフトはWindows8になってさえ未だ標準のテキストエディタは「メモ帳」。文字エンコード変換や高度な検索・置換・編集機能もほぼないに等しく、もうちょっとなんとかならんもんですかね…と思ってるのは私だけではないでしょう。 ...
スポンサーリンク