html 昨日はカラムを使って黒い画像の上にうまく文字を表示できずとりあえず形だけ作っていたが、その下に画像を表示させる為には絶対カラムが要るので、疑問を解消する為、container-fluidの中にcontainerとrowを入れて文字と画像を表示させようと試した。 …

html メニュー各写真の上に、文字・ライン・ボタンの挿入。 イケテナイ写真はまた後日に変更するとする。 またシャドウの設定 box-shadow: 5px 7px 10px rgb(0 0 0 / 20%); 薄めにかけるのだろうが、加減がイマイチわかりにくい。なんとなくの数字で設置。 …

html topimgの下にメニュー画像をのせようと書いた。 まずは画像の位置をどうしようと思った。初めはcontainer-fluidの中にdivクラスを作ってそれをcolで割っていたが、各画像の幅がうまいこと取れず、一旦削除してcontainerを入れたらうまく元サイトと同じ…

html続き 前も思っていたがやはりnavbarが難しくうまくできていない。 bootstrapからnavbarのテンプレートをコピペして、ロゴの表示したが、見本サイトとは書き方が全然違うし、、、。見た目は近づけれたが、レスポンシブにするとロゴが全て消え、toggleボタ…

html smile.no2 ロゴ作成 navbarの設置 まずbootstrapでnavbarを書いた。 さて、真ん中にロゴがきている。 navbarのliを作ってその中間にロゴを書いた。 smile no.1のロゴを置換。 これでフリーランスサイトへの登録画像完成 ランサーズ登録。 名前は嫁の名…

昨日先生に教えてらったWixで作成したロゴを作ったが、元のロゴの部分のコードを書き換えて反映してみたが、背景画像がパスタの為、作成したロゴが浮いているように感じて作り直してみたがなんかしっくりこず。また明日考えることにした。 Wix＋XD XDのみ ht…

○授業内容 ・webサーバーとは webサーバーを介してハードディスクから一部を借りているところにアクセスできる。 マンションの部屋の1室までの通路のようなもの。経由する時に大切なアプリのようなもの ・wordpress phpのwordpressプログラムとDB(MYSQL)がセ…

wordpress 昨日自作テーマを反映させようとしたが、できなかった原因はassetのフォルダ(JS・imgが入っている)がテーマのフォルダに入ってなかったからだった。 それを追加したらサイトの表示ができ 反映できたが問題なのがトップ画像のスライダーが機能して…

