4月22日 html続き カウントアップ

htmlの続き

昨日の作った箇所の下から作成。

ここに関しては昨日の書いたコードのカラムを左右入れ替えるだけでいけたので簡単

f:id:hinairo:20210423011513p:plain



見本サイトのカウントアップはどう書いてるのか見てたら、googlefontの表記が書いている、、、。ちょっと拝借。cdnはまだやっていない。

<link href="https://fonts.googleapis.com/css?family=Montserrat:700%2C500" rel="stylesheet" property="stylesheet"
media="all" type="text/css">

カウントアップのscriptがどこに書いてあるかわからず。

サイトで調べて記述。

簡単!数字のカウントアップ表示で動きのあるサイトに | エムトラッドブログ

表記できたが、それぞれ数字の数が違うので、カウントするまでの各自スピード設定をして同じタイミングでカウントを終われるように一括にサクッとできないものか。

<p class="count" data-num="300">0</p><span></span>
<!-- countup -->
<script>//count up
$(function () {
var countElm = $('.count'),
countSpeed = 1;


countElm.each(function () {
var self = $(this),
countMax = self.attr('data-num'),
thisCount = self.text(),
countTimer;

function timer() {
countTimer = setInterval(function () {
var countNext = thisCount++;
self.text(countNext);

if (countNext == countMax) {
clearInterval(countTimer);
}
}, countSpeed);
}
timer();
});

});
</script>

f:id:hinairo:20210423012159p:plain

125右部分に謎のポジションが。明日修正しよう。

4月22日:htmlの続き

htmlの続き

先生からのアドバイスを頂いた。

CDNのリンクのすすめ

knowledge.sakura.ad.jp

/bodyタグのの上でサイトからコピペしたものを

と記述したがフォントに変化なし。なにが間違っているのか。

 

・透明にするにははtransparent又はopacity

現状の検証で何が当たっていて白色になっているのか調べたが、やはり不明。

またtransparentは書いているが反映されておらず。

うまくできず悔しい。

 

続きの欄に取り掛かる

営業時間の欄を調整。

f:id:hinairo:20210422013812p:plain

 

その下の欄を写真をxdで編集してアップ。

隣の欄に字の入力。試しに画面幅を変えると、背景の黒色が長さが短くなってしまったので、

min-height: 600px;
min-width:720px;
 

と記述したら長さが維持できた。ついでにwidthも設定。

f:id:hinairo:20210422013820p:plain

 

 

4月20日:htmlの続き

htmlの続き

navbarの透過方法を検索してコピペすると透過できた!が意味を理解していないのはまずいのでちゃんと理解しなければ。

f:id:hinairo:20210420073720p:plain

 

ロゴの透過はpngにして書き出ししたができなかった。xd上では透過しているのに。

仮に背景とロゴを一緒にしてxdで書き出ししたらうまく収まったが、これではロゴをクリックできないので没。

f:id:hinairo:20210421011940p:plain

この時点でスクロールしてみるとnabvarが固定されてしまっていることに気がついた。

f:id:hinairo:20210421012003p:plain

f:id:hinairo:20210421012046p:plain

コピペしてきたのにfixed-topとなっている。

でもこれを外せば元の通り透過しなくなる。

んんんーーーー??どうしよ。

 

トップ画の下文字作成。

f:id:hinairo:20210421012236p:plain

ここで気づいたが、googleフォントが当たっていない。googleフォントでフォントをダウンロード済、headにはリンク貼っているのになぜ??

 

4月19日:htmlの続き

htmlの続き

navbarが少し縦幅が高かったのでCSSでheightをつけた。

また文字のfontの調整をしたら良い感じになった。

店のオーナーから店の名前を教えてもらい調べてみたところ、思ってたより、女性よりのお店の雰囲気だった。ロゴだけ拝借して調整の上反映。

 

 

f:id:hinairo:20210420070309p:plain


トップ画象に関しては元サイトの縦幅と比べると約2倍くらい高い。xdで調整・切り取りしてみたが変になる。なのであんまり画像も気にいって無いので変えようと思って調べてみたが、決めれず結局今は気にせず現状維持。

画像の上の文字を入力してフォントを変えようと思ったが一番上の文字のフォントが見つからず。

 

