プリント作成のためにHTMLの階層構造を勉強

近い将来に自社商品を販売するために「HTML形式のプリント」を開発する。

HTML形式にするのは、Illustratorと違いPHPをかませれば図やバリエーションを自動で大量に作れるし、将来のサイト自体のツール化につながるから。

少しいじらないと忘れてしまうので、覚書がてらhtmlの全体構造を記していく

目次(クリックでジャンプ)

HTMLの基本形(復習)

<!DOCTYPE HTML>
<html lang=”ja”>

<head>

</head>

<body>

ここにページの内容

</body>

</html>

自分のメインサイトの構造の分析

サイトとデザイン(CSS)を共通化して効率化とブランド化を図りたいので、構造を参考にする

使用テーマは「Cocoon」

サイト構造(コンテンツ周り)

<body>

<div id=”container” class=”container cf”>

<div id=”header-container” class=”header-container”>この中にさらにdivがあって、その中に<header></header>と<navi></navi>がある
</div>

<div id=”content” class=”content cf”>

<div id=”content-in” class=”content-in wrap”>

<main id=”main” class=”main” >

<div id=”breadcrum” class=”…”>パンくずリスト</div>

<article id=”post○○” class=”無数のクラスが設定されているｗ”>

<header class=”article-header entry-header”>h1見出しとアイキャッチと日付</header>

<div class=”entry-content cf”>ここでやっと記事内容
</div>

</article>

</main>

</div>

<footer id=”footer” class=”footer footer-container nwa”>この中にさらに四重に<div>が入っている
</footer>

</div>

</body>

記事内容がめちゃくちゃ深くにあるのと、色んなタグがあるのに驚いたwww(mainタグ…文書に一回しか使えない、)

プリントの台紙にあたるのは「main」のようだ。

デザイン(CSSなど)

bodyから深い階層を見ていく

<body>に設定されているクラスのCSS

font-weight: 400;
font-size: 18px;
display: block;
background: linear-gradient(90deg,#fbab73,#fdea8e);
font-family: “游ゴシック体”, “Yu Gothic”, “Hiragino Kaku Gothic Pro”, “Meiryo”, sans-serif;
color: #333;
line-height: 1.8;
overflow-wrap: break-word;
text-size-adjust: 100%;
margin: 0;
padding: 0;

<div id=”container”>に設定されているCSS

bodyと変わらない？ように見える

<div … class=”content cf”>のCSS

margin-top: 24px;

<div…class=”content-in wrap”>のCSS

width:auto;

display: flex;
justify-content: space-between;
flex-wrap: wrap;
これはmainとside-barをflexで横並びにしているようだ

<main>のCSS

width: calc(100% – 4vw);
margin: 0 auto;
padding: 1px 0px;
box-shadow: 1px 1px 5px 1px #1023;
台紙のデザインはコレ

<article>に設定されているCSS(無数のクラス)

margin: 0;
padding: 0;
など余り実効してない？

<div class=”entry-content cf”>のCSS

background-image: url(https://swsn-ht.com/wp-content/uploads/2019/07/背景画像2018版青い横罫.jpg);
padding: 0px;
margin-left: 3vw;
margin-right: 3vw;
margin-top: 1em;
margin-bottom: 3em;
本文の多くの修飾要素がココ

なんとなく分かってきましたね。

今後の方針

メインサイトと同じデザインを再現するミニマムなHTMLを計画

wordpressのエディタからコピペすると同じ見た目になると最高。