30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
<form>の外側に送信ボタンを配置する
Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。 form 属性で紐付け <input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。 <form id="signin"> <label> メールアドレス <input type="email"> </label> <label> パスワード <input type="password"> </label> </form> <input type="submit" form="signin" value="サインイン">
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。 AI CODEの使い方 AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 | 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ横並びを縦並びにするテーブルレスポンシブ疑似要素で見出しを用意するテーブルレスポンシブcontent:attr() で見出しを表現するテーブルレスポンシブspanで見出しを表現するテーブルレスポンシブスクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブPC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので、それらをb
tableのwidth:100%;なのにスマホで表示がはみ出る場合の対処法5選
table width100%なのにスマホで表示がはみ出る場合の対処法もし、table に width 100%を指定してるにも関わらず、 はみ出る場合は、以下をチェックする事で解決できたりします。 table-layout: fixed; を足す単純に最小幅にしても超えてしまうほど幅が広いのではみ出るtable width に px指定が入ってしまってないかチェックするtable width が 100%を超えてしまっているbox-sizing: border-box; を使う table-layout: fixed; を足すtable widthに100%を指定しても、スマホだけハミ出る場合、 styleに「table-layout: fixed;」を足してみてください。 これで直る場合もあります。 <table style="width: 100%; table-layout: fi
【CSS】テーブルの行と列を入れ替える
テーブルでは、行は横に列は縦に表示されますが、今回は図のように行を縦に、列を横に表示するようにしてみます。htmlはそのままで、CSSに数行追加するだけで行と列を入れ替えることができます。 最初に元のテーブルのhtmlとCSSを書いておきます。 .table1{ border: 1px solid #aaa; border-collapse:collapse; } .table1 th, .table1 td{ border: 1px solid #aaa; padding:4px; } .table1 th{ background-color: #ccc; } <table class="table1"> <tr><th>プラン</th><th>価格</th><th>容量</th></tr> <tr><td>X10</td><td>900円</td><td>200GB</td></tr>
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
HTML Living Standard
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
formタグは入れ子にできない＆その対処法 - Qiita
開いたら開発者ツールでDOMをインスペクトしてみましょう。 なんと内側のformタグがいなくなってしまっています。 実はHTMLの仕様として、入れ子のformタグは許可されていません。(詳細な話はこちらにのっています→ html - formタグの入れ子とブラウザーの解釈 - スタック・オーバーフロー) この仕様を知らなかったため、業務で開発しているWEBアプリにバグを入れてしまいました…。 なぜformがなくなってしまうのかわからずフロントエンドで使っているライブラリを疑ってみたり、ダミーのフォームを入れてみたり、いろいろと試行錯誤してずいぶん手間取ってしまいました…。 とはいえ、自分が実際そうしてしまったようにフォームの中にフォームを作りたくなる場合もあるかと思います。たとえば、次のような感じ？メッセージの一覧画面をイメージしてください。 <!DOCTYPE html> <head><
htmlのmeta refreshを使ったリダイレクト設定｜サクラサクラボ
目次 リダイレクトとは HTTPによるリダイレクト htmlのmeta refreshによるリダイレクト javascriptによるリダイレクト リダイレクト方法の使い分け meta refreshによるリダイレクト リダイレクトとは リダイレクトという言葉は「向きを変える）という意味で、主にホームページを移転した場合や特定のページのURLを変更した場合に、新しいURLへアクセスを転送する事を言います。 リダイレクトの方法としては、HTTPレスポンスによるもの、HTMLのmeta refreshによるもの、javascriptによるものがあります。 それぞれのリダイレクトの方法には特徴や注意点があります。順番に見ていきましょう。 HTTPによるリダイレクト 301リダイレクトや302リダイレクトなどで一般的に利用されている方法で、リダイレクトで最も良く使われるものです。 .htaccess
HTMLのPDF化(1) wkhtmltopdfのインストール : エイテック・システムワークスのワーク！
HTMLをPDFに変換できれば、Webアプリケーションが業務システムとして使われる上で大きなメリットになります。ここでは、wkhtmltopdfというコマンドを使って、HTMLをPDFにする方法をご紹介します wkhtmltopdfのWebサイトは http://code.google.com/p/wkhtmltopdf/ 。 まずはwkhtmltopdfをダウンロードして展開、そしてインストールまで。 # wget http://wkhtmltopdf.googlecode.com/files/wkhtmltopdf-0.10.0_rc2-static-i386.tar.bz2 # bzip2 -d wkhtmltopdf-0.10.0_rc2-static-i386.tar.bz2 # tar xvf wkhtmltopdf-0.10.0_rc2-static-i386.tar # l
wkhtmltopdf
What is it? wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing. How do I use it? Download a precompiled binary or build from source Create your HTML
sanitize-html
sanitize-html provides a simple HTML sanitizer with a clear API. sanitize-html is tolerant. It is well suited for cleaning up HTML fragments such as those created by CKEditor and other rich text editors. It is especially handy for removing unwanted CSS when copying and pasting from Word. sanitize-html allows you to specify the tags you want to permit, and the permitted attributes for each of those
<details>: 詳細折りたたみ要素 - HTML | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テーブルのフォントがモバイル端末で小さく表示される場合の対処法 | Blogger101@ブロギングライフ
HTML Standard 日本語訳
aタグでPDFなどの外部ファイルをダウンロードさせるときに使うdownload属性 | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
【intra-mart】formタグの中で別のformを働かせる方法 | 株式会社アースリンク株式会社アースリンク
https://punimeister.com/posts/maintenance-html/
★HTMLタグリファレンス