CSSで使った技術

今回は僕がサイトを制作するために使ったサイトやCSSの書き方についてまとめてみました。CSS歴0の僕がサイトを作っているときによく使ったものを書きました、なのでこのサイトは初心者向けになると思います。 HTMLを1から書いてサイトを作るときに使った技術です。WordPressなどのCMSで使えるかはわかりません。

最後に僕がサイトを作るときに工夫したことをサイトの表示速度と管理のしやすさを上げるという点についてまとめました。

リストの左にある黒い点を消す

ul {
  list-style: none;
}

リンクテキストの下線を消す

a {
  text-decoration: none;
}

横方向に中央寄せする

3種類の書き方を紹介します。

  • 文章が含まれる要素か、その親要素に対して
text-align: center;
  • p、div、ul、h1〜h6などのdisplay:blockの要素に対して
margin-left: auto;
margin-right: auto;
  • CSSのFlexboxを使う
display: flex;
justify-content: center;
align-items: center;

領域をはみ出したときに…で省略(1行のみ)

p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

領域をはみ出したときに…で省略(複数行)

overflow:hidden;は親要素につける。


				

レスポンシブ対応させる

  • head要素内に以下を指定する

				
  • ブラウザーの横幅によって、デザインを変えることが出来る

コンピュータやスマホなどのスクリーン画面を持ったデバイスで1000px以下の横幅の場合に適応される

@media screen and (max-width:1000px) {
}

Media Queries Level 4からは、こんな書き方もできるらしい。画面の横幅が320px以上600px未満の時に適用される。

@media screen and (320px <= width < 600px) {
}

画像の縦横比を維持したまま枠に画像を埋め込む

img {
  object-fit: cover;
}

Webフォントの指定

font-familyの後に自分が設定したいフォント名(font-familyで指定するときに使う)、src:url()にはアップロードしたフォントを指定する

@font-face{
  font-family:"Korneuburg-Slab-Regular";
  src:url("../../../fonts/Korneuburg-Slab-Regular.otf")
}

画像をGoogleDriveから読み込ませる

img要素のsrc属性にあるid=の後に共有可能なリンクを所得のURL内にあるhttps://drive.google.com/open?id=id=以下の文字を書く。

見出しのCSS紹介

h1の見出し

h1 {
  font-size: 1.7em;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
}

h2の見出し

h2 {
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  padding: .25em 0 .25em .75em;
  border-left: 6px solid #3498db;
}
h2::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

h3の見出し

h3 {
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  padding: .5em .75em;
  background-color: #66FF82;
  border-radius: 2px;
}
h3::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #66FF82;
}

サイトの表示速度を上げるために工夫したこと

フォントが読み込まれるまで他のフォントを読み込む

Webフォントが読み込まれるまでは一時的にsans-serifを読み込み、テキストを表示する。

@font-face内にfont-display: swap;を書く。

@font-face {
  font-family: "SourceHanSansJP-Normal";
  src: url("../../../sp/fonts/SourceHanSansJP-Normal.woff");
  font-display: swap;
}

フォントを読み込むときにfont-family: の後ろに他のフォント名を書く。

p {
  font-family: "SourceHanSansJP-Normal", sans-serif;
}

WebPを表示させる

対応していないブラウザーの場合にPNGを代わりに表示する。

srcset=にWebPのファイル、src=にPNGのファイルを指定する。

.htaccessでgzipを有効にする


AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype

.htaccessでキャッシュを有効にする

拡張子がwebp、jpg、jpeg、png、gif、swf、js、css、ico、woffのものを10日間キャッシュを有効にする



ExpiresActive On
ExpiresDefault "access plus 10 days"

サイトを管理しやすくするために工夫したこと

パンくずリストをJavaScriptで自動生成

これを使わせてもらいました。 改良した点は、パンくずリストの太文字で表示される場所をtitle要素で指定したものにした。 詳しい使い方はここへどうぞ。

