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

技術 - HTMLの記事一覧

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

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

もっと見る

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です...

List

  • 2017/10/25

Markdown Resume Generator - Markdownからレジュメを生成

英語圏の企業に就職しようと思うと、向こうのフォーマットに合わせた履歴書(レジュメ)が必要になります。インターネットで探せば幾つも見つかりますが、開発者らしいレジュメがどれであるかは分かりづらいかも知れません。そこで使ってみたいのがMarkdown Resume Generatorです。MarkdownからHTML/PD...

List

  • 2017/10/07

Slide Presentation Framework - HTMLスライドのフレームワーク

HTMLでプレゼンテーションを作るケースが増えています。HTMLであれば専用のソフトウェアを使わずに済み、バージョン管理も簡単です。さらにアニメーションなどは難しい分、逆にコンテンツに集中できるのが利点です。最近ではMarkdownベースのものが増えていますが、今回紹介するSlide Presentation Fram...

List

  • 2017/08/02

Paradeiser - ハンバーガーメニューに代わるモバイル向けメニュー表示

モバイル向けのWebサイトではメニュー表示にハンバーガーメニューがよく使われます。しかし、実際のところハンバーガーメニューが一般的に分かりやすいわけでもありません。むしろタップして何が出るのか分からず躊躇してしまう人が多いでしょう。そこで使ってみたいのがParadeiserです。ハンバーガーメニューに変わるメニュー機能...

None

  • 2017/07/27

androidify - HTMLファイルをAndroidアプリ化

Webサイトをスマートフォンアプリ化して欲しいという要望は非常に良く聞かれます。それを可能にする技術としてCordovaがよく知られていますが、多少癖があると感じる人もいます。もっと簡単に、単にHTMLをラップするだけで十分というケースもあるでしょう。そこで使ってみたいのがandroidifyです。コマンド一つでHTM...

List

  • 2017/07/02

StatiCrypt - HTMLをパスフレーズで暗号化

もしあなたがスパイで、本国に安全にメッセージを送らないといけないとしよう(そんなシチュエーションがあるかどうかはさておき)。メッセージはテキストだけでなく、文字装飾がないと分からないものだったとしたら、HTMLで送るのが良さそうだ。しかし素のHTMLではネットワークをモニタリングされていたら読まれてしまうかも知れない(...