otaku-tokyo

 

CSS

height

height: OO%; は親要素にheight: 200px;とか指定されてないと効果がない

角丸table

table{ boder-collapse: separate;} //隣接ボーダーを重ねる場合は: collapse;

このままだとボーダー間に隙間ができるのでborder-spacing: 0;でボーダーの太さを0にする。その後border-radius: 6px;を指定。

th:first-child th{ border-radius: 6px 0 0 6px;}と設定

label

<label for=”japan”>Japan</label><input type=”checkbox” id=”japan”>

inputとlabelタグをセットにすることでlabel要素をクリックしてもフォームがアクティブ化する。また、input要素にフォーカスしたときにlabel要素を読み上げてくれるのが視覚障害者のためにもなりSEO的に良い。

特定のページのみデザインを変更する方法

blacksurgenight.phpを新規作成し、冒頭に以下のコードを記述

<?php

/*

Template Name: Black Surge Night

Template Post Type: post, page

*/

?>

あとはエディタ横の投稿の属性からテンプレートファイルを指定するだけ

WordPressテーマ作成でお世話になったサイト

https://plusers.net/wordpress_theme_4

投稿ページ

h2とpのかたまりをsectionで囲む

広告にはasideでマークアップ

schema.orgとmicrodataの構造化データをhttps://search.google.com/structured-data/testing-tool/で検証

謎のスペースを消す

①タグ間の全角スペース

②タグ間の改行

➂*{ margin:0; padding:0;}を入れる

④画像の下に隙間がある場合はimg{ vertical-align: bottom; }で直る

入れ子

入れ子チートシート:https://yoshikawaweb.com/element/

navの中にはh1~h6、div、olなどを入れて良い。

ulの中には li/template/script しか入れてはいけない。

ulの中にulを入れたい場合はliの中にulを書くこと

また、liタグの中にはa,p,h2など何でも入れてよい。

 

中央寄せ

以下の2つはdisplay:flex;以下の性能なので不採用。

margin: 0 auto;

②セレクタは自身を指定すること

①divなどには使用可能。pタグなどのブロック要素は幅が既に100%なのでmarginの余白とりが効かない。widthを指定すればよい。

text-align: center;

②セレクタは親要素を指定すること

①pタグに使用するとpタグ内のテキストがインライン要素なので機能する。インライン要素であるspanやimgタグを中央寄せしたい場合は親要素にtext-alignする

※もしimgにmarginで中央寄せする必要があるならdisplay: block;を追加すればよい

※inline-blockはインライン扱いなのでmarginは効かない。text-alignで中央寄せすること

 

採用したのはdisplay:flex;

https://mamewaza.com/support/blog/howto-use-flex.html

ul {
display: -webkit-flex;
display: flex;

-webkit-justify-content: space-around;
justify-content: space-around;
}

 

横並び

display:inline-block; ←inline化するのでwidthやheightを指定できなくなる

float:left;

display:flex;

 

親要素{

display: (-webkit-)flex; //子要素を横並びにする

flex-wrap: wrap; //画面の縮小に応じて子要素が下に回り込む no-wrap;  //下に回り込むのを防ぐ

(-webkit-)flex-direction: column; //縦並び

(-webkit-)justify-content: center; //中央寄せ flex-start; //左寄せ space-between; //左右隙間なしの均等配置 space-around; //左右隙間アリの均等配置

}

子要素{

(-webkit-)flex-grow: 1; //1:1の比率で要素が伸長

}

子要素:nth-of-type(1){

(-webkit-)flex-grow: 1; //1番目の要素だけ伸長

}

子要素:nth-of-type(2){

(-webkit-)flex-basis: 100px; //2番目の要素幅を固定

}

 

二重線

①border: double 4px #000;

4px以上にしないと二重線にならないし、2つの枠の隙間幅を指定できない

②border: solid 1px #000; outline: solid 1px #000; outline-offset: 3px; margin:4px;

内側に枠線が引けない