JavaScript
JavaScriptでメディアクエリを使用する方法2選
JavaScript JavaScriptでメディアクエリを使用する方法2選
今回はJavaScriptのファイル内でも手軽にレスポンシブ対応ができるwindow.matchMediaについて紹介します。 デバイスを判定してレスポンシブ対応する方法 let userAgent = window.navigator.u...
CSS 長いURLをきれいに表示させる方法２選
今回はURLを綺麗に折り返す方法について書いていきたいと思います。 HPにURLを記載したいときに以下のような状態になった経験はありませんか？ URLが長すぎて、意図した幅よりも飛び出している状態です。日本語だと区切りを自動で付けてくれるの...
CSS placeholder(プレースホルダー)の色や文字の大きさの変更する方法
前回は「placeholderの改行」について記事を解説していますので、是非ご覧下さい。 placeholderに関してはクライアントからカスタマイズするように依頼されることが結構あります。 ・最初から入力されているように見えるので、色を薄...
HTML コピーライトをHTMLで表記する方法とテンプレを公開します
今回はコピーライトのHTMLの書き方を記事にしていこうと思います。 頻繁に記載する機会があるものの、書き方を結構忘れてしますので、備忘録のためにもこちらの記事を公開したいと思います。 コピーライト（©︎）とは？ 簡単に説明すると、著作物に対...
HTML checkboxの値を複数postする方法
今回はcheckboxをpostする際に注意するべきことを書いていきます。 以下のようなHTMLコードがありpostしようとしているとします。 <form action="" method="post"> <div> <label for=...
HTML videoタグで動画をダウンロードできないようにする方法
今回は<video>タグで実装した動画をクライアント側でダウンロードできないようにする方法について書いていこうと思います。 「一般の方の顔などが動画内に映っているので、簡単にダウンロードできないようにできますか？」との要望がありました。 <...
HTML placeholder(プレースホルダ)で改行をする方法（全ブラウザ対応版）
placeholder(プレースホルダ)で改行をする方法 今回はplaceholderに関して書いていこうと思います。以前案件で以下のような要望がありました。 placeholderをデザイン上＋説明が見やすいように改行して実装してくれませ...
HTML videoタグを使用しても動画(mp4)を再生できない場合の対応方法
今回はvideoタグを使用しても正常に動かなかった時に私自身がかなり時間をかけてしまったので、備忘録としても記載していこうと思います。 <video>タグの基本的な使い方 <video> <source src="mv.mp4" type=...
CSS overflow:scroll;を使用した時に表示されるスクロールバーを非表示にする方法
スクロールバーを非表示にする方法 今回は「overflow:scroll;」を設定した時に表示されるスクロールバーを非表示する方法に関して書いていこうと思います。 特にIE, Edgeにおいてデザインの支障になりやすいスクロールバー。せっか...