Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。
20190130_[Javascript] Webページ印刷時のTips Webページ印刷時の JS, CSS の備忘録 Webページを印刷する際に役立つメモを残します。システムで帳票印刷を手軽に行う際に必要になります。 Javascript で印刷ダイアログを表示する print() を使うことで、印刷ダイアログを表示することができます。 右クリックから印刷メニューをクリックしたり、ブラウザのメ […]
<input type=”file”> で選択できるファイルの拡張子を制限する方法 <input type="file"> でファイルを選択できますが、この時選択できるファイルの種類(拡張子)を制御するには、accept 属性で拡張子もしくはMIMEを設定します。 複数の拡張子を設定もできますし、ワイルドカードを使うこともできます。以下一例です。 & […]
PDFをダウンロードせずブラウザに埋め込んで表示したい PDFのリンクをページ埋め込んだ場合、ビューワーが起動して別ページで表示されたり、ファイルのダウンロードが発生するのが普通です。 そうではなく、ページ内のコンテンツの一部として、PDFを埋め込んで表示したいことが良くあります。 今回は、ページ内にPDFを埋め込んで表示できる Google Docs Viewer の使い方をまとめます。 Goo […]
CSS で超過文字を省略したい レイアウトの調整する為に、要素からはみ出すような文字を省略して表示したいことがよくあります。 例えば、超過した文字を折り返して表示すると要素の高さが揃わなくて不細工になったりする場所や、スクロール表示ができないような場所です。1行で収めたいけど尻切れトンボになってしまうと見栄えがよろしくないという場合、文章末尾に「…」と三点リーダーをつけて、ユーザーに続 […]
CSS でテキストを流れるように動かしたい 表示されているテキストを右から左に流して、あふれたテキストが全部読めるようにスクロールする、みたいな動きをCSSで実装してみます。イメージとしては、駅のホームにある電光掲示板のあの感じです。 Javascriptを使えばいくらでもやりようがあるのでしょうが、今回はCSSのアニメーションを使って実装します。CSSのアニメーションは、IE11以降、モダンなブ […]
ブラウザのパスワード自動補完を無効にしたい 例えばログインフォームなどで、ユーザー名やパスワードを行ってデータを送信する際に、ブラウザがパスワードを保存するか聞いてくることがあります。ここで保存する設定を行うことで、次回以降の訪問時には、ユーザー名とパスワードが自動入力(オートコンプリート)されるようになります。あるいはユーザー名を入力するとパスワードが自動入力されます。 もろもろの事情がありこの […]
XPathとは XPath(XML Path Language)とは、XML形式の文書から、特定の部分を指定して抽出するための簡潔な構文(言語)です。HTML形式の文書にも対応します。 CSSではセレクタを使ってHTML文書内の特定の部分を抽出しますが、XPathはより簡潔かつ柔軟に指定ができるとされています。以下の例はbody以下のリンク要素(hogeクラス)を取り出す書き方です。 CSSセレク […]
aタグ押下時のリンクを無効にしたい aタグ(リンク)押下時にリンク処理を無視したい場合があります。onClick での処理は行いたいけど遷移は無視したい、そんな場合です。その方法を以下に記します。 ページ内リンク(href=”#”) aタグの遷移先のURLを設定する方法がります。href=”#” を aタグ に設定してやれば別ページに遷移させないよう […]
Font Awesome を CSS 上から attr() で指定する方法 例えばボタンにフォントを付けるために次のようなコードを書けます。 <style> #TestBtn1:before { font-family: FontAwesome; content: '\f06e'; } </style> <button id="TestBtn1">button& […]
