【コーディング時短】CODE PENでHTML、CSSのマイテンプレを作ってみよう

programming

以前、CODE PENの登録方法とブログへの添付方法をご紹介しました。

 

ブログ上にプログラミングコードを綺麗に載せる方法

 

で、そもそもCODE PENってめっちゃ使いやすいんじゃないか?と思い、他にも色々活用しようと思いました!

 

たみお
たみお

もはやCODE PEN上でサイト作れるんじゃないか?w

ナマケモノ
ナマケモノ

オメェなにバカなこと言ってんだ

たみお
たみお

だ、誰だお前!!

ナマケモノ
ナマケモノ

ナマケモノだ。見りゃわかるだろ

たみお
たみお

・・・・

と言うことで、プログラミングに使えるように、HTML、CSSの簡単なテンプレを作成していこうと思います。

 

スポンサーリンク

作成したCODE PEN

See the Pen HTML,CSSテンプレート by tami0525 (@tami0525) on CodePen.

 

こんな感じで作成しました。

たみお
たみお

CSSは知識不足なので全く思いつかずww

これから勉強してまた足していこうと思います。

以下、テンプレの解説を行います。

スポンサーリンク

HTMLで最低限必要なもの

 

HTMLのコードを書くときに最低限必要なものを考えてみました。

上から簡単に解説していきます。

<!DOCTYPE html>

「このテキストはHTMLです!」とブラウザに宣言するコードです。ビックリマークで強調するのを忘れずに。

 

<html lang=”ja”>

「このHTMLは日本語使いますよ!」とブラウザに宣言するコードです。

 

<head></head>

特にめんどくさい&毎回あんまり変わらないのはこの<head>の部分ですよね。

この中には、作成するページの設定やリンクなどを書き込んでいきます。

以下、<head>の中身の解説。

<meta charset=”UTF-8″>

「このHTMLの文字コードはUTF-8だよ!」と言う宣言。

 

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

スマホなどの端末で表示した場合の画面サイズの指定です。

 

width=device-width:幅をデバイスの画面幅に調節します。
initial-scale=1.0:初期表示時のスケールを等倍します。

 

<meta name=”description” content=”・・・”>

「”・・・”」の部分にサイトの説明を記述します。

この部分は検索結果に引用され、SEOにも影響します。

 

ナマケモノ
ナマケモノ
120文字以内に収めるといいぜ。
たみお
たみお

(こいつ、何者なんだ・・・)

この欄が空白、または未設定の場合は、検索エンジンはページ内のテキスト、またはAlt属性の値を抽出して検索結果に反映します。

 

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

IE(Internet Explorer)の古いバージョンでの互換表示を防ぐコードです。

 

<title>・・・・</title>

作成するページのタイトルを書きます。検索結果やブックマークにも引用されます。

 

ナマケモノ
ナマケモノ

ここは30文字以内で書くのがいいぜ。

<link rel=”shortcut icon” href=”・・・” >

faviconと言う、ウェブサイトのシンボルマークを設定できるコードです。

↑こう言うやつ

 

ナマケモノ
ナマケモノ

 favorite iconを短略した語句だぜ。

 

<link rel=”stylesheet” href=”style.css”>

CSSを読み込むためのコードです。

 

<main>・・・</main>

ここからmainの部分です。mainの僕の構成は、今のところ

・<header>

・<div class=”main”>

・<footer>

で分けると思うのでこれらを設置しました。

 

また、<div class=”main”>の中のcontentsも、基本形として3つ設置しました。必要に応じて増減していく形です。

 

スポンサーリンク

CSSで最低限必要なもの

CSSも必要最低限のものを。と言うか、まだ知識不足です^^;

たみお
たみお

2種類しか思いつきませんでした。

これからまた必要とわかったら、随時更新していきます。

 

@charset “utf-8”;

スタイルシートでのエンコーディングをutf-8に設定します。

 

body{
font: 14px/1.6 “Hiragino Kaku Gothic Pro”,Osaka,”メイリオ”,”MS Pゴシック”,”MS PGothic”,Verdana,Arial,sans-serif;
}

bodyのプロバティで、基本のフォントサイズ、適用される文字スタイルを設定します。

 

スポンサーリンク

終わりに

以上、最低限のHTML,CSSテンプレートをCODE PENで作成しました。

足りない部分は、今後随時追加してより使いやすいものにしたいと思います。

 

たみお
たみお

ところで、ほんと急に出てきたねあなた。

ナマケモノ
ナマケモノ

あぁ?悪いか?

たみお
たみお

いえ、大丈夫です。これからお願いします。

(怖い・・。それに手の赤いやつ・・何がついてるの・・。)

 

コメント