CSS の border プロパティを使って見出しを装飾しよう – シンプルな見出し

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

『CSS の border プロパティを使って見出しを装飾しよう』 第1弾!(第4弾まであります!!)

CSS の border プロパティを使って見出しを装飾する方法について紹介します.

シンプルな見出しです. 中見出しから小見出しを想定して作りました. CSS もシンプルなので簡単に使えます.

色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

screenshot

Read More

HTML のタグを一度覚えたら一生忘れないようにするためのコツ

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

IT の世界は, よく省略名が使われます. そもそも IT ってのが Information Tecnorogy の略ですしねw

HTML(HyperText Markup Language) も例外ではありません. HTML で使われるタグは, ほぼ省略形で記述します.

例えばテーブル. テーブル系の要素は tr, th, td ってのがありますね. これらの要素を単純にそのまま覚えてしまうとふとコーディングをするときに最初に書くのって tr だっけ? td だっけ?? 中に書くのは th だっけ? tr だっけ??

なんてことになります. HTML 学びたてのかたは経験したことがあるのではないでしょうか?

そこで今回は, HTML のタグを一度覚えたら一生忘れないようにするためのコツを紹介します. 紹介するコツをマスターすればそんなことは一切なくなります.

コツといってもやりかたは簡単で, “タグ名と一緒にその省略前の名前をセットで覚えちゃおう!”ということです.

※最近学生さんに HTML を教える機会があり, その時の説明に使ったコツです. 好評だったのでエントリーにしたのですが超初心者向けなので, 期待外れだったらゴメンナサイ.

screenshot

Read More

超簡単♪ tmlib.js の Canvas クラスを使って様々な図形を描画しよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

今回は tmlib.js を使って様々な図形を描画する方法について紹介します.

tmlib.js ってなんぞや?って方は『JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.』へ.

GitHub Docs

tmlib.js は標準の HTML5 Canvas をラップして機能を拡張しているので 様々な図形を簡単に描画することができます.

単純な図形描画の他にもグラデーションをかけたり, フィルターをかけたり 画像として保存したりってことも簡単にできるのでぜひ使ってみて下さい.

もちろんサンプルは jsdo.it で作成しています. なので, 実際に動かしたり fork してコードをイジったりしてもらえると嬉しいです.

Read More

Microsoft が発表!! JavaScript 系の新言語「TypeScript」を早速触ってみた&使い方紹介

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

つい先日 Microsft が「TypeScript」という新たな JavaScript 系言語を発表しました. Dart, CoffeeScript, JSX 同様 JavaScript に変換して実行することができます.

導入が簡単だったのでさっそく使ってみました.

screenshot

Read More

Node.js でサクッと圧縮! JavaScript 圧縮ライブラリ『UglifyJS』の使い方

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

最近, JavaScript で開発!!って機会増えてませんか?

一昔前まではセキュリティがあまいわ速度も遅い, その上それぞれのブラウザによる独自実装のせいで うんち言語扱いされていた JavaScript.

ですが昨今, HTML5 の普及, 仕様の統一化, ブラウザ戦争の勃発による JavaScript 実行エンジンの高速化で 十分実用できる言語として普及しつつあります.

そんな JavaScript で開発する際に必要になるのがコードの圧縮化です. いくら高速化したといってもスクリプト言語である以上, script ファイルのサイズは, サーバーからの転送速度, コードのパース速度がダイレクトにユーザーの待ち時間に影響します.

今回は JavaScript のコードをサクッと圧縮する方法について解説していきます. 圧縮には NodeJS 上で動く JavaScript 圧縮ライブラリ『UglifyJS』を使用します.

tmlib.js でもバリバリ使わせてもらっているオススメのライブラリです.

screenshot

Read More