breadCrumbJsData = function(){

/*----------------------------------------*/
/*  index.html をパンくずリスト生成に含めるかどうか定義します。
/*  false … index.html を無視する
/*  true … index.html を無視しない
/*----------------------------------------*/
this.indexMatch = false;

/*----------------------------------------*/
/*  パンくずリストから除外するパスを定義してください。
/*  最後に「/」を付けないようにしてください。
/*  除外しない場合 … ''
/*  除外する場合    … '/lab/breadCrumbJs'
/*----------------------------------------*/
this.ignorePath = '/archives';
this.currentPath = '';

/*----------------------------------------*/
/*  パンくずリストに表示する名前を定義してください。
/*  (書式) "ディレクトリ名" : "表示名"
/*----------------------------------------*/
this.contentName = {
	"home" : "ホーム", // この行は残してください。
	"/nijigen/" : "2次元",
	"/nijigen/anime/" : "アニメ",
	"/nijigen/visual-novel/" : "美少女ゲーム",
	"/other/" : "その他",
	"/pc/" : "PC",
	"/pc/raspberrypi/" : "RaspberryPi",
	"" : "" //この行は残してください。
  };
}
var breadCrumbJsData = new breadCrumbJsData();

function breadCrumbJs(){
/*----------------------------------------*/
/*  以下条件分岐 / 表示処理部分
/*----------------------------------------*/
var URL = window.location.pathname.replace(breadCrumbJsData.ignorePath, '');
var thisURL = URL.match(/(.*?)\//g);
var fileName =  window.location.pathname.match(/([^¥/]+?)$/);
var titleName =  document.title;

if ( fileName && (!( fileName[0].match("index") && !breadCrumbJsData.indexMatch )) ){ thisURL.push( fileName[0] ); }
var drw = document.getElementById("breadCrumb");
var rootingPath = "";
if ( drw.tagName == "P" | drw.tagName == "DIV" ){
	for( i=0; i' + funcIndexSearch('home') + '';
		} else if ( i == thisURL.length - 1 ){
			/*drw.innerHTML += ' > ' + funcIndexSearch(rootingPath) + '';*/
			drw.innerHTML += ' > ' + titleName + '';
		} else {
			drw.innerHTML += ' > ' + funcIndexSearch(rootingPath) + '';
		}
	}
}
if ( drw.tagName == "UL" | drw.tagName == "OL" ){
	for( i=0; i' + funcIndexSearch('home') + '';
		} else if ( i == thisURL.length - 1 ){
			drw.innerHTML += ' 
  • ' + funcIndexSearch(rootingPath) + '
  • '; } else { drw.innerHTML += '
  • ' + funcIndexSearch(rootingPath) + '
  • '; } } } } function funcIndexSearch(){ /*----------------------------------------*/ /* パンくずリスト生成検索処理 /*----------------------------------------*/ keyword = breadCrumbJsData.contentName[arguments[0]]; if(keyword == undefined){ return arguments[0].match(/(.*?)\//g).pop().replace("/",""); } else{ return keyword; } } if(window.addEventListener) { window.addEventListener("load", breadCrumbJs, false); } else if(window.attachEvent) { window.attachEvent("onload", breadCrumbJs); }

    表示したいところに以下を追加する

    更新日をJavaScriptで自動生成

    var day = new Date(document.lastModified);
    var y = day.getFullYear();			// 年を取得
    var m = day.getMonth() + 1;			// 月を取得
    var d = day.getDate();				// 日にちを取得
    
    document.write("更新日:"+ y + "年" + m + "月" + d + "日");

    表示したいHTMLの所で以下のようにスクリプトを読み込む

    HTML要素をひとまとまりにして管理した

    すべてのページに「最近の記事」を毎回書き込み・書き換えるのが面倒だったので、HTML要素をひとまとまりにして管理することにした。

    head要素内で以下を読み込む(jQuery必要)

    $(function() {
       $("#sp_title").load("../../../include/sp_title.html");
       $("#sp_menu").load("../../../include/sp_menu.html");
       $("#pc_title").load("../../../include/pc_title.html");
       $("#pc_menu").load("../../../include/pc_menu.html");
       $("#pc_side").load("../../../include/pc_side.html");
       $("#recommended_article").load("../../../include/recommended_article.html");
    });

    /include以下に上で指定したhtmlファイルを置く。 下はpc_side.htmlの内容です。

    pc_side.htmlを表示したい場所に以下を書き込む