【HTML・CSS】画像の上に画像や文字を重ねる方法
この記事では、「画像の上にアイコンや文字、または画像を重ねて表示する方法」を紹介します。 まずは、次の画像をご覧ください。 この画像では、右下に「いいね」ボタンを表示しています。 この表現はCSSの“position: absolute”と”position: relative”を使うことで、実現できます。 アイコンや文字が載せられた画像を用意するのではなく、HTMLとCSSを使って表現することで、次のようなメリットが得られます。 アイコンをクリックできるため、JavaScriptと組み合わせて使用できる アニメーション等の効果を設定できる 画像の上にいいねボタンを表示する 例として、いいねボタンを画像の上に表示する方法を説明したいと思います。 アイコンと画像を表示する まず最初にアイコンと画像を表示します。 アイコンは”Font Awesome”を使って表示します。 HTMLは次のように
【5秒で完了】画像（イメージ）上に半透明の文字を重ねる方法【CSS】
2013/12/14 (更新日: 2016/11/08) 【5秒で完了】画像（イメージ）上に半透明の文字を重ねる方法【CSS】 CSS PROGRAMMING 画像（イメージ）上に半透明の文字を重ねる方法。けっこう便利なので、備忘録的にメモしておきます。 実装のイメージは以下。 ※背景画像とテキストが別になっています。 メリットとしては、画像上のテキスト変更が簡単なのでサイト改善をする際に楽ですねー( ◜◡‾) では、さっそく解説。 HTMLは以下を例とします。 <div id="img-box"> <img src="img/top.jpg"/> <div id="img-box-mini"><p id="img-box-text">ここの文字が画像に重なる</p></div> </div> 上記HTMLに対して、以下のCSSをコピペすれば完了！！ #img-box{ position:
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
left:50%でどうして中央になるのですか？
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
E:nth-of-type(n)－CSS3リファレンス
E:nth-of-type(n)は、疑似クラスの一種で、 n番目のその種類の要素にスタイルを適用する際に使用します。 E:nth-child(n)の場合には、 種類に関係なく要素を数えて、n番目にE要素が来た場合にスタイル適用の対象になります。 一方、E:nth-of-type(n)の場合には、途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えてスタイル適用の対象が決定されます。 nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を指定することができます。 例えば、数式で奇数を指定する場合には2n+1、数式で偶数を指定する場合には2n+0となります。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル（sample.css）に記述。 div.sample1, div.sample2 {background-color:#CC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで中央寄せする9つの方法（縦・横にセンタリング）
width:auto; で幅を解除 - Qiita
resize－CSS3リファレンス