HTML

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

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

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

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

Javascriptで選択範囲の文字列・DOMを取得、操作する方法

Javascript で選択中の文字列を取得する window.getSelection – Web API インターフェイス | MDN ブラウザ上のコンテンツを選択状態にし、選択された文字列部分を取得するには、window.getSelection 関数を使います。 window.getSelection 関数は選択範囲を Selection オブジェクトとしてを取得します。Sel […]

CSS

position: sticky; を使ってスクロールに追随する固定要素を作る

CSSでスクロールに追随して位置を固定させたい スクロールしてもある位置で固定され続けるような要素を実現するためのCSS、position: sticky; の使い方についてまとめます。 例えば画面上部で固定表示されるヘッダーや、画面をスクロールして画面上部まで来た時点で固定されるようなサイドメニューなどです。jQueryなどを使って実現できますが、新しいCSSの position: sticky […]

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

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

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

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