html css | web覚書ノート

2020年9月4日2020年9月24日

aタグで設定したリンクの下線が途切れるように表示されるときの対処法

aタグにリンクを設定したものをブラウザで表示すると下記画像のように下線が途切れたように表示されるときの対処方法。

CSSに下記のプロパティを設定すると下線が繋がった状態で表示される。

text-decoration-skip-ink: none

指定をしないと下記の「auto」が適応され途切れた表示になるようです。

text-decoration-skip-ink: auto

参考サイト：「Chrome 64 からリンクの下線が途切れる：text-decoration-skip-ink プロパティについて」

2019年5月16日2020年9月25日

スマホサイト用トグルボタン自作メモ

javascriptが心底苦手で、今まではスマホサイト用のトグルボタンは出来合いのものを流用して、後からカスタマイズ等するときに手出しできなかったりしていたが、ようやく自作してそれらしいものが出来るようになったので、近い将来に改修する際に「？？？・・・」となっているであろう自分への覚書。

HTML部分

<p><a href="#link" id="toggle01">メニュー表示</a></p>
<div class="menu01">
<ul>
 <li>menu01</li>
 <li>menu02</li>
 <li>menu03</li>
 <li>menu04</li>
</ul>
<p><a href="#link" id="close01">閉じる</a></p>
</div>
<p>これはサンプルテキストです</p>/* Your code... */

何の変哲もないメニュー用の「ul」と「li」

これをjavascriptで表示したり、隠したりする。実際に表示、非表示にするのは「div class="menu01"」のボックス部分

CSS部分

.menu01 ul {
}
.menu01 ul {
	width: 300px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	background: #00F;
}
.menu01 ul li {
	background: #F00;
	padding: 20px;
	margin: 0px 0px 2px;
}

こちらも何の変哲もないCSSコード

一つだけ注意点として「ul」（表示・非表示するボックス）の高さを指定しないとギクシャクした動きになる

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(function(){
	$(".menu01").toggle();
	$("#toggle01").click(function(){
		$(".menu01").slideToggle();
	});
	$("#close01").click(function(){
		$(".menu01").slideUp();
	});
});
</script>

1行目はjQueryのおまじない

4行目は「div class=”menu01″」の初期設定を非表示にするおまじない

5-7行目は「＜a id=”toggle01″ href=”#link”＞メニュー表示＜/a＞」が
クリックされたときにスライドして表示させる設定
再度クリックするとスライドして非表示になる

8-10行目は「＜a id=”close01″ href=”#link”＞閉じる＜/a＞」が
クリックされたときに「div class=”menu01″」を
スライドして非表示にする設定。閉じるのみ

あとは「メニュー表示」のリンク部分を「トグルボタン」の画像にする

CSSの「position: absolute;」等を使ってボタンの位置調整、コンテンツの上に重なるように表示する等の処理を必要に応じて加える

参考サイト

jQuery 要素を表示/非表示にする(toggle)

2018年5月10日2020年9月24日

一枚の画像をCSSでPC表示とスマホ表示の両方に対応する方法

例えば社長の挨拶のようなページで、PC表示では300ピクセル程度の社長の画像を、右または左にフロートさせて、画像に回り込むように本文を配置し、スマホ表示ではフロートを解除し画像を100%表示して、画像の下に本文を配置する場面は多々遭遇する。

毎度毎度、眉間にしわを寄せながら試行錯誤するので自分用備忘録。

HTML



<img src="img/photo01.jpg" width="2950" height="2094">

何の変哲もないPタグの中に画像を配置。今回は横幅2950ピクセルのわざと大きな画像を用意して、PC表示にしてもはみ出すほどの画像を使用し、PC表示も調整し、更にスマホも最適化する。

CSS

/* スマホ表示 */
.pcsp01 img {
	max-width:100%;
	height:auto;
}

/* PC表示 */
@media (min-width: 768px) {

.pcsp01 img {
	width:320px;
	height:auto;
}

}

スマホ表示は「max-width:100%;」とすることでデバイスの画面一杯にピッタリ表示される。

PC表示はメディアクエリを指定し、PC表示のみに適応させる箇所にピクセルで指定して表示させる。

2017年2月20日2017年3月15日

cssでul liタグのリストマーカーを任意の文字列に変更する方法

例えば「※」をリストマークに設定する方法として

htmlは

<ul class="marginLeft2em">　　
  <li class="listStyleKome">cssでul liタグのリストマーカーを任意の文字列に変更する方法のサンプルテキストです。</li>
</ul>

cssは

.listStyleKome {
　　list-style: none;
}
.listStyleKome:before {
　　content:"※";
　　margin-left: -14px;
}

マイナスマージンを設定しないと

※あああ・・・
あああ

のようになってしまうので注意。

2015年12月1日2017年3月16日

レスポンシブに対応した画像スライダーjQuery「Nivo Slider」の導入手順

必要ファイルのダウンロード

「Nivo Slider」このページの、少しわかりづらいですが右メニューの「Download ZIP」のボタンをクリックすると一式ダウンロードできます。（2015.12.1現在）

設置場所とソースコピー

解凍して出来る

/Nivo-Slider-master/demo/demo.html

から下記HTMLをコピーして、bodyタグの中のスライダーを表示したい部分にペーストします。

<div class="slider-wrapper theme-default">
	<div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div>
	<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
</div>

画像ファイルの設置

解凍して出来る「Nivo-Slider-master」フォルダの中の「demo」の中の「images」フォルダをそっくりコピーして、移植先の「htdocs（ドキュメントルート）」の下に張り付けます。

CSSファイルの設置とリンク

テーマ用CSS

解凍して出来る「Nivo-Slider-master」フォルダの中の「themes」フォルダをそっくりコピーして、移植先の「htdocs（ドキュメントルート）」の下に張り付けます。

htmlでファイルをリンクさせます。

<link href="themes/default/default.css" rel="stylesheet" type="text/css" />
<link href="themes/bar/bar.css" rel="stylesheet" type="text/css" />

デフォルトでは「default」、「light」、「dark」と簡単にテーマを切り替えられるようになっていて

<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />

も設定されていますが、今回は「default」しか使わないので、省略します。

その他のCSS

「htdocs（ドキュメントルート）」の下に「css」フォルダを作ります。そこに
解凍してできたファイル群から下記の２つのcssファイルをコピーして
/Nivo-Slider-master/demo/style.css
/Nivo-Slider-master/nivo-slider.css
移植先の「htdocs（ドキュメントルート）」の下の「css」フォルダにペーストします。

htmlでファイルをリンクさせます。

<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

javascriptの設置とリンク

「demo.html」の「/body」タグの直前の下記javascriptのコードをコピーして

<script type="text/javascript">
  $(window).load(function() {
    $('#slider').nivoSlider();
  });
</script>

移植先のhtmlの「/body」タグの直前にペーストします。「htdocs（ドキュメントルート）」の下に「js」フォルダを作ります。そこに解凍してできたファイル群から下記の２つのjavascriptファイルをコピーして /Nivo-Slider-master/demo/scripts/jquery-1.9.0.min.js /Nivo-Slider-master/jquery.nivo.slider.js htmlでファイルをリンクさせます。

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

この段階でとりあえずまともに動くようになるはずです。あとは画像を差し替えて完成です。

ソース全文

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
	<div class="slider-wrapper theme-default">
		<div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div>
		<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
	</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>