HTML/CSS

PDFをページ内に埋め込んで表示するGoogle Docs Viewer(スマホ, PC)

PDFをダウンロードせずブラウザに埋め込んで表示したい PDFのリンクをページ埋め込んだ場合、ビューワーが起動して別ページで表示されたり、ファイルのダウンロードが発生するのが普通です。 そうではなく、ページ内のコンテンツの一部として、PDFを埋め込んで表示したいことが良くあります。 今回は、ページ内にPDFを埋め込んで表示できる Google Docs Viewer の使い方をまとめます。 Goo […]

[CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法

CSS で超過文字を省略したい レイアウトの調整する為に、要素からはみ出すような文字を省略して表示したいことがよくあります。 例えば、超過した文字を折り返して表示すると要素の高さが揃わなくて不細工になったりする場所や、スクロール表示ができないような場所です。1行で収めたいけど尻切れトンボになってしまうと見栄えがよろしくないという場合、文章末尾に「…」と三点リーダーをつけて、ユーザーに続 […]

CSS でテキストを流れるように動かす方法(marquee)

CSS でテキストを流れるように動かしたい 表示されているテキストを右から左に流して、あふれたテキストが全部読めるようにスクロールする、みたいな動きをCSSで実装してみます。イメージとしては、駅のホームにある電光掲示板のあの感じです。 Javascriptを使えばいくらでもやりようがあるのでしょうが、今回はCSSのアニメーションを使って実装します。CSSのアニメーションは、IE11以降、モダンなブ […]

ブラウザの自動補間(autocomplete)を無効にしたい

ブラウザのパスワード自動補完を無効にしたい 例えばログインフォームなどで、ユーザー名やパスワードを行ってデータを送信する際に、ブラウザがパスワードを保存するか聞いてくることがあります。ここで保存する設定を行うことで、次回以降の訪問時には、ユーザー名とパスワードが自動入力(オートコンプリート)されるようになります。あるいはユーザー名を入力するとパスワードが自動入力されます。 もろもろの事情がありこの […]

XPathのまとめ、要素の参照方法いろいろ

XPathとは XPath(XML Path Language)とは、XML形式の文書から、特定の部分を指定して抽出するための簡潔な構文(言語)です。HTML形式の文書にも対応します。 CSSではセレクタを使ってHTML文書内の特定の部分を抽出しますが、XPathはより簡潔かつ柔軟に指定ができるとされています。以下の例はbody以下のリンク要素(hogeクラス)を取り出す書き方です。 CSSセレク […]

aタグのリンクを無効化する方法

aタグ押下時のリンクを無効にしたい aタグ(リンク)押下時にリンク処理を無視したい場合があります。onClick での処理は行いたいけど遷移は無視したい、そんな場合です。その方法を以下に記します。 ページ内リンク(href=”#”) aタグの遷移先のURLを設定する方法がります。href=”#” を aタグ に設定してやれば別ページに遷移させないよう […]