タグ: css

HTML&CSSS

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

投稿者作成者: charizm0407
投稿日 2014年2月16日

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;
}

Tags: css

タグ css

HTML&CSSS

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

投稿者作成者: charizm0407
投稿日 2014年1月17日

<span>タグは文中で装飾

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

<span　class＝”.CSS名”>

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

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

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

<div　id＝”CSS名”>

まとめ

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

Tags: css, html

タグ css, html

WPカスタマイズ

今までの知識を総動員して、自己紹介に写真を入れてみた

投稿者作成者: charizm0407
投稿日 2014年1月16日

自己紹介に写真入れ

写真をアップするのは記事投稿のみ。なので、ウィジェット部分への写真アップ法がわからず放置していましたが、CSSの引用カスタマイズで学んだ内容を応用して、アップすることができました。

URLをコピペして、ウィジェットに。

ウィジェットに<head>～<head>を書き込み

CSSの直書きが面倒なので、<head>～<head>内にCSSを書いてみて、プレビューしたら、見事に反映されました。で、<img>タグと<h1>に、それぞれCSSの数値を書いていった訳ですが、この数値がサイト全体に影響を及ぼすことに。画像は大きくなるわ、見出し設定の<h1>がセンター揃えに。

<div>タグの使い方がやっとわかった

hタグ、pタグそれぞれの装飾をCSSを定義するってのは、わかりますが、じゃ、これ以外の装飾をしたい時はどうするの？という素朴な疑問が。時にpタグ表記でも、背景色をつけたい時もあるだろうしー、タグが少なすぎる～って思いましたが、<div>タグで囲えば、この疑問を解決してくれます。

まとめ

色々と学んだことを応用して、複合的に活かせたことは初心者にとっては大きな進歩。この発見ごとがあるから、愉しくてやめられまへん。靄が晴れてくる感じです。

コード

<head>
	<style type="text/css">
	#profile{
		margin: 10px 0px 0px 10px;
                padding:3px;
                border:1px #7A7B7D solid;
		position: relative;
                width:150px;
                height:115px;
		left:60px;
	　　　　}
　　　　#name{
　　　　　　　　color:#ED1C24;
　　　　　　　　font-size: 1.3em;
　　　　　　　　font-weight: bold;
　　　　　　　　text-align: center; 
　　　　　　　　}
	</style>
</head>

<div id=profile>
<img src="https://charizm0407.com/wp-content/uploads/charizm_icon_image.png"></div>

<div id=name>charizm0407</div>
<p>はじめまして、当ブログを運営しているcharizm0407です。ワードプレスのカスタマイズネタを中心に、ブログを綴っていきます。<br>薄っぺらい情報を画像を、ふんだんに使って、水増ししてお届けします。</p>

Tags: css, Wordpress

タグ css, Wordpress

HTML&CSSS

CSSのabsoluteとrelativeの違いとは

投稿者作成者: charizm0407
投稿日 2013年12月14日
CSSのabsoluteとrelativeの違いとはへのコメントはまだありません

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

absolurte：絶対位置への配置

relative：相対位置への配置

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

absoluteの場合

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

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

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

relativeの場合

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

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

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

Tags: css, html

タグ css, html

HTML&CSSS

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

CSSのLine-height」とは

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

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

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

line-height　100%の時

line-height　150%の時

line-height　250%の時

コードはこんな感じ。

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;

Tags: css, html

タグ css, html

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>

Tags: css, Padding

タグ css, Padding

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での表示具合

Firefoxでの表示具合

Chromeでの表示具合

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

Tags: css, html, javascript

タグ css, html, javascript

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>