[初心者必見] 初心者を抜け出そう！すぐに使える HTML/CSSコード集
Love Be Japan目次
基本情報
CSSコード集
HTMLコード集
もくじ
基本情報
1-1 プラグインの多用が危険な訳
CMS (コンテンツマネージメントシステム）の出現により、ウェブサイトの運用が格段に簡単になりました。
その中でも一番有名なのが、"ワードプレス (WordPress)"。
ワードプレスは、プラグインが豊富でCSSを使わなくても、大抵の機能を実装できます。
ただ、プラグインを多用すると下記のような問題が発生するはご存知でしょうか？
・ワードプレス及びテーマのバージョンアップ (アップグレード)時にウェブサイトが正常に動かなくなる
・ウェブサイト動きが遅くなる
1-2 プラグインのデメリット
"ワードプレス及びテーマのバージョンアップ時に動かないプラグインが出ること"です。
このデメリットは言うまでもないかも知れませんが、プラグインを多用しすぎるとワードプレスやテーマのアップグレード時に動かない機能が出てしまいます。
かと言って、アップグレードをしないと、サイトに脆弱性が出てしまいますので、ハッカーの餌食になりやすくなります。
類似情報は他のサイト、ブログでも紹介されています。
1-3 CMSとは？
コンテンツマネージメントシステム (Contents Management System)の略。管理画面からウェブサイトのコンテンツ(文章、画像など)編集ができるシステムのことです。
CMS例：Wordpress / Joomla / Drupalなど。
私の知っている中で一番有名なのが、WordpressでCMSの半分以上がWordpressと言われています。
2-1 CSSコード集:フォント (文字)系
フォントの種類変更
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
font-family: 'Noto Sans Japanese', Meiryo;
}
フォントサイズ変更
body {
font-size: 14px}
h1 {
font-size: 42px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
2-2 CSSコード集:見出し系
バックグラウンドカラー
{
margin:0 0 10px 0;
padding:16px 10px 16px 10px;
background-color: #f6f6f6;
}
バックグラウンド + 下線
{
margin:0 0 10px 0;
padding-bottom: 3px;
background:#f6f6f6;
border-bottom: 3px solid #4074f7;
}
バックグラウンド + 左帯
{
margin:0 0 10px 0;
padding:16px 10px 16px 10px;
background:#f6f6f6;
border-left: 7px solid #4074f7;
}
注意事項
*1 margin, paddingの際に上下左右別々に設定する場合、下記が順番になります。
[上] [右] [下] [左]
*2 padding = 枠(border)の外側の余白
*3 margin = 枠(border)の内側の余白
2-3 CSSコード集:Header系
Headerの高さ変更(Headerの高さを低くする)
#header .pad {
padding-top:0;
padding-bottom:0;
}
HTMLコード集
3-1: アンカーポイント
1. 目次に下記を追加
<a href="#アンカー名">目次タイトル</a>
2. ジャンプ先の項目のタイトルに下記を追加
<a name="アンカー名">目次タイトル</a>
例： 目次タイトルが アンカー1の場合下記のように書きます。
目次 : <a href="#an1">アンカー1</a>
アンカーポイント : <a name="an1">アンカー1</a>
*H1タグなどを使用している場所にアンカーポイントを作成する場合は、下記の方法でアンカーポイントを作成します。
<h1 id="アンカー名">目次タイトル</h1>
3-2:別のページに飛ばす
同じサイトの別のページに飛ばしたいとき
[例]"about.html"というページに飛ばしたいとき
<a href="about.html">
別サイトのページに飛ばしたいとき
[例]"https://www.it-america.com/list-america-volunteer-charity-community/"に飛ばしたいとき
<a href="https://www.it-america.com/list-america-volunteer-charity-community/">
Follow me!
