2018-09-01から1ヶ月間の記事一覧
border: solid 1px #000; スタイル、太さ、色をまとめて指定できる 任意の順番で良い
<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </meta></meta></head></html>
只今Bootstrapのグリッドシステムを学習中。 今まで途中でCSSでスタイルが崩れて ギャー！ シクシク(T_T) ってなってたこともあったが、 これはすごくよさそうだ。 フンフンっ！（鼻息荒め） 楽しいぞ
em 親要素のfont-sizeを1とする rem 文章のルート要素（htmlのfont-size）を1とする
学習して作成する目標物 今の認識ではこんな感じなのではないか。 9月中には作る ・カ－ト機能 PHP ・ログイン機能 PHP ・お問い合わせ機能 ・入力フォーム ・パララックス CSS or Bootstrap ・ハンバーガーメニュー Bootstrap ・カルーセル Bootstrap ・フ…
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> integrity=" ↑ これは不正ファイル読み込み防止の為。コピペするだけ。 コピペをそのまま張り付ければ良いのだが、JS読み込みの順番をかえないこと 動かなくなる JQu…</link>
『いちばんよくわかる Webデザインの基本』を読んで、自分に抜けていたものが抜け落ちていたことに気が付いた。 ・head にページの説明を追加する事 <meta name="discription" content="ページの説明"> ・mormalize と reset のことおもいだした。 これやんなきゃね SEO対策になると思っていたがこんな記事も</meta>…
PCサイズで作ったサイトをスマホで表示を崩さずにする為、らしい。 <meta name="viewport" content="width=device-width,initial-scale=1"> ↑ HTMLに書く ※修正 2018/09/16</meta>
レスポンシブな段組み PCで下のように表示するのが目標。 ２番目のBOXを真ん中にする事がここでの学びのポイント。 ↓PC、タブレットでの表示目標 ↓スマホでの表示目標 以下、段組みの手順。 ①まず4つ BOX用意 BoxAで2~4を囲う BoxAの中でBoxBを用意し２~3を…
boxを左右に振り分ける。 右からやってみた。 @charset "UTF-8"; body{ margin: 0;}.box1, .box2, .box3,.box4{ border: solid 5px crimson; box-sizing: border-box;} .boxA:after{ content: ""; display: block; clear: both;} .box1{ background: lightpi…
画面の右側にメニューをpx固定で作るときなど、 BOXの中に2つBOXを作り右側だけｐｘ固定で表示したい時。 @charset "UTF-8"; body{ margin: 0;}.box1, .box2, .box3,.box4{ background: lightpink; border: solid 5px crimson; box-sizing: border-box;} .bo…
CSS カラム落ちを利用するときに気を付ける事 高さを揃える事。 じゃないと、段組崩れちゃいます。 以下は、box1~3をdivで囲い、 box3をwidth100％にしてカラム落ちで段組みした例。 こうするとdivが一つ少なくて済む @charset "UTF-8"; body{ margin: 0;}.b…
.boxA:after{ content: ""; display: block; clear: both;} clearfixで使う clear: both; の意味 親要素である.boxAが 後述の内容を.boxAに被さって表示させるかどうかを聞いている （もう少し正確に、.boxAの中でフロートしている子要素を避けて、 後述のコ…
CSS boaA{ box-sizing: border-box { とは padding と border をボックスサイズに含む、という意味。 margin は関係ないよ。
