konatsuのブログ

学生が思う気ままにキーボードをたたきます

プログラミングぽいお話し

※ほぼ初学者の意見のため、間違いや表現にテキトウさが垣間見られると思います。これを踏まえた上でお読みください。(._.)オジギ(゚゚)(。。)ペコッ

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を入れます。

はてなブログ (hatenablog.com)

 

このように、タグで囲むことで文章の見せ方を変えられます。

見た目だけなら、入力欄やボタンなども作成できます。input button

他にもたくさんあるので、HTMLで検索してみてください。

 

CSS

背景色や文章の位置(上下左右)、余白、陰影、アニメーションをつけることもできます。

基本的には、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サイト作ってるのか~

 

次は、CSS!? まさかこれが、C言語とか言うやつか!!

先輩「いや、違うよ~」

最初はこんなもんです笑

 

 

WindowsだとF12キーを押すと、そのサイト情報が見られます。シンプルにこれをメモ帳にでもコピーして、web画面(Edge, Chrome)にぺったりすると見た目だけ作ることができます。

入力値をどうこうは、バックエンド C, C++, Ruby, Pythonなどの言語で書くのですが、また別の機会に。。。

 

どうでしたか?

少しでも気になったら、ググってみてください。100倍分かりやすいサイトもあるかも?

konatsuでした~