20200720 授業内容のメモ　配列・オブジェクト

※lengthとは部屋数を調べる際に使用する値。訳：console.log：コンソールに表示せよ var fruits = ; ↑配列を作成する際に使用する値 console.log('１回目の出力'); console.log(fruits); console.log(fruits.length); ---ここは番地に入れる値の設定--- fr…

2020-07-14

20200714　店舗紹介サイトのリニューアル　メディアクエリとハンバーガー

店舗詳細ページのスマホ対応化だいぶ苦手意識が強かったメディアクエリを活用したスマホに対応したサイト制作だったがどうにか今日は一通りやり通すことができた。つまづいた箇所としてはスマホ画面のサイズに各要素がうまく収まってくれない →chromeの検…

2020-07-14

20200713　店舗紹介サイトのリニューアル

リセット休日2日間と今日は以前講義中に作成していた店舗紹介サイトのリニューアルを手がけていた。メディアクエリを駆使してスマホ対応のサイトを作成しようと思っていたら文章構造がめちゃくちゃで思っている以上に表示がめちゃくちゃになってしまったの…

2020-07-10

20200709　メディアクエリの復習が終わらない②

スマホヘッダーのロゴ画像サイズ変更不可本日店舗紹介のスマホサイト化作業していてぶち当たった問題がこれ。検証ツールを使って調べてみたが原因を見いだせず。 HTML <div class="sp-header"> <input id="nav-input" type="checkbox"> <div class="nav-box"> <div class="logo-box"> <a href="#">ホームに戻る！！</a> </div> ※画像がどうしてもBOX内に収まらないのでリンクタグの部分に画</div></div>…

2020-07-08

20200708　メディアクエリの復習が終わらない

気づいたこと今まで使ってきたランニング練習日誌サイトに教わったスマホヘッダーが使用されていた（どのスマホサイトにも使用されているのだろうけど…）ホームページのグループ構成等、参考になるかもしれないので検証ツールでじっくり見てみるとしよう。

2020-07-07

20200707 メディアクエリからのスマホサイトの作成・ヒーロー画像について　max-width, min-width, vw,vh,word-break:break-all;

