Web活メモ帳 » html http://blog.verygoodtown.com WEB開発者が使える世界の情報を発信します。 Thu, 09 Feb 2012 02:01:28 +0000 http://wordpress.org/?v=2.8.6 ja hourly 1 最近公開されたハイセンスなHTML/CSSテンプレート集 http://blog.verygoodtown.com/2011/04/free-css-templates-2011/ http://blog.verygoodtown.com/2011/04/free-css-templates-2011/#comments Mon, 18 Apr 2011 00:50:11 +0000 linja http://blog.verygoodtown.com/?p=6863 ハイセンスなHTML/CSSテンプレートを探している。
そんな方におすすめなのが「20 Fresh Free CSS Templates」。

以下のような素敵なテンプレートをまとめてくれています。

20110416-01
20110416-02
20110416-03
20110416-04
20110416-05
20110416-06
20110416-07

個人利用、商用利用がOKなものがほとんどになっています。
使ってみたい方は下のリンクからどうぞ。

]]> http://blog.verygoodtown.com/2011/04/free-css-templates-2011/feed/ 0 CSSだけで各種ソーシャルメディアのアイコンを作る方法 http://blog.verygoodtown.com/2010/03/pure-css-social-icons/ http://blog.verygoodtown.com/2010/03/pure-css-social-icons/#comments Mon, 15 Mar 2010 00:10:37 +0000 linja http://blog.verygoodtown.com/?p=3326 20100315-06
ソーシャルメディアのアイコンをCSSとHTMLだけで作ってしまった「Experimental: Pure CSS social media icons」というエントリーのご紹介。

IE系では動作しないようですが、面白いサンプルがありました。

詳しくは以下

動作デモ

JavaScriptも画像も使用しないで次のようにロゴを再現しています。

■ Firefox3.6

20100315-01

■ Safari4.0.5

20100315-02

■ IE8

残念ながら、四角くなってしまってます。

20100315-03

■ Chrome

20100315-04

■ Opera10.5

20100315-05

デモを見ていただくと、実際の様子がわかります。
将来的にはこういった技術を使用してリソースの節約をしていけるかもしれませんね。

]]> http://blog.verygoodtown.com/2010/03/pure-css-social-icons/feed/ 0 Androidでwebサイトを開発する際に使える無料アプリ http://blog.verygoodtown.com/2010/03/android-website-develop-userful-app/ http://blog.verygoodtown.com/2010/03/android-website-develop-userful-app/#comments Fri, 12 Mar 2010 01:20:36 +0000 linja http://blog.verygoodtown.com/?p=3274 20100311-09
Androidからサイトの開発やデバッグを行えるアプリをまとめた「5 Free Android Apps for Web Developers」というエントリーのご紹介。

HTMLのソースの確認やFTP接続などをAndoroidから実行できるようです。
※ Androidの実機を持っていないので、動作確認はしておりません。

詳しくは以下

HTMLeditor

HTMLを作成してその場でプレビューできるアプリ

20100311-10

ダウンロード

AndFTP

Android携帯からFTP接続が可能になります。
FTP、 SFTPをサポートしています。

20100311-11

ダウンロード

View Web Source

サイトのソースを表示する事ができます。


20100311-12

ダウンロード

Magic Color Picker

Webデザインのアイデアのために。

20100311-13

ダウンロード

HTML Test

正しいHTMLの知識をテストするクイズアプリ。

ダウンロード

]]> http://blog.verygoodtown.com/2010/03/android-website-develop-userful-app/feed/ 0 CSS3でHTMLを回転させるjQueryプラグイン「Animate CSS Rotation and Scale」 http://blog.verygoodtown.com/2010/02/css3-html-rotation-jquery-plugin-animate-css-rotation-and-scale/ http://blog.verygoodtown.com/2010/02/css3-html-rotation-jquery-plugin-animate-css-rotation-and-scale/#comments Wed, 10 Feb 2010 13:03:31 +0000 linja http://blog.verygoodtown.com/?p=2115 Rotation
Animate CSS Rotation and Scaleを使用すると、どんなHTMLでも回転させる事ができるようになります。

って、どこで使うんだろう。誰かのヒントになればって事でご紹介。

使い方

まずは、jQueryとプラグインを読み込みます。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>

その後に、プラグインを有効化すれば動作するようです。

<script>
setInterval(
    function () {
        $('#at_ex1').animate({rotate: '+=10deg'}, 0);
    },
    200
);

$('#at_ex1').click(
    function () {
        $(this).animate({scale: '+=0.33'}, {queue: false, duration: 1000});
    }
);
</script>

Google Mapを回転させる

googlemap
このプラグインを使ってGoogleMapを回転させている方がいました。
デモはこちら
‘L’と’R'キーを使用して、地図を回転させる事ができます。

こんな事もできるんですね。

]]> http://blog.verygoodtown.com/2010/02/css3-html-rotation-jquery-plugin-animate-css-rotation-and-scale/feed/ 0 htmlを貼りつけると必要なCSSを書き出してくれるWEBサービス「PrimerCSS」 http://blog.verygoodtown.com/2010/02/html-change-css-selecter-web-service-primercss/ http://blog.verygoodtown.com/2010/02/html-change-css-selecter-web-service-primercss/#comments Mon, 01 Feb 2010 02:50:38 +0000 linja http://blog.verygoodtown.com/?p=1538 primercss
ちょっと便利だと思ったのでエントリー。PrimerCSSはCSSを作成する際に必要な class指定やid指定をhtmlから抜き出してくれるWEBサービスです。

例えば以下のようなhtmlを入力してみます。






hogehoge

するとCSSに必要な要素のみを抽出して表示してくれるのです。

/* CSS Generated by Primer - primercss.com */

div#container {

}

div#header {

}

div#content {

}

div#main {

}

div.clearer {

}

div#footer {

}

p.copyright {

}

これは使い方によっては結構便利かもしれません。
興味がある方はぜひ使ってみてください。

]]> http://blog.verygoodtown.com/2010/02/html-change-css-selecter-web-service-primercss/feed/ 0