「 Web技術 」一覧

知ってるとちょっと役に立つCSSのTipsまとめ

知ってるとちょっと役に立つCSSのTipsまとめ

ちょっとのつもりでCSSサンプルコードチマチマ書いて記事化してたら10件以上たまってました。 基本的に私はWeb屋さんではないので結構いい加減なコーディングしてたりもしますが、WEBサイト制作ではよく使いそうなプロパティについて使い方を説明してますのでなにかと参考にしていただければ。 こういった記事...

記事を読む

CSSで文書の段組表現を行うcolumnプロパティの使い方

CSSで文書の段組表現を行うcolumnプロパティの使い方

CSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。 というわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。

記事を読む

CSSでディスクを回転浮上させるエフェクトのサンプル

CSSでディスクを回転浮上させるエフェクトのサンプル

CSS演出小ネタ連投です。 【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

NO IMAGE

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

以前RSSフィードをJSONとして受け取る方法~Google Feed APIの応用という記事で、ある特定のRSSフィードURLからデータを受け取る方法を紹介しましたが、今回は任意のワードを含むであろうブログサイトのRSSフィードURL自身を検索して取得する方法です。ほぼ自分用備忘録。

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

スポンサーリンク