Zenn
🙄

【初心者向け/ITスクール36日】CSSのタグ一覧

2023/08/30に公開
CSS
HTML
初心者
tech

はじめに

今日は、ITスクールに通った36日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

36日目は、CSSを活用して、WEBページを作成する実習をしました。しかし、今日は簡単にCSSの属性み作成する予定です。下段の記事からその理由がお分かりになれると思います。

最近の記事
https://zenn.dev/eldorado215/articles/df7da2c06844d4

テーブル

最近は、テクノロジーの進歩によって、レイアウトはFlex Containerとgridで提供することが普通だと思います。しかし、今日はなぜか、テーブルでWEBページを作成することになりました。
WEB標準上、テーブルでWEBを作成することはいけないというルールはありませんが、原則上、
タグはそのタグの目的によって使用することが正しいと思います。
SEOまで考えますと、他の方法で改善したいと思います。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angry Maru</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<table id="siteTitleArea">
		<tr>
			<td id="siteMenuArea">
				<table>
					<tr>
						<td>
							<a href="index.html">홈</a>
						</td>
						<td>
							<a href="diary.html">마루일기</a>
						</td>
						<td>
							<a href="gallary.html">사진 및 동영상</a>
						</td>
						<td>
							<a href="guestbook.html">방명록</a>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td align="center">
				<table id="siteTitle">
					<tr>
						<td>쫄보니까 놀래키지마루!</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<table id="siteContentArea">
		<tr>
			<td align="center">
				<video src="css/maru3.mp4" controls="controls" id="maruVideo"></video>
				<br>
			</td>
		</tr>
	</table>
</body>
</html

こちらがWelcome Pageになります。まず、sementic htmlを使わなかったため、何か何かが分からないところとテーブルは一つだけ属性を追加したり、削除したら崩れてしまいます。
このようなパータンはページを保守したり、後継ぎにする人には読みづらいと思いますので、
今日は初めて授業に参加せずに、個人勉強をしました。

こちらのページに関しては今後、Flexbox、Gridを勉強し、アップロードします。

CSS more attribute

@font-face {
	font-family: "Imsoso";
	src: url("Imsoso.ttf");
}

WEBフォントをimportするコードです。font-familyでカスタムするfont-nameを指定します。
src内のurlはfontのアドレスです。

::-webkit-scrollbar {
	display: none;
}

Scrollbarを隠すコードです。FirefoxとInternet Exploreでは、活用できない属性です。

#siteContentArea {
	width: 1000px;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 200px;
}

autoというvalueで自動整列することができます。

box-shadow: teal 3px 3px 5px;

写真、ボックスなどに影を入れることができます。

最後に

実力不足と経験不足でまた、レイアウトを思ったイメージで作成することはできないので、Flexboxtとgridを勉強しつつ、これから様々なサイトをコピーする練習をしようと思います。
今日の授業よりいいデザインの掲示板を作成してみたいです！

Discussion