HTML&CSSが分かった気になる記事byProgate~私はこれでポートフォリオを作りました!~
何がプログラミングスクール出身のほうがマシやねん
Progateで初級~flex-boxまでやったので、それのまとめ
超初歩的な用語の説明
HTML
ホームページの骨組みです。テキストやら画像、別のページヘのリンクはここで編集する。
CSS
ホームページを綺麗に整えるためのもの。テキストのフォントや大きさ、位置などはここで指定する。
JavaScript
ホームページをもっと凝ったものにしたり、双方向でやり取りしたい時に必要。ここでは使ってないので省略。
ソースコード(表紙部分)
現状一番手が込んでいるのが表紙部分なので、そこを中心に説明していこうと思う
上から下に流れて説明したいので、ソースコード中にコメントアウトという形で書く
ちなみにコメントアウトは
code:html
<!-- コメント -->
<!--
ここにコメント
ここにコメント
-->
ちょっと分かりづらいかもというところはコード外で補足する
index.html
基本的な書き方は、<タグ名>文章</タグ名>といった感じである
code:html
<!DOCTYPE html>
<!-- この文書はhtmlですよっていう宣言 -->
<html>
<head>
<!--
htmlタグ、headタグ、下にあるbodyタグは絶対つけなあかん
headタグは文字コードの指定やhtmlへのリンク(cssとか)、ブラウザのタブとかに書かれてる
ページのタイトルとかをつけるところやで
headタグやbodyタグのインデントはまあ好みやな
-->
<meta charset="utf-8">
<!--
文字コードの指定ってやつや
今は大体utf-8が多いんちゃうか?
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
このページの横幅は今見てるデバイスの横幅に合わせますってことや
レスポンシブ対応(簡単に言えばスマホでも見栄え良くすることや)するときには
必ず入れるタグやな
cssのメディアクエリと一緒に書くわ、この辺はcssでも説明するわ
-->
<!--
Webフォントの情報やな
フォントってそのまま指定しても、他のやつが見てるデバイスにはそのフォントが
入ってなかったりするかもしれんから、Webにあるフォントの情報を引っ張ってきて
貼り付けるのがスタンダードなんや
有名なんはgoogle fontsとかAdobe Fontsやな(Adobeは有料だったはずやで!)
フォントはcssで指定するで
-->
<link rel="stylesheet" href="css/top.css">
<!--
下に書いてあるcssを引っ張ってくるって意味や
ちなみにcssは複数引っ張って来れるから、
パソコン用のcssとスマホ用のcssに分割して持ってくる人もおるで
どちらが主流かは知らん、すまん
-->
<title>Miyamoto Rin</title>
<!-- ページのタイトルや -->
</head>
<body>
<!-- bodyタグの中は文書の中身を書いていくで -->
<!--
このポートフォリオではいきなりdivタグから始めてるけど、
headerタグを付けて一番上にメニュー(Scrapboxなら検索窓とかあるところ)を
作る人とかも多いで(多分そうしたほうがええで!)
-->
<div class="top-wrapper">
<!--
divタグは文章とかを入れる入れ物やと思うてくれたらええ
cssとかで装飾するときに重要になるで
divタグそのままやと何が入ってるかわからんから、
cssが識別するためにclassを書いてるで
Progateではあまり使わんかったけど、idってのもあるで
class名は何回でも使えて、id名は一個のタグにしか使えんって違いやな
-->
<div class="container">
<div class="heading">
<h1>MIYAMOTO RIN</h1>
<!--
見出しに使うタグとしては、h1からh6まであるで
数字が大きくなればなるほど文字の大きさがちっちゃくなるで
-->
</div>
<div class="main-box">
<div class="box-left">
<div class="oreno-nav">
<ul>
<!-- ulタグはリストを作るときに使うで -->
<li><a href="index.html" class="nav-link">Top</a></li>
<!--
liタグはリストの要素やで
aタグは他のページへのリンクを貼るときに使うで
-->
<li><a href="profile.html" class="nav-link">Profile</a></li>
<li><a href="works.html" class="nav-link">Works</a></li>
<!--
気づいてるかもしれんけど、liタグには同じ名前のクラスを使ってるで
一括してcssで指定したいときにはclassを使うんや
-->
</ul>
</div>
</div>
<div class="box-right">
<img class="I" src="images/portfolio.jpg">
<!-- 画像を表示したいときにはimgタグや -->
</div>
</div>
</div>
</div>
</body>
</html>
これがHTMLファイル
top.css
基本的な書き方としては、htmlのタグかclass名 {指定するもの: こうしたい}といった感じ
code:css
body {
/* タグ名と波かっこの間は必ず半角スペース開けるんや、意外と忘れるで! */
/*
bodyタグで指定した部分はページ全部に指定してることとおんなじやから、
ここで文字の大きさとかの基本的な指定をする人は多いと思うで
*/
background-color: forestgreen;
/*
背景を装飾したいときはbackgroundを指定するんやで
backgroundだけやと他にも指定せないかんもんがあるから、
背景色だけ変えたい場合はbackground-colorを指定するとええわ
色の指定の仕方はRGB方式とか色々あるから色々調べたらええわ
*/
}
h1 {
font-family: 'Poppins', sans-serif;
/* font-familyは文章のフォントを指定するんやで */
}
p {
font-family: 'Noto Sans JP', sans-serif;
}
.container {
margin: 0 auto;
/*
marginってのは余白のことなんやけど、紛らわしいのにpaddingってのがあるで
paddingも余白なんやけど、paddingは箱の内側の余白、marginは箱の外側の余白やで
先に説明すると、箱の横幅を決めるwidthってもんがあるんやけど、
widthはpadding込みで横幅を決めるで
margin(paddingもそうやけど)は指定する値の数によって指定する場所が変わるんや
1つなら上下左右全部、2つなら上下、左右の順、3つなら上、下、左右の順
4つなら上、右、下、左の順番に余白を指定していくで
ここでcontainerクラスのmarginを説明すると、ここでは2つ渡してるから、
上下は余白0、左右はauto、つまり勝手にやってくれってことやで
左右をautoにしたら両方とも同じ分の余白をとってくれるから、
中央揃えをしたいときにつけたいね
*/
width: 80%;
/*
親のクラス(つまりtop-wrapperやな、まあここではbodyの幅やと思ってくれたらええわ)
の80%の横幅を取るってことやね
ここで思い出して欲しいんやけど、ページの幅ってデバイスの横幅やったよな?
つまりcontainerクラスはデバイスの横幅の80%の幅ってことやで!
*/
text-align: center;
/*
text-alignは文章を揃える位置を決めるで
ここではcenterを指定してるから、中央揃えってことやな
*/
}
.main-box {
display: flex;
/*
いよいよ1番の難関のflex-boxの説明に入ってくるで、覚悟しときや
*/
}
.box-left {
width: 30%
}
.oreno-nav {
text-align: left;
}
.oreno-nav li {
padding: 10px 0;
}
.nav-link {
text-decoration: none;
}
.nav-link:hover {
opacity: 0.7;
}
.box-right {
width: 70%
}
.I {
width: 50%;
text-align: right;
}
@media(max-width: 670px) {
.container {
width: 90%;
}
.main-box {
flex-wrap: wrap-reverse;
}
.box-left {
width: 100%;
}
.box-right {
width: 100%;
}
}
こっちがCSSファイル