先生からのアドバイス。 エンジニアの仕事をしていこうと思えば読書が大切。 本の紹介： CSS設計完全ガイド ~詳細解説+実践的モジュール集 https://www.amazon.co.jp/CSS%E8%A8%AD%E8%A8%88%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89-%E8%A9%B3%E7%B4%B…

html 前にprogateでしたことがあったので、参考にしながら書いてみた。 なかなか難しい。そしてこんな書き方で正しいのか？受講期間が終わって、こういった場合に答え合わせができないと思ったらちょっと不安。 一つ一つ検証しながら、フォントサイズを決め…

html navbarの項目のlink設定。 今回はホットペッパーへのリンクを設定。サイトのURLをaタグに書くだけ。 本当は全部自分でリンクページを作りたいが、まだまだ先の模様。 dropdownが機能していないというか、ダウンリストが出てこない。 もう一度テンプレー…

html トップ画像のカルーセル3番目を設定していなかったので設定。 全体を通してabsoluteを間違ってつけているところをdisplay:block;とmargin・paddingで修正、見た目は違っていないがコード的にはスッキリしたのかな。 また営業時間のところをulで作ってい…

html アイコンについて 元々データには白の背景があるので、xdでの透過は不可とのこと。 イラストレーター又はフォトショップで作るのがベスト。 アイコンをアップでみると、XDでも1から作成可能な様子。 nabvar透過について 上手くいかないためこれは先生が…

html 昨日の続きの作成、トップ画像と黒い背景部分の文字にAOSを設置。 動いているが、まだまだ改良の余地あり。リロードした時にトップ画像部分は動いているがスクロールした時に黒い部分の動きが終わっている。アンカーで指定しなければならないということ…

html昨日の続き スタイリスト欄の作成 ホットペッパーからmonosnapで画像を切り取りしてxdで調整の上記述。 思った位置に画像が来ず左よりに。 最終paddingでし調整。 次に下の写真欄の作成 パララックス使われているが、今は無視 画像を検索してフィルター…

htmlの続き 昨日の作った箇所の下から作成。 ここに関しては昨日の書いたコードのカラムを左右入れ替えるだけでいけたので簡単 見本サイトのカウントアップはどう書いてるのか見てたら、googlefontの表記が書いている、、、。ちょっと拝借。cdnはまだやって…

htmlの続き 先生からのアドバイスを頂いた。 ・CDNのリンクのすすめ knowledge.sakura.ad.jp /bodyタグのの上でサイトからコピペしたものを <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> と記述したがフォントに変化なし。なにが間違っているのか。 ・透明にするにははtransparent又はopacity 現状の検…

htmlの続き navbarの透過方法を検索してコピペすると透過できた！が意味を理解していないのはまずいのでちゃんと理解しなければ。 ロゴの透過はpngにして書き出ししたができなかった。xd上では透過しているのに。 仮に背景とロゴを一緒にしてxdで書き出しし…

htmlの続き navbarが少し縦幅が高かったのでCSSでheightをつけた。 また文字のfontの調整をしたら良い感じになった。 店のオーナーから店の名前を教えてもらい調べてみたところ、思ってたより、女性よりのお店の雰囲気だった。ロゴだけ拝借して調整の上反映…

htmlの続き 画像・アイコンはコケているが、練習の為メニュー各項目アイコンと文を表示 左画像はcol–4 右項目はcol–8で設定。それをcolー6を6つ用意して表示。 これで一旦終了。 お手本サイトを変更して再度作り直しとなったので、お手本サイトを探してみた…

html フォークとスプーンのアイコンの透過の方法を先生からアドバイス頂いた。 原因はXDの書き出しの際にJPEGで保存している為透過しないとのこと。 PNGで保存すれば、透過できるとのこと。 またアイコンがダサいので変更しようと思いアイコンのサイトでダウ…

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%); } コードを…