本日の学習
背景画像の設定方法
画像をoverlayで貼り付ける
https://v4.bootstrap-guide.com/components/card
うまく画像を全体に伸ばしてその上にcardを書き込む
containerの上にもう一つcontainerをつくりそこにimgで画像を貼り付ける場合、container-fluidにすると画像がうまく広がる。
あるいはcssにbackground-imageで書く
この場合、一つの要素だけではなく３つぐらいあててあげるとうまく反映される
本日の学習
wordpressの設定など
まとめ テーマファイルをwp-content/themesディレクトリ直下に配置して、WordPressにテーマとして認識させる方法
macはFinderからやる。
そして、WordPressのテーマにはindex.phpとstyle.cssという2つのファイルが必要。
WordPressのテーマで使うテンプレートファイル。WordPressで作成するWebサイトでは、複数のページに共通する箇所はテンプレートファイルにまとめておいてそれを使い回すという考え方。
テンプレート階層
wordpressを理解するうえで重要 あるURLに対して優先順位が高いテンプレートファイルが呼びたされる仕組み
テンプレートファイル
テンプレート階層にもとづいた優先順位をもつファイル
wordpressにおけるindex.phpの重要性 WordPress上のWebサイトでは、必要なファイルが存在しない場合にindex.phpを表示する仕組みになっている。
HTMLであればindex.htmlが最優先で呼び出されるのに対し、WordPressではindex.phpの優先順位は最も低い 。
本日の学習
Bootstrapまとめ
Navbarについて
navbarの書き方<br>
navbar 必ず指定して書くdiv class="navbar"
navber-light bg-light 色を指定するクラス 明るめnav-light 暗めnav-dark
navbar-brand サイトのタイトル、ロゴを指定するクラス 画像も
botton class="navbar-toggler" レスポンシブ時のボタン操作指定
span class="navbar-toggler-icon ボタンの画像を表示するクラス
Bootstrapでは同じ名前のものは使えない
css同様、自分で名前をつけるときは＿がいい
カルーセルの書き方
画像がスライドして動く仕組み。
インジケーターの書き方
ol class="carousel-indicators
li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
li data-target="#carouselExampleIndicators" data-slide-to="1">
li data-target="#carouselExampleIndicators" data-slide-to="2">
/ol>
div class="carousel-inner
画像はcssでbackground-imgとして指定する
（例） top_image1 {
background-image: url(../img/top1.jpg);
background-size: cover;
background-repeat: no-repeat;
意味は
cover;とすることで画像が背景配置領域の中に収まるか、覆うようにできる
autoだと基本のサイズ
設定からこまめにキャッシュを消す
ドキュメントでも右クリックでキャッシュを消す
明日も忘れないうちにカルーセルをつくる！！
GW二日目
###Bootstrapの勉強
Bootstrapの色指定
primary(重要)#428bca
success(成功)#5cb85c
info(お知らせ)#5bc0de
warning(警告)#f0ad4e
danger(危険)#d9534f
文字色
text
背景色
bg
本日のお勉強
HTML CSSのレイアウト最終確認
画像
jpg 白い背景 png 透明背景
画像の上に画像を重ねるやり方
z-indexの使い方
z-indexを使用することによって自由に優先順位を設定する
z-indexを使用するには、その要素にpositionプロパティでstatic(初期値)以外の
値が適用されている必要がある
例 position: absolute;
top: 0px;
left: 0px;
z-index: 10;
autoを入力した場合は親要素と同じ値が設定される
親要素でz-indexの指定がされていない場合は値は0となる
bootstrap を使うとHTMLでmarginが指定できる
例 div class="row">
div class="col-md-6">
div class="btn-item mx-auto"
引き続きbootstrapの書き方を覚える
また忘れ去られたBLOG2
Bootstrap をいれてのHTML作成
なかなかblogを書くのが続かない… メモみたいな感覚で勉強の終わりに書く事を心がけて。
本日の学習
position relativeでの位置設定
文字の横書き
何故か文字が縦書きになり横にならない。
調べたら幅が指定されていてできないのではと書いてあったので確かにbootstrapで
col-md-3としている。
調べた内容ではCSSフォントサイズをptで書いてみては？とあったがややこしかったので違う記事を調べる。
もう一つ見つかったのがCSSでwhite-space: nowrap;を指定するやり方。
書き加えてpaddingも指定してうまくいった！
あとは背景色を指定したいが綺麗に全体にならず苦戦中なので今日はここまでに。
to be continued......
