Web開発日記

118

本

Webサービスを作るにあたっての個人的メモ

運営しているクリエイター: Koushi Kagawa

#css

【css】画像を丸く切り取る方法

twitterやインスタグラムのアイコンのように、画像が丸く表示されるのを最近よく見ます。今回はcssにて画像を丸く切り取る対応方法を説明します。正方形の画像の場合下記のようなソースコードの場合。 <img src="/sample.jpg"> このままだと四角のまま表示されます。ここで、cssにborder-radiusを利用すると円形に切り取ることができます。 img{border-radius: 50%;} 下記のようになります。長方形の画像の場

【css】画像の横幅をレスポンシブに対応する方法

結果として少しの修正で対応できたのですが、ちょっとハマってしまった箇所なのでメモ。フロントエンドの対応していると、パソコンから見ると問題ないのですが、スマートフォンで見ると画像が横幅より飛び出してしまっている場合があります。問題例えば以下の画面ですが本来であればヘッダーに合わせて下記の赤枠内に収めたいのですが、画像がはみ出してしまっています。これは下記の青枠の画像がレスポンシブ対応できていないからなのです。対応策対応としては、対象のimgファイルにcssを

画像のうえに複数の文字を重ねる方法【CSS】

今回はCSSで画像の上に複数の文字を重ねる方法を記載します。やりたいこと画像のうえに、「カテゴリ名」と「日付」を表示したいという案件が発生したので複数表示させる方法を調べました。やりたいこととしては下記のような表示方法です。画像参照：LIG 画像に「NEW」と「アイコン」が重なって表示されています。こんな感じのを目標にします。対応方法対応方法を記載します。HTML、CSSで対応します。今回は画像に「カテゴリ名」と「日付」を表示させる方法を記載します。 ※「カ

画像のうえに文字を重ねる方法【css】

cssで画像に文字を重ねる方法を記載します。やりたいことよくある新着のマークや画像参照：ZOZOTOWN カテゴリを表示させたりしたいのです。画像参照：SPOT 対応方法早速ですが対応方法を記載します。今回はCSSで対応します。今回は画像に「NEW！」と表示させる方法を記載します。 HTML <div class="new_box new_icon"> <img src="/image.jpg"></div> CSS .new_box{