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

技術 - HTMLの記事一覧

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

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

もっと見る

List

  • 2019/07/30

Simple HTML Invoice Template - シンプルな請求書のテンプレート

Webが苦手なものとしては、帳票があります。定型で体裁の整った帳票を生成するのは難しく、ついPDFなどに頼ってしまいます。かといって日本語で綺麗なPDFを出すのも難しかったりします。今回紹介するSimple HTML Invoice Templateはまさにその名の通り、シンプルな請求書のテンプレートとなっています。#...

List

  • 2019/06/12

Automatic App Landing Page - アプリ用Webサイトテンプレート

個人または企業でアプリを作っている人は多いですが、それらのランディングページはちゃんと作っているでしょうか。アプリを作るのに必死で、Webサイトは適当になってしまっているケースは多いようです。それではダウンロードにも結びつきづらいでしょう。今回紹介するAutomatic App Landing Pageはアプリ用のWe...

List

  • 2019/05/26

unmht - macOSやLinuxで使えるMHTMLビューワー

IEでよく使われていたファイルフォーマットにMHTMLがあります。MIME Encapsulation of Aggregate HTMLの略で、HTMLの中に画像や動画などを一つのファイルとしてまとめてしまう技術です。オフラインで見たり、画像などのアセットが一つのファイルにまとまるのでヘルプファイルなどでよく使われて...

List

  • 2019/05/22

tetris - 遊びすぎに注意。Webブラウザベースのテトリス

Webブラウザ上で動くゲームは危険です。ダウンロードしたり、インストールする手間もなく、すぐに遊べてしまいます。普段ずっと使っているWebブラウザなので、常に立ち上がっており、いつだって遊べてしまうでしょう。今回紹介するtetrisはWebブラウザ上で動くテトリスです。これはとても危険な存在と言えるでしょう。## te...

List

  • 2019/05/21

AreaMap - 日本/世界のカラム地図

情報の表示として、リストを使った一覧が最もよく使われますが、縦長になってしまうのが難点です。横幅がそれほど必要でない場合、タイル表示にするのも一案です。しかしタイル表示の場合、その並べ方に注意しないとどこにあるのか分かりづらくなります。今回紹介するAreaMapはその一案として面白そうなソフトウェアです。日本や世界の各...

List

  • 2019/04/26

Docsy - オープンソースな仕組みを取り入れたドキュメントサイトテンプレート

読みやすい開発者ドキュメントはDevRelにおいて大事な要件になります。コンテンツはもちろんですが、サイトとしても読みやすくできていなければなりません。文字サイズやインデックス、コードの可読性などが要素として考えられます。今回はGoogleがメンテナンスしているDocsyを紹介します。DocsyはHugo向けのテンプレ...

List

  • 2019/04/05

Aafu - 開発者ならポートフォリオを作ろう

転職などの際に個人のポートフォリオがあるかどうかは大きな意味を持ちます。少なくとも私が面接する立場であればGitHubアカウントとそのリポジトリを見るでしょう。対外的にアピールしていない開発者は雇用されづらくなるはずです。そこで自分が何者であるかアピールできるポートフォリオサイトを立ち上げましょう。Aafuはシンプルな...

List

  • 2019/02/07

Animating URLs with Javascript and Emojis - URLで絵文字を使ったアニメーション

絵文字は世界から認知されるコンテンツになっています。年々文字数も増えており、表現できる情報がどんどん増えています。テキストとしてだけでなくスライドで使ったり、アイコン代わりにしているケースもあります。今回紹介するAnimating URLs with Javascript and Emojisはその名前の通り、アニメー...

List

  • 2019/01/17

Fiddly - MarkdownのREADMEを綺麗なHTMLで表示

MarkdownファイルはHTML生成のために使われることが多いです。生成するタグはごく基本的なものになるので、デザインは利用するWebサイト側に任されています。多くはシンプルなデザインであったり、GitHub風になっています。今回紹介するFiddlyはMarkdownからより綺麗でデザインされたHTMLを生成するソフ...

List

  • 2019/01/09

Wedding Website - ウェディングサイトをオープンソースで

あらゆるものがシェアされ、公開されていく流れは防ぐことができません。コピーされ、流用されるのが怖ければ、いっそのこと自分たちで公開(オープンソース化)してしまう方が競争力にもつながるというものです。そんな時代に私たちは生きています。そんな中、見てみたいのがWedding Websiteです。なんと自分たちの結婚式のサイ...

List

  • 2018/11/26

HTML Notepad - 昔懐かしい雰囲気のHTMLエディタ

HTMLを書くとき、どう行っていたでしょうか。最初はメモ帳などでHTMLタグを手打ちして、しばらくするとタグ入力を補助してくれるソフトウェアが出てきました。さらにWYSIWYGでHTMLを書けるソフトウェアが登場し、最近ではまたタグ入力に戻っています。そんな懐かしいタグ入力補助ツール風のソフトウェアがHTML Note...

List

  • 2018/10/26

ai2html - IllustratorファイルをHTML化

Illustratorで作成したデータを他の人と共有したり、再利用する場合には画像やSVGで出力するのが一般的です。多くの場合、さらに加工すると言うことはなく、閲覧したりコンテンツとして埋め込むことでしょう。今回紹介するai2htmlはIllustratorのファイルをHTML化するソフトウェアです。## ai2htm...

List

  • 2018/10/22

PaginateMyTable - テーブルタグをページネーション可能に

業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれ...

List

  • 2018/09/16

Sketch2Code - 手書きのスケッチからHTMLデザインを生成

アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。##...

List

  • 2018/08/26

TinyEditor - わずか400byteのHTMLプレイグラウンド

JSFiddleやCodePenといった、HTML/JavaScript/CSSのプレイグラウンドサービスが多数あります。クローンサービスもありますし、自分で立てることもできます。しかしあえてサーバサイドの仕組みなどを用意したくはないでしょう。そこで使ってみたいのがTinyEditorです。たった400byte程度のH...

List

  • 2018/06/11

PatternFly - Red Hat製のWeb UIフレームワーク

HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...

List

  • 2018/04/24

Web Code Editor - 実行結果付きのWeb上のコードエディタ

コードを学習する環境は素早く作れるのが理想です。色々なソフトウェアをインストールしたり、セットアップしていたら諦めてしまうでしょう。特にWeb系のように手軽に動かせることを期待されている環境はそうです。PHPやJavaScriptの学習、コードを試す際に使ってみて欲しいのがWeb Code Editorです。## We...

List

  • 2018/03/06

SQLECTRON GUI - SQLECTRONのGUIフロントエンド

コンソール上で簡易的なデータベース管理UIを提供するSQLECTRON

List

  • 2018/01/27

Turndown - HTMLをMarkdown記法に変換

Markdownで作られたコンテンツが増えていくと、すでに作成したコンテンツについてもMarkdownにしたくなるものです。また、自分で使っていた記法が廃れてしまうこともあるでしょう。その結果、Markdownへの乗り換えを余儀なくされます。そうした時に使いたいのがTurndownです。HTMLをMarkdownに変換...

List

  • 2018/01/17

HTA Memo - HTA製のメモ

Windowsではアプリケーションを作る方法が幾つか用意されています。C#などの.NET系言語を使ってもいいですが、簡単なものであればHTA(HTML Applications)が手軽です。HTMLとVBScriptまたはJavaScriptでアプリケーションが作れます。その一例として紹介したいのがHTA Memoです...