ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - HTMLの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2013/04/17

いつぞやのつぶやきをiPadを使っていつでも閲覧「Twitter Archive Viewer」

Twitter Archive ViewerはTwitterアーカイブを取り込んでiOSアプリとして表示するソフトウェアです。Twitterの自分の過去のツイートを全てダウンロードする機能が日本でも提供されています。HTMLで提供されていますが、それをiPad/iPhoneで見られるようにしたのがTwitter Arc...

List

  • 2013/04/16

美しいWebサイトはDOM構造も奇麗なはず!「DomTree」

DomTreeはWebサイトのDOM構造をツリー化してくれるビジュアル化ソフトウェアです。奇麗なHTMLはソースを見てもやはり奇麗に記述されているものです。さらにDOMの構成において奇麗にできているかどうか可視化してくれるソフトウェアがDomTreeです。Googleです。73エレメントで作られています。MOONGIF...

List

  • 2013/04/07

レスポンシブなフラットUIなWebデザインをご希望なら「Almost Flat UI」

Almost Flat UIはFoundation Framework用のフラットUIテーマです。最近のWebデザインの人気のカテゴリの一つがフラットUIです。日本ではまだまだ導入事例は多くないですが、海外のWebサイトでは取り入れているところが増えています。そこでFoundation Frameworkをベースにデザ...

List

  • 2013/04/04

サイズが大きくなりがちなHTMLソースをコンパクトに「htmlcompressor」

htmlcompressorはHTMLソースコードをコンパクトにしてくれるJava製のライブラリです。Webサイトは自然と縦長になりがちで、サイト構造も複雑になりつつあります。その結果、HTMLのサイズが肥大化してしまうのではないでしょうか。そこで使ってみたいのがhtmlcompressorです。コマンドラインで実行し...

List

  • 2013/03/28

メールのためのレスポンシブWebデザインフレームワーク「Antwort」

AntwortはレスポンシブなHTMLメールを実現するスタイルシートフレームワークです。HTMLはWebブラウザを使って閲覧するのに用いるのが基本ですが、他にも使われることがあります。その一つがHTMLメールです。独自の知識が必要になることもあるのですが、Antwortを使えばそのエッセンスだけすぐに得ることができます...

List

  • 2013/03/16

試そう!Google ChromeのWeb Speech APIを使ったゲーム「FlashCards」

FlashCardsはGoogle ChromeのWeb Speech APIを使った音声入力によるフラッシュカードゲームです。目の前にぱっぱっと出されていくカードの答えをどんどん答えていくフラッシュカードというトレーニングがあります。それをWebブラウザ上で体感できるのがFlashCardsです。ゲーム画面です。お題...

List

  • 2013/03/15

シンプルなフラットを追求したデザインテンプレート「Flat UI」

Flat UIはプラスチック的質感を持った柔らかいデザインのテンプレートです。格好いいUIのWebサービスを作るかどうかで最初のウケは全く違ってくるでしょう。Bootstrapで作るとどうも臭いがとれなくて…とお悩みの方はFlat UIを使ってみましょう。基本的なオブジェクト。ボタンやメニューです。フォーム系。タグやト...

List

  • 2013/02/21

MarkdownやHTMLファイルを添削、差分表示対応に「CriticMarkup」

CriticMarkupはMarkdownやHTMLファイルを差分表示するマークアップと関連ツールです。Markdownはライトなマークアップ言語ですが、文章を書くだけでなく編集作業においても役立てようと言う試みがCriticMarkupです。HTML出力した例です。差分が表示されています。こちらがオリジナル。こちらが...

List

  • 2013/02/16

Android用のスマートフォンサイトを作るなら「Holo Web」

Holo WebはAndroid 4系で使われているHoloをモチーフにしたHTMLテンプレートです。Android 4.0ではデフォルトのテーマとしてHoloが採用されています。そこで今回はHolo風のWebサイトが作れるテーマ、Holo Webを紹介します。ライトなテーマ。チェックボックスやスライダーも動きます。こ...

List

  • 2013/02/15

iPhoneアプリの紹介ページを作る際にどうぞ!「iPhone App Splash Page」

iPhone App Splash PageはiPhoneアプリの紹介ページ用HTMLテンプレートです。せっかくiPhoneアプリを作ったならば、格好いいアプリケーション紹介ページを作りたいものです。しかし開発リソースやデザインリソースがない場合もあります。そんな時にはiPhone App Splash Pageを使っ...

