スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【css】画像の上に画像を重ねる方法、二つ目を覚えました。(補足)

以前、『【css】画像の上に画像を重ねる方法、二つ目を覚えました。』という

記事を書いたのですが。


そこで取り上げた"background-image"についての補足です。


前回は、background-imageのurl指定に

ダブルクォーテーション(")を付けている例を載せました。

【ダブルクォーテーションを付けて指定】

 background-image: url("bk-image-korilakkuma.jpg"); 



が。

このダブルクォーテーションは、付けなくても大丈夫みたいです。

ちなみに、ダブルじゃなくて、シングルクォーテーション(')でも表示されます。

【大丈夫な場合】

 background-image: url(bk-image-korilakkuma.jpg); 
 または
 background-image: url('bk-image-korilakkuma.jpg'); 



要するに、なんでもOKっぽいです(^^;)



ただ、対丈夫じゃない場合もあります。


ダメなのは、、、

urlに指定するパスにスペースが入っていたり、

パス中にダブルクォーテーションやシングルクォーテーションが含まれる場合。




いくつかパターンがあるので、まとめてみました。


(1) パスに空白(スペース)が含まれる場合  bk image-korilakkuma.jpg

【OK】

 background-image: url("bk image-korilakkuma.jpg");

 background-image: url('bk image-korilakkuma.jpg');  



【NG】

 background-image: url(bk image-korilakkuma.jpg);




(2) パスにダブルクォーテーションが含まれる場合  bk-image-"korilakkuma".jpg

【OK】

 background-image: url('bk-image-"korilakkuma".jpg');

 background-image: url("bk-image-¥"korilakkuma¥".jpg");  



【NG】

 background-image: url(bk-image-"korilakkuma".jpg);

 background-image: url("bk-image-"korilakkuma".jpg");




(3) パスにシングルクォーテーションが含まれる場合  bk-image-'korilakkuma'.jpg

【OK】

 background-image: url("bk-image-'korilakkuma'.jpg");

 background-image: url('bk-image-¥'korilakkuma¥'.jpg');  



【NG】

 background-image: url(bk-image-'korilakkuma'.jpg);

 background-image: url('bk-image-'korilakkuma'.jpg');




パスにダブルクォーテーションやシングルクォーテーションが含まれる場合は、

バックスラッシュ(¥)でエスケープしています。



環境によって違うかも(?)しれませんが、

基本的にはこんな感じで大丈夫そうですね(><)v


スポンサーサイト

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

tag : css,html,画像を重ねる,background-image

【css】画像の上に画像を重ねる方法、二つ目を覚えました。

以前『【css】画像の上に画像を重ねる方法を一つ覚えました。』という記事で、

"position"を使った方法を載せたのですが。


今度は、"background-image"を使って画像の上に画像を重ねる方法を覚えたので、

メモしておきます。



ではでは、コリラックマの写真の上に赤い星の画像を置いてみます。


コリラックマ
コリラックマ


赤い星
赤い星



HTMLとCSSはこんな感じで↓

【HTML】

 <div id="contents">
  <img class="star" src="red-star.png" width="248" height="236">
 </div>



【css】

 #contents {
   background-image: url("bk-image-korilakkuma.jpg");
   width: 450px;
   height: 600px;
 }



表示結果
コリラックマと星



顔が隠れてしまうので、padding設定を追加して、星の位置を調整してみました↓

【css】

 #contents {
   background-image: url("bk-image-korilakkuma.jpg");
   width: 450px;
   height: 600px;
 }

 .star {
   padding: 300px 0 0 200px;
 }





表示結果
コリラックマと星


とりあえず、FirefoxとChromeとSafariで確認したところ、

意図した通りに表示されてました。


IEは未確認ですが・・・(^^;)




background-imageのurl指定について、補足記事を追加しました。

『【css】画像の上に画像を重ねる方法、二つ目を覚えました。(補足)』






テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

tag : css,html,画像を重ねる

HTML5のワークショップに参加してみました。

先日、HTML5のワークショップに行ってみました。

