カテゴリー
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名”>

まとめ

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

カテゴリー
WPカスタマイズ

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

自己紹介に写真入れ

写真をアップするのは記事投稿のみ。なので、ウィジェット部分への写真アップ法がわからず放置していましたが、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>
カテゴリー
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

生れて初めて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は多少、表記が間違っていようと表示してくれる懐の深いブラウザーかとあらためて見直しました。 けど、メインブラウザーとして、この先使っていくことはないけど・・・。

カテゴリー
WPカスタマイズ

TwentyElevenフォント変更 記事ページ

記事フォントに変更

次いで、記事ページのフォント変更に挑戦。前々からフォントがでかすぎだろーと気になっていたので、このタイミングを機に変更してみました。

1.CSSファイルを探す

まず、フォントデータが書かれているファイルstyle.cssを開きます。

WordPress>wp-content>themes>twentyeleven>style.css

wp_01

2.cssを変更

1112行目の.singularが、記事ページのタイトルフォントになります。Htmlエディタ(crescenteve)にてfont-sizeで検索をかけると、たくさん出てきたので、目星をつけて画面を見ながら変化をチェック。

そうこうするうちに、4回目位でヒット。結構しんどい作業でした。

1112_after

4.出来上がり

タイトルのフォントがかなり小さくなりました。

twenty_s_before twenty_s_afters
カテゴリー
WPカスタマイズ

TwentyElevnのタイトルフォント変更

TwentyElevenが一番

色々なテーマを試してみましたが、結局の所、落ち着いた先は、デフォルト設定の「TwentyEleven」。とは言っても、気になる点がいくつかあるので、少ない知識を振り絞り、カスタマイズに挑戦。

とりあえず初心者にとってハードルの低いフォント周りからいじってみました。

1.CSSを変更

まず、フォントデータが書かれているファイルstyle.cssを開きます。

WordPress>wp-content>themes>twentyeleven>style.css

TwentyEleven

2.テキストを変更

Style.cssを開き、319行目。Font部分を編集。font-weightは太さ、line-heightは行間で

TwentyEleven TwentyEleven

737行目の.entry-title{ 部分の編集

TwentyEleven TwentyEleven

4.出来上がり

TwentyEleven TwentyEleven

びみょーですが、フォント周りが変更されました。PHP部分のフォントが・・・。