WordPressやBootstrapを使ったウェブサイトであれば、レスポンシブデザインのため、「PC用のページとスマートフォン用のページ」のように個別のページを作成する必要はありません。 しかし、レスポンシブデザインではないウェブサイトの場合、「スマートフォンからのアクセスはスマートフォン用のページにリダイレクトさせる」などして表示させる必要があります。また、そのためにはもちろん、スマート

今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。 「where:()」とは CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。 「where:()」以外にも、同じく複数のセレクタをまとめることができる「:is()」などがありますが、「where:()」の場合はCSSの詳細度を持たないため、スタイルを上書きする際に使いやすいです。

Podioを利用するには、まずはワークスペースの作成が必要です。 前回の記事でも述べましたが、この「ワークスペース」以下に作成していく各アイテム（トピック）は、同ワークスペースの参加メンバー以外はアクセスできないないため、アクセス権限に応じて部門やチーム、プロジェクトごとなどに作成します。 第2回：Podioの構成｜リモートワークには必須、プロジェクト管理ツール「Podio」とは？ 「ワ

今回は、指定した要素だけをなくすことができる［display:contents］を紹介します。 ［display: contents］を知る前に、まずはボックスモデルを確認 ボックスモデルとは、「HTMLやXHTMLで定義された要素はすべて長方形のボックスの中に納められている」という考え方です。 HTMLの要素はどの要素も、下記の図のように「ボックス」と呼ばれる領域を生成します。

「スクレイピング」とは？ Web上のデータをパソコンより読み取ることを「スクレイピング」といいます。Googleのクローラーをイメージすると分かりやすいかと思います。 利用方法としては、「スクレイピングによって競合他社の価格情報を取得し、日々チェックする」などの用途があります。 他社サイトに都度アクセスする必要はなく、プログラムを走らせるだけで現在の価格が取得可能です。 P

clamp()関数とは clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。 フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適なサイズにしてくれます。 clamp(最小値,推奨値,最大値) 推奨値：要素の大きさ最小値と最大値の間である限り推奨値が適用 最小値：最も小さい値で、推奨値が

今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します！ また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました！　気になる方は併せてご覧ください！ HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介 pointer-eventsプロパティとは ホバーやクリックなどのマ

Flexboxで要素を横並びにした際、子要素の幅が短いと右側に余白ができます。 この余白は、flex-growプロパティで、子要素に振り分ける事ができます。 flex-growとは Flexを使用した、親要素の余白を子要素に追加するプロパティです。［フレックスアイテム(子要素)の伸び率を指定するプロパティです。］ まずは、Flexで要素を横並びにし、その子要素に［flex-grow

今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。 まずは実装デモがこちら。 デモ内［Result］の［Run Pen］をクリックしてください。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen.

今回は、HTMLで電話番号のリンクを設定する方法を紹介します。 電話番号のリンクを設定するとどうなる？ リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイトになります。 電話番号のリンク設定方法は？ 設定は簡単です。［a href=""］に［tel:］を入れるだけです。 ※番号は任意の番号を入れてください。ハイフンはなしでも