マガジンのカバー画像

コーディング備忘録

4
本
運営しているクリエイター
ハル@helloco

display:table のお勉強

まず、display:table とは？ テーブル要素のように表示するためのCSS 指定方法は？ HTML <div class="contents"> <div class="child">001</div> <div class="child">002</div> <div class="child">003</div></div> CSS .contents { display: table; /* 親要素　ディスプレイテーブルにする

ハル@helloco

table-layoutについてお勉強

まずtable-layoutってなに？ 表組みのレイアウトする指定方法。 列の幅を、固定か自動か決められる。 表の高さは自動計算。 固定レイアウトにした場合、表示が早くなるという利点がある。 指定方法は？ ① auto（初期値） テーブルの幅は、セルの内容に合わせて自動。 ② fixed テーブルの幅は、指定して固定する。 指定がない列は、均等に分割される。 適用される要素は？ テーブル要素。 とりあえず、書いてみる <table class="table1

ハル@helloco

【CSS】 基本のベースコーディング

1. CSSファイルの先頭ではUTF-8の文字コードを指定 @charset "utf-8"; 2. 細かい定義の前にまず、全体で共有する箇所を定義していく。 例えば・・・・ 【フォントの種類】 ●WinやMacなどのOSによって、入ってるフォントが違うので、 　それぞれ指定すること。 ●基本的に複数指定すること。 ●英語フォントを先にかくこと。 　→サイト内の英文は、英語フォントが反映される ●フォント名内に半角スペースや全角文字が含まれる場合 　シングルクオ

ハル@helloco

サイト上部の謎の余白。head内の全角が原因。

まずは必要となる部品をつくる。 HTMLはこのように。 <div id="wrap"> <header> <h1>ヘッダー</h1> </header> <div id="leftnavi"> <h2>レフトナビ</h2> </div> <div id="contents"> <h2>メイン</h2> </div> <div id="rightnavi">

ハル@helloco