スマホサイトの作成 ↓画面表示が480px以下になると背景色がオレンジに変化するーーーCSSーーー/* 画面幅480pxまで：スマホデザイン */@media screen and (max-width: 480px) { body { background-color: orange; } 注意html headタグに<meta name="viewport" content="width=device-width, initial-scale=1.0">をいれること。 VScod</meta>…

2020-07-06

20200706　②HPアップロード～サーバーとFTPとの奮闘～

サーバーとFTPの仕組みの理解一昨日から作ったHPのアップロードの仕方を調べて取り組んでいたがなかなか思うようにブラウザで表示してくれない。昨晩までネットの情報量を頼りにを粘ってみたがうまくいかなさすぎて発狂しかけたので断念。本日改めて講師…

2020-07-06

20200706　①FontAwesomの学習・メディアクエリからのスマホ対応のサイト作成　::before・overflow・

FontAwesom リストの箇条書き・に付けられるロゴ画像が集まったサイト以下やり方を簡潔にまとめた ①HTMLのheadタグの中にFontAwsomeのリンク（下記）をはりつける<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"> ※FontAwesomで使いやすいのはver5とのこと。 ②下記のサイトから使いたいロゴを選ぶhttps://f</link>…

2020-07-06

20200705　店舗紹介HPの作り直し

タグの構成から作り直し講義中にindexと紹介したい各店舗のhtml、cssファイルを作り上げていたが、ブラウザで表示させた途端に表示が全体的に崩れしまう悲惨な状況だった。何がまずかったのか検証ツールで確認したところ、タグの構成からまともにできてお…

2020-07-03

20200703　②リストのロゴ作成とHPのアップロード

リストのロゴ作成 AdobeXDを用いて画像を編集し、HPのリストロゴを作成してみた。 AdobeXDにおける作業 XDを立ち上げる図形（今回は丸いロゴを作りたかったので円）を選択、作成円のサイズ調整（リストロゴのサイズは32px）出来上がった円に向かって画像…

2020-07-03

20200703　①VS code　emmet　

emmetについて！+Tabキーを入力するだけで基本構造が自動で入力される便利ツール。・上記以外の機能 ◎要素名を記述して展開するimg＋Tabキー→<img alt="" /> ◎入れ子構造を作るul>li＋Tabキー↓<ul> <li></li></ul> ◎同じ要素を複数作る ul>li*3＋Tabキー↓<ul> <li></li> <li></li> <li></li></ul> ◎グループ化する「（）」がグ…

2020-07-02

20200702　Adobe XDの使用方法　自宅PCのOSアップデート

Adobe XDの講義終了今日で３日間で続いたAdobe XDの講義が終了した。操作性はExcelに近いもので簡単に使えた。ただ、作業を短縮させるためのテクニックがいくつもあり、自宅でも操作の練習は必要だ。帰宅後にはAdobe XDのインストールを試みたがなんとWi…

2020-07-01

2020701　HPアップロードの試み

FileZilla ClientのダウンロードとXFREEの設定ー失敗ーサーバーの設定、FTP云々の設定を行ってみたがファイルのアップロードまではうまくいっても作成したHPが表示されない。ブラウザでURLを入力した際にユーザー名とパスワード入力をもとめられ、入力をし…

2020-06-30

20200630　自己紹介ＨＰの修正

修正事項 HTMLの文章構成全体的に書き直し。 CSSで編集する際に修正したい箇所が指定できない部分が多すぎたため。リストの修正箇条書きのアイコンに画像を使用と思ったが思うように出来ずに今日は失敗。明日でも明後日でもできるまで何度でも挑戦。画像…

2020-06-29

20200629　ナビゲーション設定のまとめ

①CSSでbackground-imageの切替えを用いた方法使用するもの a:hover メリット CSSに背景画像としてボタンの画像を設定するので、HTMLに手を加える必要性がない。デメリット印刷時に画像が表示されないことがあるらしい。 ②CSSでbackground-positionの切替…

2020-06-29

20200629　おさらいナビゲーションの奮闘④ 　onmouseover="this.src='img/画像ファイル'"

JSを使用してオンマウスボタンを切り替える方法最終問題 JSを使用してオンマウスボタンの切り替え今回はCSSの出番はリストのリセットと背景色の設定等で切り替えに携わる入力は無し。 HTML側のimgタグにonmouseoverとonmouseoutの打ち込みがメインになる。 <body></body>…

2020-06-28

20200628　おさらいナビゲーションの奮闘③　img:{opacity:0.7;}　vertical-align: bottom;

ナビゲーションのボタンをオンマウス時に透過させる方法と貼った画像の下の部分の隙間をなくす方法今回の問題オンマウス時に透過させて背景色を写す方法ナビゲーションの設定いつもの背景設定 .nav{background-color:#E91E63; } いつものリストリセット…

2020-06-26

20200626　おさらいナビゲーションの奮闘②　background-position: 0 0　text-indent:-9999px　

CSSスプライトを使ったアイコン表示引き続きナビゲーション作成今回の問題炭酸飲料っぽい名であるが簡単に言うとマウスカーソルを合わせた時の表示の切り替えがimgフォルダに入っている１枚の画像だけで済む方法。（今まではボタンの背景画像１枚、切り…

2020-06-26

20200626　おさらいナビゲーションの奮闘①　display: block;　:hovor

とりあえず出来上がったナビゲーションナビゲーションの設定（CSSにて） ①ナビゲーションの背景色の設定 .nav{ background-color: #4caf50; margin-top: 30px;} ②ナビゲーションのスタイルをリセットする方法 .nav ul{list-style: none;→・を消すpadding-l…