Web Blog WEBブログ

CSSで画像をトリミングするテクニック

UPDATE : 2021.06.22

こんにちは。コーダーの兼山です。 サイズや比率がバラバラの画像を、CSSで同じサイズにトリミングする方法を紹介します。 ブログページなどのCMSのページで、画像表示を統一させる指定をする機会は多いので、ぜひ、覚えておきたいテクニックです。

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

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

UPDATE : 2020.12.12

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

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

レスポンシブに最適なフォントサイズの単位と指定方法

UPDATE : 2020.10.23

こんにちは。コーダーの兼山です。 レスポンシブコーディングをする際、フォントサイズの指定に迷いが生じることが、ありませんか? PCファーストなのか、モバイルファーストなのか。 デバイスの違いや、見え方重視か、デザイン重視か。 現状、様々な単位があることから、更に...

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

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

UPDATE : 2020.06.05

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

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

スマホで『background-attachment: fixed』が効かないときの解決法

UPDATE : 2020.05.06

こんにちは。コーダーの兼山です。 背景固定を『background-attachment: fixed;』で指定した際、パソコンでの表示では思う通りの動きをするのに、スマートフォンでは固定されないことがありませんか? それには理由があります。 今回は、その理由...

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

デバイスの向きによってCSSを変更する方法

UPDATE : 2020.04.08

こんにちは。 コーダーの兼山です。 メディアクエリは、画面の幅だけでなく、デバイスの向きも検知できるのをご存知ですか? スマホや、タブレットを縦向き、横向きにした際のスタイルを変更することができます。 デバイスの”この時だけ”の指定を可能にするテクニックを紹...

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

ホームページの右側に隙間がある時の対処方法

UPDATE : 2019.12.27

こんにちは。ディレクターの寺井です。 業務ではコーダーさんが制作したコーディングデータを確認する機会が多いのですが、 その際よくある現象が PCで表示中ブラウザを縮めた際やレスポンシブ対応ではないサイトをタブレットやスマホで閲覧した際に ブラウザの右側に余白が出来て...

寺井大樹
寺井 大樹
ディレクター/カメラマン
続きを読む

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

UPDATE : 2019.12.26

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

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

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

UPDATE : 2019.11.30

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

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

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

UPDATE : 2019.10.23

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

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