jQueryでボタンを押したときにメニューを表示させたり非表示にしたりする

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

●スクリプト（前提：jQueryが読み込まれていること）<script type="text/javascript">$(function(){  $("button#yamato").click(function(){    $("div#i_kantou").css("display","");  })  $("button#kenichiro").click(function(){    $("div#i_kantou").css("display","none");  })});</script><script type="text/ja...

マウスカーソルを乗せたときにサブメニューが表示されるようにする（２列）

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

●スクリプト<script type="text/javascript"><!--function hiraku(tgt){ // 開く if (document.getElementById){ tar=document.getElementById(tgt); tar.style.display=""; }}function toziru(tgt){ // 閉じる if (document.getElementById){ tar=document.getElementById(tgt); tar.style.display="none"; }}//--></sc...

マウスカーソルを乗せたときにサブメニューが表示されるようにする（１列）

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

●スクリプト<script type="text/javascript"><!--function hiraku(tgt){ // 開く if (document.getElementById){ tar=document.getElementById(tgt); tar.style.display=""; }}function toziru(tgt){ // 閉じる if (document.getElementById){ tar=document.getElementById(tgt); tar.style.display="none"; }}//--></sc...

jQueryでボタンを押すたびに文字を表示させたり消したりする

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

<script type="text/javascript">$(function(){  $("button#kesu").click(function(){    $(".tokyo").html("");    })  $("button#hyouzi").click(function(){    $(".tokyo").html("トウキョウ");    })});</script><button id="hyouzi">表示する</button><button id="kesu">消す</button><div class="tokyo">東京</...

jQueryでボタンを押すたびにHTMLを追記する

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

<script type="text/javascript">$(function(){  $("button").click(function(){    $(".tokyo").after("<span>東京です。</span>");    })});</script><p>ボタンを押すと、HTMLが追加されます。</p><button>ここをクリック</button><div class="tokyo"></div>ボタンを押すタイミングで、イベントが発生し、jQueryにて...

CSSでz-indexを用いて２つのdivの重なり順を変える

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<div class="tokyo">東京</div>  <div class="kanagawa">神奈川</div>  div{width: 200px;border: 1px solid #F00;}div.tokyo{background-color:lightpink; position: absolute;top: 0px;left: 0px;z-index: 2;}div.kanagawa{background-color:lightskyblue;position: absolute;top: 10px;left: 5px;z-index: 1;}東京と...

CSSでposition:absoluteを用いてdiv毎に絶対位置を指定する

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<div class="tokyo">東京</div>  <div class="kanagawa">神奈川</div>  div{width: 200px;border: 1px solid #F00;}div.tokyo{position: absolute;top: 0px;left: 0px;}div.kanagawa{position: absolute;top: 0px;left: 0px;}東京と神奈川、いずれも top と left を 0 にしているので、２つのdivが重なって見える。top ...

CSSでfloatを用いて左寄せの段組をする方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div><div class="saitama">埼玉</div><div class="nagano">長野</div><div class="fukuoka">福岡</div>div.tokyo{background-color:lightpink;border: 4px solid #0000FF; width:600px;}div....

CSSでdivのボーダー（枠線）を角丸にする方法（四隅一括設定）

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:lightpink;border: 1px solid #0000FF;width:200px;padding: 10px 10px 10px 10px;margin: 30px 0px 10px 25px;-webkit-border-r...

CSSでdivのマージン（枠外の余白）を指定する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：Google Chrome<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:lightpink;border: 4px solid #0000FF;width:200px;padding: 10px 10px 10px 10px;margin: 30px 0px...

CSSでdivのパディング（枠内の余白）を指定する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：Google Chrome<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:lightpink;border: 4px solid #0000FF;width:200px;padding: 10px 10px 10px 10px;}div.kanagawa{ba...

CSSでdiv毎に高さを指定する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：Google Chrome<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:lightpink;border: 4px solid #0000FF;width:200px;height:50px}div.kanagawa{background-color:lig...

CSSでdiv毎に横幅を指定する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：Google Chrome<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:lightpink;border: 4px solid #0000FF;width:50px;}div.kanagawa{background-color:lightskyblue;bo...

CSSでdiv毎にボーダー（枠線）を指定する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：Google Chrome<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:lightpink;border: 4px solid #0000FF;}div.kanagawa{background-color:lightskyblue;border: 4px s...

フレキシブルボックスでdiv要素を水平に並べる方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

※本機能はIEでは未サポートなのでご注意ください。<div class="nippon"><div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div></div>div.tokyo{background-color:red;}div.kanagawa{background-color:lightskyblue;}div.osaka{background-col...

CSSでdiv毎に背景色とフォントサイズを適用する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

HTML側で下記のようにクラスを指定しておきます。<div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div>スタイルシート側で、クラス毎にフォントサイズと背景色を適用できます。div.tokyo{font-size: 20px;background-color:red;}div.kanagaw...

スタイルシートのクラス名を数字にすると認識しないのでご注意ください

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

たとえば、<div class="1">東京都</div>でdiv.1{font-size: 100px;background-color:red;}としても、反映されません。<div class="sample1">東京都</div>div.sample1{font-size: 100px;background-color:red;}のように、クラス名の頭文字を数字以外にすると反映されます。