f:id:hinairo:20210420070130p:plain

 

4月18日:htmlの続き・授業

 htmlの続き

画像・アイコンはコケているが、練習の為メニュー各項目アイコンと文を表示

左画像はcol–4 右項目はcol–8で設定。それをcolー6を6つ用意して表示。

f:id:hinairo:20210419001634p:plain

これで一旦終了。

お手本サイトを変更して再度作り直しとなったので、お手本サイトを探してみたが、どれもなかなか難しそう。

 

授業

crowdworksにて仕事の内容・応募している人の詳細を確認。

レビュー評価が大切。受注件数が0件は受注しにくいので、受注件数を増やす為、最初は受注金額10円でもいいから受注できるように、プロフィール・ポートフォリオ設定。

LP(1枚もの)を3枚ほど作れば仕事に結びつく可能性がある。

ブランディングが大切な為デザインを重視しなければならない。写真の画像・画像のデザイン・余白の使い方などが需要

デザインについてのサイト

www.gnavi.co.jp

デザインについての本

https://www.amazon.co.jp/dp/B07952TH5Y/ref=cm_sw_em_r_mt_dp_U_t6zDEbHZ7MAXK

授業後購入。仕事の間に読んでいこう。

 

htmlパララックスの紹介。

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_parallax&stacked=h

youtubeパララックス説明

www.youtube.com

 

まずは一通りサイトを作ってから。

お手本サイトはこれにした。

curly.qodeinteractive.com

トップ画像は都心写真に逆光がかかっているもの

ルーセル・AOSエフェクトをかける。f:id:hinairo:20210419010437p:plain

 

AOSで下から文字を表示させる

f:id:hinairo:20210419010444p:plain

カウントアップ

f:id:hinairo:20210419010621p:plain

 

 

html作成

navbarの透過方法がわからず調べてみた。

サイトを調べてみると、

Bootstrap navbarを透明にするために必要なことは、クラス bg-light を削除します 

それでおしまい!

ザ・ bg  で bg-light  「背景」の略です。したがって、背景色のクラスを省略すると、自動的に透明なナビゲーションバーが作成されます。

と書いてあったのでやってみたが、何もならず。もうちょっと調べよう。

f:id:hinairo:20210419005344p:plain

 

お手本サイトのトップ画像

odanでお手本サイトの写真発見したが、これに似たような写真を検索

これが良いといった良いのがない。どっちかでどうかなーっと選んでみたが、

上は閑散としているからなんか寂しい。

下は逆光すぎて眩しい。

f:id:hinairo:20210419005855p:plain

もうちょっとみてみよう。

明日からも頑張ろう!

 

4月17日:htmlの続き

html

f:id:hinairo:20210417004035p:plain

フォークとスプーンのアイコンの透過の方法を先生からアドバイス頂いた。

原因はXDの書き出しの際にJPEGで保存している為透過しないとのこと。

PNGで保存すれば、透過できるとのこと。

またアイコンがダサいので変更しようと思いアイコンのサイトでダウンロードしたが、上記の方法で反映させると黒のフィルターの上に黒いアイコンの為見えにくい。

XDでアイコンの色を変更させたかったができず、サイトで色を変更できたので、

サイトでアイコンの色を変更→ダウンロードしてXDでサイズ調整→書き出ししてVSCODEに記述。

f:id:hinairo:20210417181509p:plain

f:id:hinairo:20210417181516p:plain

f:id:hinairo:20210417181526p:plain

アイコンのデザインも背景透過もいい感じにできた。

 

美容室風に写真と文字を変更

f:id:hinairo:20210418013855p:plain

f:id:hinairo:20210418013902p:plain

なんか統一感が無いような気がする。難しいですなー。

4月16日:html続き

html

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

カラムを使って文だけ表示させる時には何度も同じ方法でアプローチしてみたが、うまくできず、まずcontainerの構成だけ(文と画像のみ)作ってcontainer-fluidの中に入れたらうまく配置できた。最初から思っていた方法でよかったのになぜなんだ??

f:id:hinairo:20210417004035p:plain

アイコンの背景の透過方法がわからず。調べたがうまくいかず。もう少し調べてみよう。

htmlは美容室からのHP制作依頼があったので明日から美容室で作成することとする。