Web blog 兼山暖美

CSSでアスペクト比を指定する

UPDATE : 2024.06.08

こんにちは。コーダーの兼山です。 Webデザインにおいて、画像やビデオのアスペクト比(縦横比)を一定に保つことは、レイアウトの整合性を保つ上で非常に重要です。 CSSでは、aspect-ratioプロパティを使用して、要素のアスペクト比を簡単に指...

兼山 暖美
エンジニア
続きを読む

CSS設計 BEM(ベム)

UPDATE : 2024.06.07

こんにちは。コーダーの兼山です。 CSSの設計は、プロジェクトの成長とともにその重要性が増します。 その中でもBEM(Block、Element、Modifier)は、クラス命名規則としてコードの可読性と再利用性を向上させる効果的な手法です。 ...

兼山 暖美
エンジニア
続きを読む

WebPとは?その特徴と実装方法

UPDATE : 2024.06.06

こんにちは。コーダーの兼山です。 WebPはGoogleが開発した画像フォーマットで、従来のJPEGやPNGよりも高品質かつ小さいファイルサイズを実現します。 これにより、ウェブサイトの読み込み速度が向上し、ユーザー体験が向上します。 この記事...

兼山 暖美
エンジニア
続きを読む

CSS設計 FLOCSS(フロックス)

UPDATE : 2024.06.06

こんにちは。コーダーの兼山です。 Webデザインの効率化と保守性向上を目指すFLOCSSは、CSS設計の新しいスタンダードです。 ファイル構造と命名規則を明確に定義し、チーム開発における一貫性を確保します。 本記事では、FLOCSSの基本概念と...

兼山 暖美
エンジニア
続きを読む

CSSで画像やコンテンツを左右反転させる方法

UPDATE : 2023.04.14

こんにちは。コーダーの兼山です。 画像やコンテンツを左右上下に反転させる方法を紹介します。

兼山 暖美
エンジニア
続きを読む

テーブルの行や列を固定しスクロールする方法

UPDATE : 2023.02.22

こんにちは。コーダーの兼山です。 テーブルをモバイル画面などの小さな範囲で表を見せる際に役立つ、行や列を固定してスクロールさせる方法を紹介します。

兼山 暖美
エンジニア
続きを読む

スクリプトで作るシンプルなカウント

UPDATE : 2023.01.15

こんにちは。コーダーの兼山です。 今回は、ECサイトのタイムセールや、数値を強調するサイトなどで使える、動きのあるカウントの作り方を紹介します。

兼山 暖美
エンジニア
続きを読む

お知らせなどの記事一覧をコーディングする際に便利な技を紹介します!

UPDATE : 2022.12.21

こんにちは。コーダーの兼山です。 お知らせなどの記事一覧をコーディングする際、 記事タイトルやお知らせテキストなど、レイアウトのバランス上、文字数を制限したい場合に指定した文字数以上のテキストを非表示にしたり、 画像を指定する際、どのようなバランス...

兼山 暖美
エンジニア
続きを読む

CSSでテキストにグラデーションや背景を設定する方法

UPDATE : 2022.10.18

こんにちは。コーダーの兼山です。 コーディングでのテキストの装飾は、基本的なフォント指定以外では画像で処理するのが一般的でした。 現在は、いくつかのプロパティを使用することで、CSSだけでも簡単にテキストへグラデーションや背景を装飾することができ...

兼山 暖美
エンジニア
続きを読む

スライダー(slick)のドットをプログレスバーにする方法

UPDATE : 2022.08.29

こんにちは。コーダーの兼山です。 スライダープラグインの設置をする機会は多く、加えてドットのデザインを変更することもあると思います。 今回は、数あるスライダーの中でも凡庸性の高い「slick」を使用したスライダーのオプションのドットを利用して、次のス...

兼山 暖美
エンジニア
続きを読む
無料相談窓口