そこで作ったのがコレ↓

HTML5の扱えるブラウザ(safari/chrome)でご覧ください。

とりあえず、ChromeとSafariとFirefoxの新しめのバージョンでは実行できるかな?

canvasタグを使ってるところがポイントらしいです。


ちなみに遊び方は、

(1)画面下方のおうぎ形(弓)にカーソルを合わせて、移動させる

(2)弓をクリックすると、上に向かって矢が出ます

(3)画面上方のハートに当たればOK


管理人はWeb画面のない処理を作ることが多かったので、
正直、HTMLやJavaScriptには苦手意識があります(--;)


・・・でも。

HTML5とJavaScriptでこんなのが作れるのなら、勉強しといて損ないですよね(><)

よし、がんばろ〜。






テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTML5,canvas

日経Linuxの【HTML5】サンプルソースを詳しく見てみる(位置表示編)

前回、「日経Linuxの【HTML5】サンプルソースを試してみた(位置表示編)」という記事で

Geolocation API というのを試してみました。



ちなみにGeolocation APIというのは以下のようなものらしいです↓

Geolocation APIは、ブラウザーを実行しているコンピュータ(デバイス)の現在位置を
取得するAPIである。
例えば、ユーザーの現在位置周辺の店舗情報を地図に表示したり、天気や交通情報を提供したりする
アプリケーションを容易に開発できる。持ち運びが前提のスマートフォンでは絶大な効果を発揮する。

(「日経Linux2011年11月号」より引用)

ほぉ〜、"絶大な効果"か・・・。


で、実際のソースは以下になります。

---------------------(↓ここから↓)---------------------

続きを読む

テーマ : WEB系勉強中
ジャンル : コンピュータ

tag : html5,geolocation api

日経Linuxの【HTML5】サンプルソースを試してみた(位置表示編)

「日経Linux」に掲載されていたHTML5のサンプルソース、3つ目の「Googleマップで位置表示」
プログラムを実行してみました。

■ちなみに他の2つに関する過去記事はこちら
・日経Linuxの【HTML5】サンプルソースを試してみた(画像ファイル表示編)
・日経Linuxの【HTML5】サンプルソースを詳しく見てみる(画像ファイル表示編)
・日経Linuxの【HTML5】サンプルソースを試してみた(落書き帳編)

・日経Linuxの【HTML5】サンプルソースを詳しく見てみる(落書き帳編)




◎「Googleマップで位置表示」プログラムの実行結果↓
【HTML5】GeolocationAPIの実行結果

続きを読む

テーマ : WEB系勉強中
ジャンル : コンピュータ

tag : HTML5,geolocation api

プロフィール

コリ

Author:コリ
学生時代の専攻は歴史。
根っからのアナログ人間なのに、なぜかSIerに就職し、システム関係のお仕事をしています。
一時期、花屋に転職してIT業界を脱出しようとしたものの、結局出戻ってきてしまいました。
システム・WEB関連の気付いたことを何でもアリで書いています。最近は趣味(?)のリラックマについての記事が増えてきました…疲れてるんでしょうか??

※リンクフリーです。少しでも誰かのお役に立てれば幸いです。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
全記事表示リンク

全ての記事を表示する

カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
おすすめ書籍

プロになるためのWeb技術入門
Web全般の理解におすすめ。
すごい分かりやすいです。


2014-15年版 ネットショップ検定公式テキスト ネットショップ実務士レベル1対応
ネットショップ運営の一連の流れがまとめられています。


2015 情報セキュリティスペシャリスト「専門知識+午後問題」の重点対策
記述問題の解答テクニックに特化した参考書。


応用情報技術者試験 午前 平成26年度版
午前対策はひたすら過去問を
解くことだと思います。


リラックマ ここにいます
リラックマ絵本の新刊。
今回は手書き風。


リラックマ 4クママンガ 6
新作出た!!


検索フォーム
RSSリンクの表示
instagram
twitter
おすすめ
リンク
ブロとも申請フォーム

この人とブロともになる

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。