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

技術 - HTMLの記事一覧

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

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

もっと見る

List

  • 2021/05/26

React Email Editor - HTMLメールをドラッグ&ドロップで作成するReact用コンポーネント

HTMLメールを作る際に、一からコーディングするのはとても難しいでしょう。特にレスポンシブに気をつけたり、各デバイスできちんと表示できるかを確認するのは手間も時間もかかります。今回紹介するReact Email Editorを使えばHTMLメールをビジュアル的に作成できます。## React Email Editorの...

List

  • 2021/05/13

HTMLDOC - HTML/MarkdownからePub/PDFなどに変換

HTMLやMarkdownは汎用的なフォーマットで、そこから様々なドキュメントフォーマットに変換できます。これらのフォーマットで書いておくことで、後々別なフォーマットを求められた時にもすぐに変換できるでしょう。今回紹介するHTMLDOCはそんなHTML、MarkdownファイルをGUIで変換できるソフトウェアです。##...

List

  • 2021/04/25

飛行機の離発着風HTML - 空港にある離発着案内風のUI

コロナ禍になかって旅行にも行きづらくなっています。特に飛行機に乗る機会が激減しました。飛行場の日常感、広い空間、ゲートの雰囲気など懐かしい人も多いのではないでしょうか。今回紹介する飛行機の離発着風HTMLは、そんな懐かしさを彷彿とさせるそんなソフトウェアです。## 飛行機の離発着風HTMLの使い方サンプルです。まさにあ...

List

  • 2021/04/20

tg-archive - Telegramのメッセージをアーカイブして静的HTML化

開発者のコミュニティは様々なプラットフォーム上で行われている。たとえば昔であればメーリングリストがありました。今ではSlack、Discord、フォーラムなどが有名です。そしてTelegramを利用しているソフトウェアもあります。Telegramはプライベートなグループにメッセージが暗号化されて保存されますが、メーリン...

List

  • 2021/04/18

htmbox - htmlxを使ったDropbox風のUI

何かの技術をアピールする際にデモアプリを作るのは良い方法です。何ができるのか想像するのは難しいですが、デモアプリを見ることで学べることは多いでしょう。たとえばRailsはブックマークサービスのようなものを10分で作ったりして、その開発効率をアピールしていました。今回紹介するhtmboxはHTMLでAjaxを扱いやすくす...

List

  • 2021/04/17

Codeist - Webのコードをすぐに試せるプレイグラウンド

フロントエンド開発の便利な点は、Webブラウザじ実装されているJavaScriptエンジンでコードをすぐに実行、確認できることでしょう。HTMLやCSSをデバッグすることもでき、開発がさくさくと進められます。そんなフロントエンド開発時にちょっとしたプレイグラウンドが欲しかったらCodeistを使ってみましょう。## C...

List

  • 2021/04/01

CSS Windows 10 - Windows 10風のUIをCSSで再現

WebはもはやOSといっても過言ではありません。多くのアプリケーションが動作し、情報が保存されています。しかしOSとは雰囲気が異なるので、使い方も大きく違います。垣根を越えるためにはOS風のUIが必要です。そんな可能性が感じさせてくれるのがCSS Windows 10です。Windows 10風のUIをCSS/HTML...

List

  • 2020/11/16

sheet2gmap - GoogleシートとGoogleマップを簡単に連携

Googleマップではユーザがカスタマイズしてピンを立てたり、情報を付与する機能があります。便利なのですが、使うためにはJavaScript SDKを使いこなさなければなりません。また、データをどこかに保存しておく必要もあります。そのため利用を控えてしまっていないでしょうか。今回紹介するsheet2gmapは世界一簡単...

List

  • 2020/09/10

Perfect Edition - HTMLとePub対応の電子書籍テンプレート

電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...

List

  • 2020/04/29

HTML DOM - 素のJavaScriptでどうDOMを操作するのか学ぼう

jQueryやVue、Reactなどを触っていると、実際のDOM操作をどう行うのか忘れてしまったりします。DOMを作ったり、追加する、変更するといった操作は意外と面倒ですが、直接行う分、高速であるはずです。HTML DOMはそんなDOM操作を素のJavaScriptで行う方法を学べるWebサイトになります。## HTM...

List

  • 2020/04/19

MVP.css - 素のHTMLでもいい感じの表示に

いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP(Minimum Viable Product)と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。今回紹介するMVP.cssは、WebでMVPを作る時に使えるス...

List

  • 2019/10/02

Universal Résumé Template - 多彩なデバイスに対応したレジュメテンプレート

日本であれば履歴書のフォーマットが一つの形に決まっていますが、多くの国ではそういったものはありません。特定の紙のフォーマットではなく、見やすく自分の経歴や経験を記述するのが肝要になります。今回紹介するUniversal Résumé Templateはとある開発者の履歴書(レジュメ)であり、テンプレートとして再利用でき...

List

  • 2019/09/27

md2html - MarkdownからHTMLファイルを作成するコマンド

MarkdownはHTMLに変換するのが主な機能として作られたドキュメントフォーマットです。多くのMarkdownエディタでHTML変換機能がサポートされていますが、使い慣れたエディタを使いたいという人も多いでしょう。そんな方にお勧めなのがmd2htmlです。CLIで使えるHTML変換ツールです。## md2htmlの...

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はシンプルな...