サイトにアクセスした時に、ページの読み込みが完了するまでローディング画面を表示する方法をご紹介いたします。 デモページを用意したので、動きについてはデモをご参照ください。 デモページを見る サイトの読み込み中にローディン…
サイトの読み込み中にローディング画面を表示する方法
jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法
a要素に「tel:0312345678」というような電話番号を入れることで、そのリンクをタップした時に電話をかけることができるようになります。 PCで閲覧している時には、このリンクを無効化しておきたい場合もあるかと思いま…
写真にInstagram風のフィルターを適用することができる「CSSgram」
CSSgramは、写真にInstagram風のフィルターをかけることができるCSSライブラリです。簡単にサイト内の写真をおしゃれに仕上げることができます。 デモについては、CSSgramの配布ページをご参照ください。 C…
CSSだけでストライプ柄の背景を実装する方法
画像を一切使わず、CSSだけでストライプ柄の背景を実現する方法をご紹介いたします。 CSSだけで背景をストライプ柄にする方法 斜めストライプ 斜めのストライプを実装するには、CSSで以下のように記述します。 backgr…
CSSだけではみ出したテキストを省略して三点リーダーを付ける方法
CSSのみで、テキストがはみ出した時に文字を省略して、三点リーダーを付与する方法をご紹介いたします。 CSSだけではみ出したテキストを省略して三点リーダーを付ける方法 テキストを省略して三点リーダーを付けるためには、te…
クラスを指定しなくてもOK！CSSだけでテーブルの列や行のスタイルを一括指定する方法
例えば、以下のような表があったとします。 HTMLはシンプルにこんな感じです。 この表の2列目だけ、背景色を変えたいと思った場合、あなたならどうしますか？ 「バナナ」と「メロン」のtdに対してクラスを追加し、そのクラスに…
要素を左右・天地中央に配置するためのスタイルを生成してくれる「How to Center in CSS」
How to Center in CSSは、要素を左右中央もしくは天地中央に配置するためのコードを生成してくれるWEBサービスです。左右と天地、両方を中央に配置するコードの生成も可能です。 How to Center i…
Can I useのブラウザ対応表をサイトに埋め込むことができる「The (Unofficial) CanIUse Embed」
The (Unofficial) CanIUse Embedは、Can I useのブラウザ対応表をサイト内に埋め込むことができるツールです。 デモは公式サイトのExamplesでご確認ください。 The (Unoffi…
レスポンシブ対応！MasonryレイアウトをCSSだけで実現できる「driveway」
drivewayは、いわゆるMasonryレイアウトを実現することができるCSSファイルです。 見た目や動作については、以下デモページでご確認いただけます。 デモページを見る 本記事では、drivewayの実装方法につい…
テーマファイルを変更することなくCSSをカスタマイズすることができるWordPressプラグイン「Simple Custom CSS」
Simple Custom CSSは、テーマファイルを変更することなく、CSSをカスタマイズすることができるWordPressプラグインです。 管理画面上からCSSを管理することができ、テーマファイルを変更しないのでテー…