List

  • 2013/02/02

JavaScriptのコード無しでWeb APIからデータ取得、表示まで実行「爆速JSONP」

爆速JSONPはJavaScriptのコーディングレスでJSONPで取得したデータを表示する処理を行うライブラリです。去年くらいからのYahooはとりあえず何でも爆速をつけておこう的な雰囲気が感じられますが、ついにオープンソース・ソフトウェアまで爆速がつくようになりました。今回はJSONPを使った表示処理エンジンである...

List

  • 2013/02/02

Windows8 Style UIに似た見やすいパネル型天気予想「Expanding Overlay Effect」

Expanding Overlay EffectはWindows8 Style UIを模した天気表示ソフトウェアです。ここ最近Metro UI(現Windows8 Style UI)を模したWebサービスを目にすることが増えてきました。Windows8のシェアが増えればさらに多くなるかもしれません。今回はWindows...

List

  • 2013/01/26

今風でエレガントなUIのRedditフロントエンド「Reeddit」

ReedditはHTML/JavaScriptで作られたRedditの読み取り専用Webアプリケーションです。RedditにはIT系の面白い情報が沢山集まっており、ギークな人たちが日々アクセスしています。そんなReditをより快適なインタフェースで閲覧できるのがReedditです。左からカテゴリー、スレッド、投稿一覧と...

List

  • 2013/01/24

聴衆を引きつけろ!上下左右にスライドが切り替えられるダイナミックプレゼンテーション「Flowtime.js」

Flowtime.jsはダイナミックなアニメーションがついたHTMLスライドソフトウェアです。最近、HTMLスライド作成ツールが増えている気がしますが、Flowtime.jsもその一つです。スライドが並んだ形で、上下左右に移動できるのが特徴です。スライドは上下左右に移動できます。基本は下に移動します。右下に今、自分がい...

List

  • 2013/01/18

CMSに組み込みたい、見たままにページの編集を行うJavaScript「Create.js」

Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。メイン画面です。この時点では...

List

  • 2013/01/16

HTMLを解析して目次を生成「TOC」

TOCはJavaScriptを使ってフローティングの目次を生成するソフトウェアです。TOCとはTable of Contentsの頭文字を抜き出したもので、日本語で言えば目次になります。HTML上の構造を解析してTOCを生成してくれるライブラリがTOC(jQuery Table of Contents Plugin)に...

List

  • 2012/12/31

システムの状況を可視化するGraphiteとともに使いたい「Giraffe」

GiraffeはGraphiteのグラフをより見やすくフレキシブルにしてくれるソフトウェアです。システムのステータスなどをグラフ化してリアルタイムモニタリングできるツールは多数ありますが、その一つであるGraphiteのUIを見栄えよくしてくれるのがGiraffeです。ダッシュボードです。データをシリーズごとにフィルタ...

List

  • 2012/12/27

WebサイトのレスポンシブWebデザイン対応具合をチェック「Responsive Design Testing」

Responsive Design Testingは各デバイスのウィンドウサイズごとの表示が確認できるソフトウェアです。レスポンシブなWebデザインテクニックはオンライン上に多数ありますが、それをどう活かし、どう実現するかは個々のデザインにかかってきます。そしてそれがちゃんと適用されているかどうかは実際に確かめてみるほ...

List

  • 2012/12/25

WiiUブラウザで遊べるスーパーマリオ風ゲーム「Super Maryo World for WiiU」

Super Maryo World for WiiUはWebブラウザ(WiiUブラウザ)で動作するマリオブラザーズ風ゲームです。ゲームと言えばマリオを挙げる方は多いでしょう。そこでWii UのWebブラウザでも動作するSuper Maryo World for WiiUを紹介します。ゲームトップです。基本操作は下に書い...

List

  • 2012/12/22

絵師×Tumblrなテーマ「Illustfolio」

Illustfolioはイラストレータ向けのポートフォリオになるTumblrテーマです。Tumblrにはテキストよりも画像を格好よく配置したブログがとても良く似合います。そんなTumblr向け、イラストのポートフォリオに特化したテーマがIllustfolioです。トップページ。もはやTumblrと言われないと分からない...