html-css

[PR]

×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

paddingの設定

paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。

値を1つ指定した場合：	指定した値が[上下左右]のパディングになります。
値を2つ指定した場合：	記述した順に[上下][左右]のパディングになります。
値を3つ指定した場合：	記述した順に[上][左右][下]のパディングになります。
値を4つ指定した場合：	記述した順に[上][右][下][左]のパディングになります。

上から時計まわりで12 3 6 9時という覚え方で。

borderを指定するときの注意

border: solid 1px #0f9ada;

borderの種類（solidなど）を指定していないと
ほかの要素は反映されないっぽいですね。
1pxやカラー指定があっても反映されませんでした。
display:flexについて

１．flexの中身が階層のない要素のみなら、
親要素にflexをかけるだけで済む。

例：

<header>

　　<img src="img/icon1.jpg" alt="">

　　<img src="img/icon1.jpg" alt="">

</header>

header {

　display: flex;

　justify-content: space-between; /* 左右均等分布 */

}

２．どうやら中身のなかに階層があると、
階層の親にもflexをかける必要がある？

例：

<header>

<img src="img/icon1.jpg" alt="">

<ul>

<li><a href="">menu1</a></li>

<li><a href="">menu2</a></li>

<li><a href="">menu3</a></li>

</ul>

</header>

header {

display: flex;

justify-content: space-between; /* 左右均等分布 */

}

ul {

display: flex;

align-items: center; /* 上下中央揃え */

}

前に自分で同じことを書いていた

(自習分について)

　

ヘルセム

headerにもその中のulにもflexが必要

　

flexって掛け方がまだいまひとつ分からないんだよな。

これでも動くのが理解できない。

<header>

　<h1>World Plans Berry</h1>

　<div class="buttons">

　　 <p class="common_box water_box"><a href="user_form.php">ユーザー登録</a></p>

　　<p class="common_box water_box"><a href="user_form.php">ログイン</a></p>

　</div>

</header>

header{

　background-color: #FFA500;

　padding:1rem;

　display: flex;

　justify-content: space-between; /* 左右均等分布 */

}
re: wordpress

からすまる日誌も、授業のなかでメモを取ったものであり
時系列的にもプロジェクト的にもまとまっていないので、
再構築をちょっと考えています。
せっかくだからwordpressでやってみようかと。

yatさんのブログのやつをまた１からやっています。
さっぱりです。
親要素 display: flex; 子要素 position:fixed;の固定ボックスが、tableの下に入り込み文字が重なる

親要素：

header {

width:100%;

height: 5rem;

margin:0 auto;

/*position: fixed;*/

background-color: #fff;

/*text-align: right;*/

display: flex;

justify-content: flex-end;

}
　
そのなかの子要素：
　　

#top_bar{

width:600px;

background-color: #fff;

position:fixed;

left:auto;

top:0;

margin:0;

text-align:right;

padding-bottom: 0.3rem;

border-bottom: 1px solid #ccc;

}

のとき、この固定headerが、画面下側にあるtableの下に入り込み、
文字が重なる

↓

#top_barに
z-index: 9999;
を追加。
解決しました。

参考：z-index
https://saruwakakun.com/html-css/basic/z-index
親要素 display: flex; 子要素 position:fixed;の固定ボックスが、tableの下に入り込み文字が重なる

親要素：

header {

width:100%;

height: 5rem;

margin:0 auto;

/*position: fixed;*/

background-color: #fff;

/*text-align: right;*/

display: flex;

justify-content: flex-end;

}
　
そのなかの子要素：
　　

#top_bar{

width:600px;

background-color: #fff;

position:fixed;

left:auto;

top:0;

margin:0;

text-align:right;

padding-bottom: 0.3rem;

border-bottom: 1px solid #ccc;

}

のとき、この固定headerが、画面下側にあるtableの下に入り込み、
文字が重なる

↓

#top_barに
z-index: 9999;
を追加。
解決しました。
css書き出し例

忍者pcテンプレートから

･何が記述されてるブロックかすぐわかる
･目次をかいている
･いつの更新かわかる

いいアイデア
　

@charset "UTF-8";

　

/* WEBCREDIBLE

　

アップデート: 2009年8月24日[月]

制作者: xxx

　

01.リセットスタイル

02.共通指定

03.構成

04.ヘッダ

05.記事

06.コメント

07.コメントフォーム

08.トラックバック

09.サイド

10.プラグイン

11.MSさんトコの青いアイツ対策

　

------------------------------------------------*/

　

　

　

/* 01. リセットスタイル

------------------------------------------------*/

　

body, div, h1, h2, h3, h4,

p, blockquote, address,

ul, ol, li, dl, dt, dd,

table, th, td, form, fieldset {

margin: 0;

padding: 0;

}

　

body {

font: 10px/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-serif;

font: /**/ 62.5%/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-serif; /* IE5.5以下のフォントサイズ誤差修正（IE5.5以下以外に適用） */

text-align: center;

background: url(//bfile.shinobi.jp/5566/bg.gif);

color: #333;

}

　

p, blockquote {