Web Blog WEBブログ

ブロック要素や画像を境にテキストの文字色を変える方法

UPDATE : 2022.06.30

こんにちは。コーダーの兼山です。 最近、ブロックの境界を跨いだテキストを、ブロックに重なる部分、そうでない部分で異なる文字色を指定するデザインのコーディングをする機会があり、その際に役に立った手法を紹介します。

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

画像を比較表示するjQueryプラグイン「twentytwenty.js」のご紹介

UPDATE : 2022.01.03

こんにちは。コーダーの兼山です。 今回はドラッグで左右の比較表示ができるjQueryプラグイン「twentytwenty.js」を紹介します。 設置も簡単で、PC、スマホの両方に対応できるプラグインです。

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

シンプルに実装できる「もっと見る」ボタン

UPDATE : 2020.12.12

こんにちは。コーダーの兼山です。 ニュースサイトやブログサイトなど、情報量の多くなりがちなサイトを、ユーザーが見易くすることに有効な「もっと見る」ボタンを簡単に実装する方法を紹介します。

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

スマートフォン表示で、画面に表示しきれないtableを横スクロールさせる方法

UPDATE : 2020.06.05

こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフォン表示時に、表のレイアウトによっては表の全てを表示しきれず、コンテンツが横にハミ出てしまうことがあります。 スマートフォンで表を見る際も、ユ...

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

背景色(ベタ塗り)の後に画像が表示されるJSエフェクトを使ったアニメーション

UPDATE : 2019.12.26

こんにちは。ディレクターの杉浦です。最近よく見かけるjQueryを使ったアニメーションを作ってみましょう! 画像や文字が表示される前に、一旦その要素に背景色(ベタ塗り)が入るエフェクトの動きです。 背景色(ベタ塗り)→画像(文字)と表示が切り替わります。 また...

杉浦直子
杉浦 直子
ディレクター
続きを読む

ボックス要素の高さを揃えたい時のテクニック

UPDATE : 2019.11.30

こんにちは。コーダーの兼山です。 コーディングをしていると、ボックス要素を横並びにするレイアウトに遭遇することが、よくありますよね? floatで簡単に横並びを指定することが多いと思いますが、この方法だとボックス要素の高さは揃いません。 今回は、ボックス要素を...

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

position:fixedでヘッダ固定時のページ内外リンクのズレを解消するテクニック

UPDATE : 2019.10.23

こんにちは。コーダーの兼山です。 position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 これを解決する方法を紹介します。 ページ内リンクとページ外リンクの両方に対応できるテクニックも紹介します。 ぜ...

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

テキストをタイピング風に一文字ずつ表示する方法

UPDATE : 2019.08.12

こんにちは。コーダーの兼山です。 テキストをタイピング風に一文字ずつ表示する方法について紹介します。 メインビジュアル上にあるテキストの演出や、意図的に印象付けたい内容などに効果的です。

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

ポップアップ ウィンドウを作成

UPDATE : 2019.08.08

こんにちは。コーダーの兼山です。 今回は、ポップアップ ウィンドウの作り方を紹介します。 利用者にメッセージを伝えたり、特定の操作を促したりするために用いられることが多い仕様です。

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

spectrum.jsで簡単にカラーピッカーを設置する

UPDATE : 2019.07.19

こんにちは! エンジニアの村田です。 今回は簡単にカラーピッカーを設置できるプラグイン「spectrum.js」をご紹介いたします。

村岡 栞
栞 村岡
ディレクター
続きを読む
無料相談窓口