カテゴリー
HTML&CSSS

CSSで表組みを作ってみた。

htmlの表組みってかなり面倒

EXCELを使い慣れているせいもあり、htmlでの表組みは結構面倒。セルの罫線設定にはじまり、文字のセル内の位置設定や塗りの設定などなど。なので、この作業を少しでも軽減すべく、CSSに挑戦してみました。

表組みのhtmlタグ

自分なりの解釈で言うとこんな感じ

■表全体 tableで指定 ■行の設定 Trで指定 ■表のヘッダー設定 thで指定 ■個別のセル設定 Tdで指定 ■セルの結合(縦) rowspanと書く ■セルの結合(横) collspanと書く

表組み用のCSS

表組み全体の指定 matrix01 表のワイド指定とセル同士の隙間なく隣接 ヘッダーの指定 matrix01_th ヘッダーセル内のテキスト位置や塗りの設定など ボディ部分の指定 matrix01_td ボディセル内のテキスト位置や塗りの設定など
/*表組みのcss*/
.matrix01{
width: 50%;
border-collapse: collapse;
}
.matrix01 th{
width: 10%;
padding: 2px;
text-align: center;
font-size: 0.8em;
vertical-align: top;
color: #333;
background-color: #DED7CF;
border: 1px solid #7A7B7D;
}
.matrix01 td{
padding: 2px;
text-align: right;
font-size: 0.8em;
background-color: #fff;
border: 1px solid #7A7B7D;
}
カテゴリー
HTML&CSSS

<span>タグと<div>タグの違いがようやくわかった

<span>タグは文中で装飾

ブログを書いていると、ココは強調したい一文というのが出てくる。背景色をつけたり、文字色を変えてみたり。DTPではあっさりできるのに、ことhtmlとなると話は別。結構苦労しましたが、何とかできました。

spanタグ,divタグ,違い
<span class=”.CSS名”>
  • classと表記。ココをstyleで表記して、一向にCSSが反映されず右往左往しました。
  • CSSの名称は既存の名称は使わない。当初、.d1という名前をつけたが、TwentyelevenのCSSでは既に同じ名前があり、全く反映されなかった

<div>タグはブロックで装飾

改行を含むブロック全体を装飾するのに最適です。ブログの最後のまとめなど、強調したいと思う、ここぞという時に使えます。

panタグ,divタグ,違い
<div id=”CSS名”>

まとめ

背景色は何度も試してみては挫折くり返し、ほうり投げていましたが、やっと自分のブログに反映できて良かった。

カテゴリー
HTML&CSSS

「引用」のスタイルがイマイチなので、色々と変えてみた

初期設定の引用スタイル

文字に斜体がかかって見づらい、加えて明朝体。どれも好みに合わないので、Webクリエイターボックスさん の記事を参考にCSSをいじくり、変更しました。

引用,スタイル,変更

こちらが初期設定のコード

blockquote {
	font-family: Georgia, "Bitstream Charter", serif;
	font-style: italic;
	font-weight: normal;
	margin: 0 3em;
}

モダンな感じの引用スタイル

背景色をつけて、フォントはゴシック&ノーマルに変更

引用,スタイル,変更
/*変更前 font-family: Georgia, "Bitstream Charter", serif;*/
	font-family: '平成角ゴシック','HeiseiKakuGothic','メイリオ',Meiryo,'MS UIゴシック',sans-serif;
	/*変更前:font-style: italic;*/
	font-style: normal;
	font-weight: normal;
	border-left:5px solid #ddd;
    	background: #eee;
    	padding: 10px;
	margin: 0 3em;
}

文頭と文末に“ ”に入れた引用スタイル

“ ”のマークは、画像で。左頭と右下に入れました。

引用,スタイル,変更
/*font-family: Georgia, "Bitstream Charter", serif;*/
	font-family: '平成角ゴシック','HeiseiKakuGothic','メイリオ',Meiryo,'MS UIゴシック',sans-serif;
	font-size:.8em;	
	/*font-style: italic;*/
	font-style: normal;
	font-weight: normal;
	/*border-left:5px solid #ddd;*/
    /*background: #eee;*/
    background: #eee url(https://charizm0407.com/wp-content/uploads/kakko_top.gif) no-repeat 10px 10px;
    text-indent:5%;
    padding: 15px;
	margin: 0 3em;
}

下のコードは、右下部分のカッコを表示させるCSS。

