【HTML5】formのactionをsubmitボタン毎に変える方法(JavaScript不要)
submit前にJavaScriptで書き換える方法がポピュラーなようですが、HTML5ではもっと簡単な方法があります。SPA全盛の現代にはあまりそぐわないですが、ご紹介しておきます。 SubmitボタンでActionをオーバーライドする 実は、HTML5から新たに属性が追加されており、これを指定することでFormのパラメータをオーバーライドすることができます。 以下のようなフォームの内容を、押したsubmitボタンによって複数のエンドポイントに送信できるボタンを追加してみます。 <form action="xxx" method="post"> <input type="text" name="param1" value="value1"> <input type="text" name="param2" value="value2"> <input type="text" name="
HTMLタグだけで PDF を埋め込み表示する方法 - Qiita
今だと、PDF ファイルのページ中の表示を、何も特殊な JS ライブラリを使わずに、HTML だけで埋め込めることが出来るようになったそうです。 ただし iOS の Safari だけ、iOS 10 まで確認しているのですが、うまく表示されないようです。 参考 https://pdfobject.com/static.html object を使う方法 <object data="pdf.pdf#page=2" type="application/pdf" width="100%" height="100%"> <p><b>表示されない時の表示</b>: <a href="pdf.pdf">PDF をダウンロード</a>.</p> </object> concrete5 CMS concrete5 CMS でも無料アドオンがあります。 PDF Viewer https://www.conc
<embed>－HTML5タグリファレンス
<embed>タグは、外部アプリケーションやインタラクティブなコンテンツ、例えば、Flashなどのプラグインを必要とするデータをHTML文書に埋め込む際に使用します。 よく利用されるプラグインデータには、 動画データにはMPEGファイル（.mpg）・FLASHファイル（.swf）・QuickTimeファイル（.mov）等、 音声データにはWAVEファイル（.wav）・AIFFファイル（.aif）・AUファイル（.au）・MIDIファイル（.mid）・ RealAudio（.ra） 等があります。 これらの動画データや音声データは、 ブラウザに追加インストールされたプラグインで再生しますが、再生するデータの形式により必要なプラグインは異なります。 データを埋め込むには、src属性でリソースのURLを指定して、type属性でMIMEタイプを指定します。 src属性とtype属性を同時に指定する
とほほのBootstrap 4入門 - モーダル - とほほのWWW入門
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1"> Launch demo modal </button> <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="label1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="label1">Modal title</h5> <button type="button" c
HTML講座 -フォームとコントロール・id属性
フォームとの関連付けとid属性 フォームコントロールは、基本的にフォームに属しています。そして、そのフォームが送信されたときに、そのコントロールのデータが送られるのです。 フォームコントロールがどのフォームに属しているのかというのは、HTMLの木構造の関係によって決まるのでした。つまり、そのコントロールの要素が属しているform要素によって決まるということです。逆に言うと、あるform要素に属するコントロールは、そのform要素の中にあるコントロールだということです。 ところが、それを覆す属性があります。それがform属性です。全てのフォームコントロールに、このform属性を持たせることができます。このform属性でフォームを指定することで、たとえそのform要素の子でなくても、そのフォームに属すようにすることができます。 しかし、フォームを指定するとはどのようにするのでしょうか。実はその
フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | Tech Blog
この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量的に説明するためFPS（フレームレート）から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
Rails 5.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル - Qiita
2019/12/03追記 Rails 6.0.x 版を書きました ↓ Rails 6.0.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル TL;DR (長い3行で) Ajaxの勉強をするにあたり，Rails上でAjaxするためのサンプルを探していたのですが，Rails 5.xがもともとテンプレとして持っている.html.erbや.coffeeではなく，.html.hamlや.js.erbを使ったものもあり，ヨコ道知識を調べながらになってしまったので，できる限りrails newした状態からの差分が少ない，世界一シンプルなサンプルコードを目指してまとめてみました． ざっくりシーケンス だいたい ↓ のようなシーケンスを実現します． Client-Server間でSession張って双方向通信とかそういうところはRails Framewor
はじめに — Vue.js
最終更新日: 2020年11月7日 Vue.js とは？Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。 あなたが経験豊富なフロントエ
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS | コリス
HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。 ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。 普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。 CMSもサポート テンプレートを簡単に作成できる Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。 レスポンシブ対応 レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。 CMSをサポート 動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。 HTML, CSSのコーディング作業は無し コーディング作業は一切無しで、テンプレー
2018年の最先端フロントエンドエンジニアになろう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからと
HTML5のお勉強 articleとsectionとか - Qiita
前回に引き続きHTML5の勉強。 めっちゃわかりやすい記事があったのでこれ見よう。 構造化タグ HTML5の特徴の1つとして構造化タグと呼ばれるものがある。 今までのHTMLでは、 <html> <body> <div id="header">...</div> <div id="nav">...</div> <div id="container">...</div> <div id="footer">...</div> </body> </html> 上記のようにユーザー側が構造を決め、（おそらく多くは）<div>にidやclassで構造名をつけ、 「ここからはヘッダ、ここからはフッタ…」といったように分類していたが、 HTML5では構造化タグと呼ばれる新しい要素（タグ）が追加され、 「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。 つ
[Java] シフトJISの扱い - Qiita
目的 Java における SJIS と MS932 の相違点と、扱う際の注意点をまとめます。 SJIS/MS932 での値を 0xHHHH 形式で表記していますが、１バイト目が上位、２バイト目が下位、つまり big endian (network byte order)です。 いわゆるシフトJIS いわゆる「シフトJIS」には何種類もありますが、主なものは以下の２つだと思います。 SJIS (Shift_JIS) Microsoft が作成したシフトJIS符号化法を、JIS X 0208 に取り込んだもの。 扱える文字集合は当時のJIS漢字(JIS X 0201/0208)の範囲のみ MS932 (Windows-31J) Microsoftは、日本語用の文字セットをコードページ932として管理しており、MS-DOS時代には各OEMベンダーでコードページの独自拡張を許可していた。 しかしW
![[Java] シフトJISの扱い - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/719997a795082f96791005119e57a4100097d6b4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YSU1RCUyMCVFMyU4MiVCNyVFMyU4MyU5NSVFMyU4MyU4OEpJUyVFMyU4MSVBRSVFNiU4OSVCMSVFMyU4MSU4NCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ODQxMjQ2NzM1NjZhYTQ4NGM2MmY4NDI0YWNlM2NmN2Q%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b3NoaTM4OTExMSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzA1MjM0MWJjY2FiOTA1MmZmM2RhZDA4ZWZjNGVjZWY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D712bb6e2e56f9d6b76cd1e3dc7f02f07)
Shift_JIS と Windows-31J (MS932) の違いを整理してみよう |
いつまでたってもエンジニアを悩ませる問題として「文字コード」があります。 その中でも質が悪いのが Microsoft ページコード 932 いわゆる Windows-31J だと思います。 Unicode がだいぶ普及したとは言え、まだまだ根深い問題です。 本稿では Shift_JIS と Windows-31J の違いについてまとめてみたいと思います。 とは言え筆者自身、Shift_JIS や Windows-31J などが誕生した当時にリアルタイムで歴史を見てきた人間ではありませんので、あくまで Wikipedia をベースに筆者なりにまとめたという点をご了承ください。 (誤りがあった場合にはご指摘頂ければ幸いです) Shift_JIS (CP932) の誕生 Shift_JISは、漢字を含む日本語を表現できる文字コードとして1982年に誕生しました。 Shift_JIS はマイクロソ
＠IT：Javaの文字化け対策FAQ（1）
質問1： Webブラウザが文字コードを判定する基準は何ですか？ 解答：HTTPのContent-Typeヘッダです まずは、Webにおける文字コードの扱いをおさらいしておこう。HTML 4.01仕様では、Webブラウザが以下の優先順位で文字コードを決定することを規定している。 HTTPにおけるContent-Typeヘッダのcharsetパラメータ HTML文書内のMETA宣言およびhttp-equiv属性で設定された、Content-Typeヘッダのcharsetパラメータ HTML文書内の各要素のcharset属性 Webサーバが送信するHTTPヘッダの中には、送信内容がどのような素性のコンテンツなのかをWebブラウザに教えるために、以下のようなContent-Typeヘッダを通じてコンテンツのメディアタイプ（下記例ではtext/html）を明示する。 これによりWebブラウザは、受信
Javascriptを使って階層メニューを制御する - A Day In The Life
階層メニュー用のサンプルを作成しました。 まずクリックしたときに開く/閉じるの制御をするJavaScriptのサンプル function changeDisplay(id){ if(document.getElementById(id).style.display=='none'){ document.getElementById(id).style.display=''; } else { document.getElementById(id).style.display='none'; } } JavaScriptでstyle属性の切り替えを行っています。display='none'はCSSの属性です。 次は表示部のHTMLサンプル <a href="changeDisplay('child')">カテゴリー</a> <ul id="child" style="display:n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
railsプロジェクト内でpdfファイルを表示する方法 - Qiita
Loading...
