プログラミングぽいお話し
※ほぼ初学者の意見のため、間違いや表現にテキトウさが垣間見られると思います。これを踏まえた上でお読みください。(._.)オジギ(゚゚)(。。)ペコッ
HTML/CSS
ブログごとに、様々なデザインがあると思いますが、これを担っているのが「HTML」と「CSS」になります。
フロントエンド(見える部分)に分類され、簡単に言うと、HTMLが構成、CSSがデザインを表現します。
HTML
タグと呼ばれるもので文章を囲んで、見出しや段落、リンクなどを指定します。
<h1>aaa</h1>見出しタグ h1~h6までありh1>h6
aaa(h1)
aaa(h2)
aaa(h6)
こんな感じですね。
<p>aaa</p>タグ 普通のテキストを表示します ← これもpタグです。←これもか(n回目)
<a>aaa</a>リンクタグ URLを指定できます。
実際はaaaの部分を href="https://google.com/" のようにしてURLを入れます。
このように、タグで囲むことで文章の見せ方を変えられます。
見た目だけなら、入力欄やボタンなども作成できます。input button
他にもたくさんあるので、HTMLで検索してみてください。
背景色や文章の位置(上下左右)、余白、陰影、アニメーションをつけることもできます。
基本的には、HTMLに設定をモリモリにする感じでCSSを書いていきます。
この時にHTMLのコードをより上位のタグで囲みます
<body></body>タグはコード全体
<div></div>タグは範囲指定の専用
これらのタグで囲んだHTMLにid="aaa", class="bbb"などを追記します。
こんな感じです↓ (途中からは,Markdown編集に変更できないのかよ!コードブロックをツカイタッカタ)
<body>
<h1 id="header">見出し</h1>
<div class="all-text">
<p id="text-1">テキスト1</p>
<p id="text-2">テキスト2</p>
</div>
<div class="all-text">
<p>テキストex</p>
</div>
</body>
このように書きます。
idは、固有のもので1回しか使えません。classは、複数回使えるため、同じデザインを適用できます。
基本的には、classを使ってまとめてデザインを適用することが多いです(多分、体感)。
特別?固有の部分(タイトルなど)に、idを使うイメージです(さらに、多分)
ここまではHTMLで、CSSはまた別で書きます。説明が難しい。。。
CSSは<style></style>タグ内に書きます。(bodyタグ、HTMLとは別)
<style>
body {
background-color: #fff; /* 背景色を(16進数のカラーコードで)白に設定 */
font-size: 12px; /* フォントサイズを12pxに設定 */
color: gray; /* 文字色をグレーに設定 */
}
#header {
font-size: 24px; /* フォントサイズを変更 */
font-weight: bold; /* 太字 */
}
.all-text { text-align: left; } /* 文字を左寄せ */
#text-1 { font-weight: bold; } /* 太字に変更 */
#text-2 { color: red; } /* 文字色を赤に変更 */
</style>
こんな感じです。
タグ名(bodyやp)を指定することもできます。
#id名{} .class名{}のように書きます。
私が開発サークルで始めに学習したのが、HTML/CSSでした。
HTML: なるほど、これでwebサイト作ってるのか~
先輩「いや、違うよ~」
最初はこんなもんです笑
WindowsだとF12キーを押すと、そのサイト情報が見られます。シンプルにこれをメモ帳にでもコピーして、web画面(Edge, Chrome)にぺったりすると見た目だけ作ることができます。
入力値をどうこうは、バックエンド C, C++, Ruby, Pythonなどの言語で書くのですが、また別の機会に。。。
どうでしたか?
少しでも気になったら、ググってみてください。100倍分かりやすいサイトもあるかも?
konatsuでした~