wordpress 画像ファイルのパスの修正 cssと同じようにimgとbackgroundの箇所にphp文を追加で記述しリンク設定 ＊スペルミス発生していたので注意（？の記述もれ） タイトルも修正 テーマの作成についてアップロード方法まとめ 1.フォルダを作成 名前は[bistr…

wordpress教材 ○1-2 設定 一般設定 ・ダッシュボードの設定からサイトの基本設定タイトルとキャッチフレーズを設定 ・メンバーシップにチェックを入れるとコミュニティを作ることができる メディア ・画像をアップロードした際に生成する画像サイズの上限設…

wordpress 教材の本にそってサイト構築の勉強をする為、新しくサイトを立ち上げた。 画面左下のaddsiteの＋を押してサイト名（smile）、ユーザー名、パスワードの入力を行った。他は何も設定変更せずに流れのままに入力した。 サイトが立ち上がって、ドメイ…

html カルーセル部分のアイコンをXDで作成して反映 フォーム入力欄 人数欄のアイコン部分にbackground-colorとborderがあたっていたので、background-colorを＃fffにしてborderをnoneにしたらアイコン部分のbackgroundが少しフォーム欄から右にはみ出してい…

html カルーセル部分修正 上記のような1行で表示されていたから、カーソルとアイコンが被っていたりした為修正まず、カルーセルをコピーして貼り付けていた箇所の上にcontainer 、row、colが抜けていたので記述。 次にアイコンと文章をcolで範囲分割した。ア…

navbarに関して悩んだこと navのメニュー類を右寄りに映したくてcollapeseの後にjustify-content-endを入力したが、ブラウザにアップしてみると右寄りにならず。 computedをみてみるとmargineが左右に当たっているのでmx-0を入力したが、左のmarginは無くな…

XD作成 smileのhtmlが煮詰まっていたので、朝起きて無償に新しいものにチャレンジしてみたくなったのでXD練習で作ってみた。XDもうまく使えるようになりたい。 元サイト：君の名は。 作ったXD ちょと寄せれたかな。本家のように動くサイトを作りたい。 paiza…

XD 昨日に引き続きhtmlメニュー欄の作成でアイコン画像がいる為、XDで画像を加工 写真をO -DANでダウンロードして、XDにファイルからダウンロードしたファイルをドラッグして表示、○ツール使って円を作成し、サイズ調整の上、円を画像と合わせたい所まで移動…

○html ・カルーセルの矢印のカラー変更 サイトの調べ方でbootstrap カルーセル 矢印 色で検索すればめちゃくちゃ出てきた。調べ方が重要。 .carousel-control-next, .carousel-control-prev /*, .carousel-indicators */ { filter: invert(100%); } コードを…

○html 昨日に引き続きカルーセルの左の＜右の＞の色を変更しようと試みたがやっぱり変更できず。 メニュー欄の位置修正し若干綺麗になった。 ○bootstrap テンプレート 先日みたyoutubeのbootstrap講座動画でテンプレートの紹介があったのでどんなものか調べ…

html bootstrapのアイコン設置方法 テンプレートをコピーしてアイコンは設置できた。 が、アイコンのbackgroundcolorがグレーだったので白に変更できることを確認。 問題なのはアイコンの周りの枠線を消したいがどうすればいいのかわからない。 カルーセルの…

html グリッドシステムの使い方 赤線部のようにcol-md-6 col-lg-2と書けばブレイクポイントの指定ができる。 そうすることで幅を狭めた時に一列にフォーム欄が12分の中の6と6で割れるので2枠取れる。また幅を広めた時は12分の2の枠に収まる。 getbootstrap.c…

HTML 昨日アップデートした内容がちゃんとレンタルサーバー側で更新されているかテスト。 反映してみると昨日おかしかったフォームが直っていない、検証でみるとwidthが決められたままになっている。 おかしいと思ったので、まずはレンタルサーバー側の更新…

html修正 フォームの修正、画面幅を狭めた時に入力フォームが重なってしまうことを確認していなかった。 先生からのアドバイスではwidthを決めてしまっているからということで、px→100％に変更、それでも直らなかったので、youtubeをみてからbootstrapのサイ…

bootstrap youtub動画にて www.youtube.com コンポーネントの使い方、jumbotron、btnの配置等 html修正 所々、両端に空白が空いていた為、先生に確認して頂いたところ、background-colorを当ててみたらいいとのアドバイスを頂いたので、してみたところ、空白…

XDの利用方法 youtubeにて www.youtube.com ・グリッドシステムの配置 ・テンプレートの使い方 ・画像配置の方法 cyberduckにてアップロード lolipop.jp サイト手順通りに行ってみたらすぐにアップロードできた。 やっぱりちゃんとサイト見てしないと余計な…

html修正 昨日は検証上で全てのcontainerにfluidを当てていたが、コードの方に記述して少し フォーム欄の位置と文字の大きさがおかしかったので修正。 してcyberduckにてアップロードしようと思ったが、アップロードできず。21日はできたのになぜ今日はでき…

html修正 入力フォームの修正 デフォルトの文字色、背景色を変更。 人数入力欄のデフォルト文字をplaceholderで設置・人数アイコン設定 <div class="col-md-2 mb-5 pb-5 mt-5 pt-5"> <div class="form-col with-icon"> <label for="appt-time">御予約人数: </label> <input id="appt-persons" type="text" placeholder="人数"> <i class="material-icons-outlined">people</i> </div> 先生から…</div>

html作成 ○imgを全てimgフォルダからの相対パスに変更。 ○メニュー欄のimgが見本サイトに比べると白く明るかったので空divを作り黒のフィルターをかける為、background-colorを黒にして、opacityで透けさせてフィルターを作り、position:absoluteとtop・left…

○html修正 ・navの特性としてはcontainerの要素が含まれている為、containerの中には入れず、navだけで閉じる。 今日までcontainerの中に入れていたから、画面の真ん中ぐらいまでしか表示されなかったnavbarがやっと画面いっぱいまで広がった。 ・top-imgのb…

html作成 4つのメニューimg欄のheightがおかしいので先生に聞いてみたところ、heightが指定されているとのことで調べてみたところ、確かにあたっていたが、なくすと画像が長くなり収まりが悪くなったのでどうしたものかと思い放置。 予約欄修正 フォームのサ…

html作成 ・imgの内枠設定 空のdivを作ってborderをあてて背景色は無しposition:absoluteにすればimgの中に設定 .waku { width: 96%; height: 94%; opacity: 10; z-index: 20; top: 3%; position: absolute; left: 2%; border-radius: 17px; border: solid 5…