はじめに
PHP で条件分岐して違う HTML タグや文章を表示したい場合に、なるべくシンプルに HTML を書く方法を調べた。
TL;DR
<?php if (true) : ?><?php endif; ?>のように:とendifを使う
はじめに
Apache2 + PHP でウェブサーバを立てている状況で、非公開ディレクトリ(パブリックでないローカルのディレクトリ)の画像を読み込んで表示する方法を調べた。
※「画像は表示したいが、画像ファイル自体は公開ディレクトリに格納したくない」のような特殊なケース
TL;DR
- 以下を組み合わせて、
<img>のsrcに画像を設定する
はじめに
ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。
本記事は tippy v5 系を利用しているので、最新 v6 系(2020/08/01 現在)と挙動や設定が異なる可能性あり
TL;DR
tippy(<target>, { content: 'my tooltip' })でツールチップを設定<target>はセレクタ(#idなど)でも、Node(document.querySelector('#id')など)でも OK
contentに HTML も設定可能tippy(<target>, { content: '<strong>my tooltip</strong>' })tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })
- 既存テーマを利用する場合は CSS を読み込んで
theme: 'lightのように指定
はじめに
「画像クリックで拡大」を簡単に実現できる imgix/luminous を触る機会があったので、簡単に使い方を整理した。
デモページ を見ると、何ができるのかがすぐわかる。
TL;DR
npm i luminous-lightboxでインストール- CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
- CDN:
<a href="拡大画像"><img src="サムネイル"></a>に対して以下を実行new Luminous(document.querySelector('a'))
- ギャラリー表示の場合は
LuminousGalleryを使用new LuminousGallery(document.querySelectorAll('a'))
はじめに
display, visibility プロパティについて簡単に整理した。
TL;DR
display: none;⇔display: block;(flex, etc…) で要素の 表示/非表示- 表示に影響が出る(他要素の位置が変わったりする)
visibility: hidden;⇔visibility: visible;で要素の 表示/非表示- 表示に影響が出ない(他要素の位置は不変)
display: none;もvisibility: hidden;も、アクセシビリティ(読み上げ)に影響が出る- アクセシビリティを保つにはここを参考(試してない)
はじめに
<img src="xxxx.png"> で xxxx.png が 404 エラーとなったときに、デフォルトで代わりの画像を表示する方法をまとめた。
TL;DR
onerror="this.src = 'alt.png'; this.removeAttribute('onerror')"を指定- エラー時には代替画像を読み込んで、
onerror属性自身も削除
- エラー時には代替画像を読み込んで、
onload="this.removeAttribute('onerror'); this.removeAttribute('onload');も一緒に指定- エラー無し時に
onerror,onload属性を消せる
- エラー無し時に
- 上記をまとめると以下
1 | <img src="404.png" |
※MDN によると onerror は非推奨、ご利用は計画的に
はじめに
yuki24/rambulance で動的なエラーページを表示する方法についてまとめた。
TL;DR
Gemfileにgem "rambulance"追加 →bundle(orbundle install) でインストールrails g rambulance:installでセットアップconfig/initializers/rambulance.rbに"例外" => "対応ファイル"のペアを記述app/views/errors/対応ファイル.html.xxxにエラーページの内容を記述/rambulance/対応ファイルにアクセスすると、エラーページの内容が確認できる
はじめに
最近のサイトでよく見かける「このサイトでは 〜 Cookie を利用します」という表示を、osano/cookieconsent を用いて簡単に実現する方法について調べた。
TL;DR
- osano/cookieconsent で簡単に表示を追加可能
- 公式ページ で簡単に見た目を変更可能
- オプションが豊富なため、細かいカスタマイズもできる
はじめに
jQuery Select2 で、選択肢に存在しない情報を動的に追加する方法を調べた。
ユーザー入力で一致する選択肢がある場合は既存選択肢を、そうでなければユーザー入力をそのまま選択肢として追加する、というイメージ。
TL;DR
tags: trueを指定すると選択肢を動的に追加できるcreateTagで選択肢追加時の挙動を制御できるmultipleの場合は複数選択しを追加できる
はじめに
jQuery Select2 で、ajax で選択肢を取得する方法方法を調べた。
TL;DR
ajaxオプション内で設定url,dataオプションで API Request に関する設定processResultsオプションで API Response を受信した後の処理templateResult,templateSelectionオプションで見た目(HTML)の設定
