トップ
サービス
事例
コラム
会社概要
お問い合わせ
トップ
サービス
事例
コラム
会社概要
お問い合わせ
Column
コラム
TOP
コラム一覧
カテゴリーから探す
CSS
EC
Podio
Tips
WordPress
アーカイブから探す
2023年
2022年
2021年
2015年
2023.02.22
CSS
明奈
CSSで文章を複数の列に分ける方法
今回はCSSで文章を複数の列に分ける方法を紹介します。 文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。 そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができます。 column-countプロパティとは 「column-count」はCSSのcolumn-countプロパティで、指定された列で要素の内容を表示します。
READ MORE
2023.02.20
CSS
明奈
簡単! HTMLだけでアコーディオンメニューを作成する方法②|CSSでデザイン変更
前回、「簡単! HTMLだけでアコーディオンメニューを作成する方法 ①」で、HTMLのみで作成する手順を紹介しました。気になる方は、前回の記事もご覧ください。 今回は、CSSでデザインを少し変更してみます。 デザイン変更する手順 ①既存の矢印を非表示にする(既存の矢印でいい場合は必要ありません) ②カーソルポインターを変更(こちらはお好みで) ③アニメーションをつ
READ MORE
2023.02.17
CSS
明奈
簡単! HTMLだけでアコーディオンメニューを作成する方法 ①
アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。 アコーディオンメニューとは Webページおけるナビゲーションメニューのひとつで、選択した項目がその場で広がり、隠れていた詳細内容を表示するメニューのこと。限られた範囲で多くの項目を一覧表示することが可能なため、利便性が高い。 HTMLだ
READ MORE
2023.02.09
CSS
明奈
CSS詳細度を高めないので使いやすい! まとめて記述する際に便利な疑似クラス「where:()」とは
今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。 「where:()」とは CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。 「where:()」以外にも、同じく複数のセレクタをまとめることができる「:is()」などがありますが、「where:()」の場合はCSSの詳細度を持たないため、スタイルを上書きする際に使いやすいです。
READ MORE
2023.02.08
Podio
Reina
第3回:ワークスペースの作成方法|リモートワークには必須、プロジェクト管理ツール「Podio」とは?
Podioを利用するには、まずはワークスペースの作成が必要です。 前回の記事でも述べましたが、この「ワークスペース」以下に作成していく各アイテム(トピック)は、同ワークスペースの参加メンバー以外はアクセスできないないため、アクセス権限に応じて部門やチーム、プロジェクトごとなどに作成します。 第2回:Podioの構成|リモートワークには必須、プロジェクト管理ツール「Podio」とは? 「ワ
READ MORE
2023.02.06
CSS
明奈
指定した要素だけをなくすことができる、便利な「display: contents」
今回は、指定した要素だけをなくすことができる[display:contents]を紹介します。 [display: contents]を知る前に、まずはボックスモデルを確認 ボックスモデルとは、「HTMLやXHTMLで定義された要素はすべて長方形のボックスの中に納められている」という考え方です。 HTMLの要素はどの要素も、下記の図のように「ボックス」と呼ばれる領域を生成します。
READ MORE
2023.01.30
CSS
明奈
レスポンシブなフォントサイズに設定できるCSSのclamp()関数が便利
clamp()関数とは clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。 フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適なサイズにしてくれます。 clamp(最小値,推奨値,最大値) 推奨値:要素の大きさ最小値と最大値の間である限り推奨値が適用 最小値:最も小さい値で、推奨値が
READ MORE
2023.01.27
CSS
明奈
重なった要素の後側にリンクを効かせる方法
今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します! また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました! 気になる方は併せてご覧ください! HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介 pointer-eventsプロパティとは ホバーやクリックなどのマ
READ MORE
2023.01.24
Tips
明奈
Flexboxの右側に出来る余白を子要素に振り分ける方法
Flexboxで要素を横並びにした際、子要素の幅が短いと右側に余白ができます。 この余白は、flex-growプロパティで、子要素に振り分ける事ができます。 flex-growとは Flexを使用した、親要素の余白を子要素に追加するプロパティです。[フレックスアイテム(子要素)の伸び率を指定するプロパティです。] まずは、Flexで要素を横並びにし、その子要素に[flex-grow
READ MORE
2023.01.23
CSS
明奈
SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法
今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。 まずは実装デモがこちら。 デモ内[Result]の[Run Pen]をクリックしてください。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen.
READ MORE
<
1
2
3
…
8
>