HTML・CSS

rootを使った変数のやり方メモ。/* ここが変数の格納場所 */:root { --my-background: #000;}/* var()で変数を代入 */#foo { background-color: var(--my-background);}

よく使うけど、度々調べてるので、メモ。JavaScriptvar nav_pos = $("header").offset().top;var nav_height = $("header").outerHeight();$(window)

いつも忘れるので、自分用メモ。::before{font-family: "Font Awesome 5 Free"; content: '\f1d8'; font-weight: 900;}参考サイトGoogleのマテリアルアイコンを使用する場合はこちら。

iPhone5までは幅320pxで調整出来ましたが、iPhone6・iPhone6 Plusになって幅が大きくなったためそのためのCSSを入れないといけません。参考より、こちらで対応できます。/* iPhone6のみ */@media screen and (min-width:

長いURL等を貼り付けているとその単語分の幅がないと折り返してしまってうまく改行してくれません。そんな場合はcssで対応しました。対応したい要素に対して下記1行で対応できます。word-break: break-all;以上で対応できます。HTML5+CSS3

PC用サイトをスマホで表示させる際にうまく表示させることが出来ず幅が足りない場合があります。この場合下記のコードがheadに入っていないか確認してみてください。<meta name="viewport" content="width=device-wi

ガラケーのHTMLを作ることがあるので、テンプレートをおいておきます。これでHTMLを作って文字コードをShift_JISで作ればとりあえずの形はできます。<?xml version="1.0" encoding="Shift_JIS"?

html5から<video>タグを使用して動画を簡単に再生させることができます。IE8以下には対応していないので、Javascriptを読み込まして対応させる必要があります。基本の書き方はこんな感じ。<video preload="none" p

css3を使えば文字やボックスに影を簡単に付けることができます。通常はPhotoShopで影の加工をしてそれを使用しますが、cssでできるのであればサイトが自由に作れますし、更新の手間が省けます。まず文字の影の付け方です。text-shadow: 1px 1px 3p

お問い合わせフォーム等で入力欄に事前に文字が入っているのを見たことありますか？あれが入っていると相手としては何を入力すればよいのかわかりやすいので、是非導入したい！HTML5だと実は簡単に導入できます。inputタグに下記を加えます。こちらで問題なく表示されます。