HTMLエンコード／デコード | devroom
HTMLエンコード／デコードとは HTML内で次のようなタグ（<img>）を表現することはできません。言わずもがなですが、その文字列自体がHTMLとして解釈されてしまって文書構造が変わってしまうからですね。 <!-- HTML内ではタグを文字としては書けません（こんなふうには書けません） --> <html> <body> 画像には<img>タグを使う </body> </html> HTMLのコードの中でHTMLのタグを表現するためには、括弧（< >）を別の文字（< >）に置き換える必要があります。 <!-- HTML内ではタグを含む文字列をHTMLエンコードしておきます --> <html> <body> 画像には<img>タグを使う </body> </html>
FlexBoxの使い方（４）〜display:inline-flexについて（動画あり） | IT工房｜AI入門とWeb開発
「inline-flex」を簡単に説明すると「inline-block」の拡張版と言えます。 「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。結構万能に使えますので有効に活用しましょう。 メリット flexコンテナに「display:inline-flex」を設定するとflexアイテムに幅を指定しなくても勝手に中身依存の幅になること。 flexコンテナの親要素に「text-align:center」をかけると中央に揃います。 FlexBoxの様々なプロパティがそのまま使えます。 デメリット 中央揃えに「margin:auto」が使えないこと。親要素に「text-align:center」を設定すると別の要素に影響が出る可能性があること。 対策としては親要素にdisplay:flexを設定して、justify-content:centerにすればこの問題は
ヘッダを固定してスクロールする方法 | CSS解説
対象とするテーブルではヘッダ部をthead要素内に記述し、ボディ部と分離しておきます。 <table> <thead> <tr> <th>A</th> <th>B</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> </tbody> </table> theadとtbodyをブロック要素とし、tbodyのoverflowをscrollとします。 <style type="text/css"> thead, tbody { display: block; } tbody { overflow-x: hidden; overflow-y: scroll; height: 100px; } </style> このoverflowをautoとした場合、Internet ExplorerやFirefoxではスクロールバーが右端のセ
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
FormData オブジェクトの使用 - Web API | MDN
FormData オブジェクトは、フェッチまたは XMLHttpRequest API を使用して送信するためのキーと値のペアの集合をコンパイルできます。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが multipart/form-data に設定されている場合に、submit() メソッドで送信する際に使用するデータと同じ形式です。 const send = document.querySelector("#send"); send.addEventListener("click", async () => { const formData = new FormData(); formData.append("username", "Groucho
[フロントエンド] multipart/form-dataを理解してみよう - YoheiM .NET
こんにちは、@yoheiMuneです。 ファイルアップロードを実装する時はいつも苦戦するのですが、multipart/form-dataというデータ形式を理解できたらすんなりと実装できるようになりました。今日は、ファイルアップロードでは必須とも言えるmultipart/form-dataについて、ブログにまとめました。 目次 サンプルコード 本記事のサンプルをGithubに置いてあります。Node.JSのサーバーで実装しています。実際に動かすと理解の助けになると思いますので、必要あればご参照ください。 コンテンツの種類とは multipart/form-dataを扱う前に、まずは「コンテンツの種類」について理解する必要があります。 フロントエンドとバックエンドとのデータのやり取りでは、html、javascript、png、jsonなど様々な種類のデータを扱います。その際に、どんなデータを
![[フロントエンド] multipart/form-dataを理解してみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d80990ede359a073780852697adcc8f75324a62/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F539.jpg)
テキストの縦方向の中央揃えについて - Qiita
ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。 その場合どのように配置しているでしょうか。 インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、 pタグのようなボックス要素の中にテキストを入れたい場合、 うまいこと配置できないことがあり、 今回は、縦方向の中央揃えについて調べてみました。
縦位置中央揃えvertical-alignが効かない【vertical-align】【display:table-cell;】 - DRYな備忘録
追記: 2017/02/16 今は flex を使うのがいいと思います。 <div style="display:flex; alignItems:center;"> <div>これが親要素に対して真ん中にくる</div> </div> Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ 作者: 谷拓樹 出版社/メーカー: インプレス 発売日: 2014/07/24 メディア: Kindle版 この商品を含むブログ (1件) を見る 【問題】 あるブロック要素の中段に、インライン要素を配置したい。 以下のようにHTMLとCSSを書いたが、実現されない。 HTML <div class="container"> <img src="ritchanperopero.jpg"> </div> CSS .cont
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
注意事項：◆このツールは「＜」「＞」マークを元に、HTMLを見やすく整形してくれる単純なツールです。 ◆不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能を追加しました。 ◆一行の長さは8000バイト以内してください。制限を超えると応答が帰らない場合があります。 ◆当ツールへのご意見、ご要望は "Pika's home"へお願いします。
Create LaTeX tables online
How to use the LaTeX tables generator? Set the desired size of the table using Table / Set size menu option. Enter the table data into the table: copy (Ctrl+C) table data from a spreadsheet (e.g. Google Docs, LibreOffice Calc, webpage) and paste it into our editor -- click a cell and press Ctrl+V or double click any cell to start editing it's contents -- Tab and Arrow keys can be used to navigate
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
複数のclassをセレクタに指定する方法 | Blog hamashun.com
関連リンク 複数のclassをセレクタに指定する方法 複数のclassをセレクタに指定する際のメモ書き 複数のclassをセレクタに指定した際のIEのバグ 2007年5月23日 修正および追記 この記事に対するメモ書きを作成しました。 HTMLに複数のclassを指定する事、ありますよね。 <div class="sample code"> こんな感じの。 んで、CSS側で「sampleとcode、両方のclassに適合する要素」というセレクタを書くには、 div.sample.code { color: red; } こんな感じにすればOK。 もちろん仕様書にも書いてあります。 意外と見かけないから書いてみました。
HTML や CSS を書くのがめっちゃ捗る Emmet を Atom でも使う
Emmet という HTML や CSS の記述がめっちゃ楽になるツールがあります。以前は Zen Coding と呼ばれてたのだけどいつのまにか名前が変わったみたいですね。 Emmet Documentation 例えばエディタ上で nav#menu>ul>li*3 という文字列を <nav id="menu"> <ul> <li></li> <li></li> <li></li> </ul> </nav> と展開できます。簡単なとこでも覚えておくと HTML 書くのがはかどります。 Zen-Coding は Vim では使ってたのですがもちろん Atom でも使えます。 emmet 使い方は簡単、html や PHP ファイルを開いている状態で HTML へ展開する用の文字列を打ち込んだら tab を押すだけです。 Tab キーは keymap.cson ファイルで以下のように設定可能
フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法 - Qiita
フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法HTMLCSSSassscssslim 今回は、基本のformをtableタグを使わずに、きっちり整列させる方法です。 コード量が増えるので、わたしはtableタグがあんまり好きじゃないんです(>o<) でもtableタグを使わないと、きちんとinputとlabelが揃わない状態から抜け出せなくてすごく困っていました。なんとか中央寄せで、それぞれの要素の縦のラインが綺麗に揃う方法を見つけたのでご紹介します。 使うタグは「ul,liタグ」！ ulタグとliタグを使えば、form要素を簡単に綺麗に並べることができます。 まずは基本となるhtmlを書いて、フォームを表示させます。 ポイントは「ul,liタグ」を使うことです！ <form> <ul> <li class="name">
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
[HTML5 入門]HTML5の略された49タグの語源全てを調べた
タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ
![[HTML5 入門]HTML5の略された49タグの語源全てを調べた](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to make background image shrink proportionally to fit button size in javascript?
https://mayer.jp.net/?tag=excel-html-table-%E5%A4%89%E6%8F%9B-%E3%83%9E%E3%82%AF%E3%83%AD
Real-time HTML Editor
GitHub - validator/grunt-html: Grunt plugin for HTML validation, using the official Nu Html Checker (v.Nu)