HTML・CSS
サイト確認で、cssで設定していない謎の隙間(マージン)を発見。。 ↓開発ツールで確認すると、インクルードファイルの直前に「」と記載あり。 原因は、インクルードファイルの文字コードが「UTF-8のBOMつき」になっている事のようです。 なぜ、だたのU…
先日こちらでopacityを使ってマウスオーバー時に要素を半透明にする方法をご紹介しました。こちらは、プロパティがopacityなので子要素である文字も含めて全体を半透明に設定されます。 ↑テキストも半透明 今回は、文字は透明にせずに背景のみ半透明にする方…
画像リンクをマウスオーバーした時に半透明にしたり、カラーフィルターをかけたようにする方法です。＊IE6以上で表示されます。 画像をマウスオーバーで30％透明にする ↓完成画像▼デモ http://jewelcafe.main.jp/hatena/d160215/index01.html html <a href="#" class="glow"><img src="images/linkButton.jpg" alt="Link Button" width="310" height="60" /></a> ＊aタグ…
透明度を設定するopacityに対応していないIE7、IE8などの古いブラウザも表示させるcssです。＊下記で全ブラウザ対応です。 ターゲットブラウザでない部分は除いてください。 #box { filter:alpha(opacity=80); /* IE 6,7*/ -ms-filter: "alpha(opacity=80)";…
liに「list-style」を設定していれば2行目以降も自動でインデントはとられますが、任意の文字を入れたり、画像アイコンにしたりで「list-style: none;」にする（もしくはpなどli以外のマークアップ）と2行目以降が↓こんな風になってしまいます。↓こちらみた…
PC版は全く問題ないのに。。iPhoneで表示確認するとちゃんと、 文字サイズ指定したのに、大きくなったり小さくなったり。。 文字サイズにバラつきが出る問題。。 解決方法 結論から言うと↓で直ります。 body { -webkit-text-size-adjust: 100%; } どうやら、…
上付き文字タグ（sup）をそのまま使うとブラウザによってずれるようです。 （ブラウザのデフォルト設定があるので）対応方法なので、cssで調整します。↓こんな感じに整えます。html <p>30m<span class="supText">2</span></p> <p>D<span class="subText">3</span></p> ＊上付き文字、下付き文字にクラスを付けます。 css span.supText …
「rem」は、CSS3のfon-size 単位。 親要素に継承されず、ルート（html）からの相対サイズが指定出来るので、 とても便利なのですが、Chromeでフォントサイズが大きくなる現象があります。。（涙） どんな時にフォントサイズがおかしくなるのか？ html { font…
昨日まで正常だったヘッターのナビゲーションが突然カラム落ち。。。 どうやらchromeバージョンアップによるバグのようです。▼不具合がおきるバージョン Ver 43.0.2357.65 以降 （ちなみに、昨日までの不具合なしVer 42.0.2311.152 以下） 開発ツールでみる…
タグ打ちのスピードが上がれば作業効率がいいですよね。 html、cssのタグ打ちが練習できるサイトをご紹介します。初心者は読んで覚えてから打って体で覚える、中級者はスピードアップに。。。 1日10分でも1ヶ月後にはかなり上達すると思います！また、ユーザ…
下記のプロパティが可能です。他のプロパティへの対応も開発中みたいです。 border-radius (角丸) box-shadow (ドロップシャドウ) border-image (ボーダーにイメージ画像) multiple background images (背景画像を複数表示) linear-gradient (グラデーション…
制作していてあった方が良いと思った物は、随時追加しております。 html5リセットcss ▼参考URL http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html フォントサイズは指定しやすいように62.5%(10px)にしてあります。 @charset "UTF-8"; /*=======…
すぐにコピペして使えるように記載しておきます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5</title> /*外部cssの場合*/<link rel="stylesheet" href="○○.css"> /*外部JavaScript*/<script src="○○.js"></script> /*cssエンベットの場合*/<style></style> /*JavaScriptエンベットの場合*/<script ></script> </link></meta></head></html>
学校の地図を埋め込みました。 ▼完成URL http://jewelcafe.main.jp/0803/02.html ▼参考URL http://support.google.com/maps/bin/answer.py?hl=ja&answer=72644
HTML5でサウンド ▼ここからmp3ファイルダウンロード http://www.soundjay.com/nature-sounds.html audioタグを使う <audio src="sound/wind-01.mp3" controls></audio> audioタグの外に↓ <p>ブラウザ上で再生できない方は<a href="sound/wind-01.mp3">音声のダウンロード</a>をどうぞ。</p> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル音声を再生</title>…</meta></head></html>
HTMLでの記述 HTML4.01 XHTML1.0 HTML5 ☆XHTML1.0での記述☆ <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
http://→プロトコル https://→セキリティがついているプロトコル #→Null(ヌル)リンク 画素にtitle属性→マウスオーバー時にポップアップがでる。 altではない。(Firefoxで表示されない。) 文字リンクの場合 title属性は要らない。 width、heightよりAltが優先…
定義型リスト dl(definition list デフィニッション リスト)…定義リスト dt(definition term デフィニッション ターム)…定義する用語 dd(definition description デフィニッション ディスクリプション)dtの説明、詳細。複数あってもよい。 表組み table(tabl…
head…ブラウザに内容のルールを伝える（ブラウザでは不過視） body…閲覧者に内容の意味を伝える（ブラウザでは可視） title…タイトル h1〜h6（heading ヘディング）…見出し p（paragraph パラグラフ）…本文 ul（unordered list）…番号なしリスト ol（ordered…
