#なにこれ
備忘録として私が残しているもの。
なにかとでもサイトを作ったりするときのやり方を残しておく。
#テスト的にサイトを作るやり方
##その1 「CSSをHTMLに直接書く」
デモを確認する
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssをhtmlに直接書く</title>
<style>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
background-image: url(pattern.png);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
border-width: 8px;
border-style: ridge;
border-color: #ded000;
padding: 50px 80px;
background-color: #00005c;
}
</style>
</head>
<body>
<img src="title.svg" alt="">
</body>
</html>
##その2 「JavaScriptをHTMLに直接書く」
デモを確認する
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsを直接htmlに書く</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700" rel="stylesheet">
</head>
<body>
<h1>Sample</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('h1').text('Hello, World!');
});
</script>
</body>
</html>
#終わり
参考にさせていただきました
HTML5&CSS3 デザインレシピ集