blockquote span{
    background: url(https://charizm0407.com/wp-content/uploads/kakko_bottom.gif) no-repeat bottom right;
    display: block;
}

htmlのタグ表記も若干変え、<blockquote>に加え、<span>を追加して書きます。

<blockquote><span>ドメインの登録情報は第三者へも公開され、一般の人も確認できる状態で公開することが義務付けられています。公開される情報は「登録者名、住所、電話番号、メールアドレス」です。
ムームードメインでは、個人情報を開示されたくないお客様には、お客様情報の代わりに弊社の登録情報を公開することが可能となっております。お客様情報の公開を希望されない場合は「弊社の情報を代理公開する」を選択してください。</span></blockquote>

まとめ

この作業で、ワードプレスでアイコンなどの画像を、背景に使用する技を学ぶことができ、引用スタイルの変更で、多くのことを学べました。

カテゴリー
HTML&CSSS

CSSのabsoluteとrelativeの違いとは

cssのポジションを本で見ると

absolurte:絶対位置への配置

relative:相対位置への配置

となっていますが、そもそも言葉の意味がわからずで開いた本を閉じたくなりましたが、実際に試してみて何となくわかった気がしたので、まとめました。

absoluteの場合

絶対位置とはブラウザの表示エリア部分のこと(だと思う)で、そこを基準に位置決め。

下の画像は、上から20px下方向、右から20px内方向に設定。

css position

数字を増やすと、この文字がどんどん下に、そして、どんどん右側に移動します。

css position

relativeの場合

一つ前のセレクタを基準に位置を決めているっぽそう。「問い合わせ」の文字部分は、#body4セレクタ。その前の赤い枠部分が#body3セレクタです。ので、この#body3セレクタを基準にして、位置が決められていると思います。
図は上から50px、左から30pxの場合

css_position

上からの位置をマイナスにすると、ご覧の通り、#body3セレクタと重なります。

css_position

ほんと、CSSは奥深くて、理解するのに時間がかかりそうです。

カテゴリー
HTML&CSSS

線との間隔調整にも使える「line-height」

CSSのLine-height」とは

見出しの飾りとして、左頭に実線、下部に破線を設定。が、テキストと下部の破線との間隔がどうも開きすぎて気になる。Paddingで調整するも、全然だめ。天地が幅広になるだけで改善されない。

ということで、line-heightをいじったら調整できました。

line-height 数値違いによる見え方

line-height 100%の時

css line-height

line-height 150%の時

css line-height

line-height 250%の時

css line-height

コードはこんな感じ。

line-height部分の数値のみ変更

        font-size: 15px;
	font-weight: bold;
	color: #050506;
	line-height: 100%;
	border-left:solid 5px #b7d3ff;
	border-bottom: dotted 2px #b7d3ff;
	margin:5px;
	height:30px;
	width:600px;
	padding:10px 0px 0px 10px;
	background-color:#fff56e;
カテゴリー
HTML&CSSS

CSSのお勉強 Padding

余白設定。Padding

文字周りの空きを調整してくれる機能だと思います。四方、個別に設定できるので、便利です。

四方にPadding:10px

左 Padding:10px

右 Padding:10px

上 Padding:10px

下  Padding:10px

四方に設定

こんな感じ

四方にPadding:10px

コードはこちら

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding:10px;width:400px;height:50px;background-color:#b9fff8;">四方にPadding:10px</p>

左のみ設定

左 Padding:10px

小見出しに使えますね。

コードはこちら

<p style="font-weight:bold;color:gray;border-left:solid;margin:5px;padding-left:10px;width:400px;height:50px;background-color:#b9fff8;">左 Padding:10px</p>

右のみ設定

右 Padding:10px

こんな感じ

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding-right:10px;width:400px;height:50px;background-color:#b9fff8;">右 Padding:10px</p>

コードはこちら

上のみ設定

上 Padding:10px

こんな感じ

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding-top:10px;width:400px;height:50px;background-color:#b9fff8;">上 Padding:10px</p>

コードはこちら

下のみ設定

こんな感じ

下  Padding:10px

コードはこちら

<p style="font-weight:bold;color: gray;border-left:solid;margin:5px;padding-bottom:10px;width:400px;height:50px;background-color:#b9fff8;">下  Padding:10px</p>
カテゴリー
HTML&CSSS

htmlで表組みに挑戦

htmlで表組み

DTP、ビジネスドキュメントでは、必ずと言っていいほど出てくる表組み。エクセルを使えばサクッと作れるのに、htmlとなると、全くの経験なし。

ということで、作ってみました。

自分の中での基本形

<table>大枠を決めるタグ。親分
<tr>行を構成するタグ。子分
<td>一つ、一つのセル情報さらに子分

出来上がり

aaabbbccc
%%%
###

コードはコレ。

<table border="1" bordercolor=#ff93d8>
		<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
		<tr><td>%</td><td>%</td><td>%</td></tr>
		<tr><td>#</td><td>#</td><td>#</td></tr>
	</table>

行に色を着けてみる

1列目2列目3列目
1段目1段目1段目
2段目2段目2段目

コードはコレ。

<table border="1" border-color=#aca2ff>
		<tr bgcolor="#c8ffd0"><td>1列目</td><td>2列目</td><td>3列目</td></tr>
		<tr><td>1段目</td><td>1段目</td><td>1段目</td></tr>
		<tr><td>2段目</td><td>2段目</td><td>2段目</td></tr>
	</table>

自分の中の応用編

<th>タイトル行には、こちらの子分を使用。

本文と若干、コードが異なります。

1列目2列目3列目
1段目1段目1段目
2段目2段目2段目

コードはコレ。

<table border="1" border-color=#aca2ff>
		<th>1列目</th><th>2列目</th><th>3列目</th>
		<tr><td>1段目</td><td>1段目</td><td>1段目</td></tr>
		<tr><td>2段目</td><td>2段目</td><td>2段目</td></tr>
	</table>
カテゴリー
HTML&CSSS

生れて初めてJavascriptを書いてみた

ハードル高いぜよ

tmlをかじり、CSSをかじり、どれも中途半端な状態。

いかんなとは思いつつも、未経験のJavascriptに挑戦。挑戦してみたら小さな感動がありました。

使用ブラウザーとバージョン表示

コードは、こんな感じ。

<p><script type="text/javascript" language="javascript">
			<!-- 
			document.write("今使っているブラウザーは",navigator.appName,"だよん<br>");
			document.write("バージョンは",navigator.appVersion,"です<br>");
			 --></script></p>

驚いたのは、navigator.appNameという表記が、サイト表示すると使用ブラウザーごとに変化。

navigator.appVersionという表記が、サイト表示するとそのブラウザーのバージョンを表示

これが、javascriptって奴かと感動!!。

IEでの表示具合

03_js

Firefoxでの表示具合

01_js

Chromeでの表示具合

02_js

残念なのは、FireefoxではなくNetscapeと表示されること。これって何とかならないんですかね・・・

カテゴリー
HTML&CSSS

IEとFirefoxdeCSSの表示が異なる件

<head>~</head>に書き込み

外部リンク扱いでCSSファイルを扱っていましたが、htmlファイル内に直にCSSを書き込むことは未経験だたため、早速挑戦。

<!– –>の表記内にCSSを書き込む。これで囲むことで、表には表示されないようです。

<html>
	<head>

		<style type="text/css"> <!-- 
		h2{font-size=12pt; color=#ff66eb;}
		p{font-size=10pt; color=#3e60ff;}-->
		</style>

	</head>
		<h2>FireFox_CSS表示_文字色:ピンク</h2>
		<p>FireFox_正しく表示されています。_文字色_ブルー</p>
</html>

IE8の表示

h2の情報とPタグのテキストが共に色つきで表示され、CSSが反映されていることがわかります。

01_css

Firefoxで表示

文字に色がついておらず、CSSが全く反映されていません。同じような問題にぶち当たった人がいるのではと検索してみると、同じような悩みを抱えている人が結構いる。早速、色々と試してはみるものの、全く改善される気配なし。

02_css

単なるケアレスミス

よーくコードを見ると、タグと値の間がコロン(:)ではなく、イコール(=)になっていることが判明

p{font-size=10pt; color=#3e60ff;}

早速、コロンにして、プレビューしてみる。

p{font-size:10pt; color:#3e60ff;}
03_css

ザンッ、解決。 そもそもIE8は多少、表記が間違っていようと表示してくれる懐の深いブラウザーかとあらためて見直しました。 けど、メインブラウザーとして、この先使っていくことはないけど・・・。

カテゴリー
HTML&CSSS

サイトの基本情報、head内のタグを整理

メタ情報って何?

仕事の中で、メタ情報という言葉が飛び交うが、全く持って内容を理解せずに使っていたことに反省し、HTMLタグのおさらいを兼ねて、一からお勉強

文字化け防止タグ

<meta https-equiv="content-type" content="text/html; charset=utf-8">

■UT-8の他に、Shift_JISがある。

■記載は<head>~</head>の中で、<title>~</title>の前に入れる。

■charsetは、チャーセットと読む?

検索関連タグ

<meta name="robots" content="index,follow">

検索にひっかからないようにするには、indexをnoindexに、文章内のリンクをたどらないようにするには、followをnofollowと記載

検索キーワードタグ

<meta name="keywords" content="html,refer,css">

検索キーワードの指定。Content=”○○○○”部分にキーワードを入れる。

サイトの説明文

<meta name="description" content="html,refer,cssを詳しく紹介">

サイトの紹介文部分Content=”○○○○”部分にキーワードを入れる。

まとめ

これが自分の考える主だったメタ情報です。これさえ覚えおけば赤っ恥をかかずに済みます