PugでHTMLタグ部分に変数を使用する
Pugを使用する際、HTMLタグ部分で変数を使って出し分けたいことがあったので、変数を使用する方法を試してみました。...
HTML・CSSの記事一覧
Sassで最終的なCSSの出力形式を指定する
Sassのオプションで、最終的なCSSの出力形式を指定するoutputStyleの値を試してみます。...
loading属性を試してみる
画像やiframeの遅延読み込みを実装できるloading属性を試してみます。...
Adobe FontsをWebフォントで使用する
Adobe Fontsを使ってWebフォントを実装する機会があったので、使用するまでの流れをメモ。...
formのtype=”reset”の挙動について
input type=”reset”を使うことがあまりなかったので知らなかったのですが、リセット...
IEでselectboxの矢印を非表示にする
以前にselectのデザインを変更するやフォーム要素のスタイルをリセットするの記事内で、IE以外でselectboxの矢...
template要素を使ってみる
JavaScriptでインスタンスの生成・操作ができるHTMLテンプレートを用意できる「template要素」を使ってみ...
flexbox内の画像にmax-widthを指定した際にIEで崩れる
flexbox内の画像にmax-widthを指定した時に、実際の画像サイズが指定サイズより大きいとIEではみ出してしまう...
autocomplete属性を使ってみる
フォーム入力時に候補を表示して、自動補完させることのできるautocomplete属性を使ってみます。...
1行目だけ1文字ずらそうとしてうまくいかなかった時の対応方法
擬似要素で行頭に「・」を追加して、1行目だけ1文字分ずらそうとした際にうまくいかないことがあったので、その際の対応方法を...
CSSでチェックボックスをiOSのスイッチの見た目にする
iOSのスイッチのような見た目をチェックボックスで作る機会があったので、実装方法をメモ。...
ページ内リンクで上部に固定配置の要素がある場合の対応方法
サイト全体で共通ヘッダーが上部固定で追従する場合、ページ内リンクの位置をずらす設定はJavaScript側で対応できます...
line-clampで文章を省略する
CSSのline-clampプロパティを使って、文章を複数行で省略してみます。...
円周上を移動するアニメーションを実装する
以前にJavaScriptを使って円周上を移動する処理を別の記事で紹介しましたが、今回はCSSで円周上を移動する処理を実...
chromeで画面幅によって背景画像が見切れる現象
chromeでブラウザ幅を変更した際、幅によって背景画像が見切れたり見切れなかったりする現象に遭遇したので、その際の対応...
selectで初期値を選択できないようにする
フォームでselectを選択する際、「選択してください」のような初期値を選択できないようにする実装をしているサイトを見か...
iOSでフォーム入力時に画面がズームされる
iOSでフォーム入力時時に、画面がズームされてしまう問題を対応する機会があったので、調べた内容をメモ。...
HTMLメールでメイリオを指定するとOutlookで行間がおかしくなる
HTMLメールでフォントにメイリオを指定した際、Outlookで行間がおかしくなることがあったので、そのときの対応方法を...
Macでスクロールバーを表示する
Macではパソコンの設定によってはスクロールバーが表示されないので、サイト側の設定で表示できるか試してみました。...
PugをHTMLで記述する
基本的にはHTMLタグで記述して、一部だけPugのインクルードの機能などを使いたいということがあったので、可能かどうか試...