榛月＠勉強垢！

2023/10/15テックアカデミーのWebデザインとWordpressコース終了❗最近、メインの仕事は別で副業から始めようと思い直し
⚠知識ゼロから日々少しでも向上‼当たり前の人からしたら羞恥心の塊だけど見守って🐢
👏いつ死ぬか分からないんだし、自分の好きなことを一番に。
雑談歓迎です！げぇむ好き🥰←

[榛月＠勉強垢！ @Work6834401431]

figmaを初めて触ってみてる最中なのだけど、デザインカンプが、ヒラギノみたいなMAC側のfontで文字が書かれている場合、Windows民はどうやったら本来の形で拝めることができるんだ、全然わからんw😇（？）

[榛月＠勉強垢！ @Work6834401431]

テスト期間中、コーディングが出来なくても、タイピング練習ぐらいできるよな、と思って、初めてみたけど、いや普段のオリジナルタイピング癖と違うからむっずw
https://t.co/eJIvsInS1b

[榛月＠勉強垢！ @Work6834401431]

『1月にしたこと』
前半…
・オリジナルWEBサイトを3つ制作（うち1つは雑だから正直カウント外でもいいかもしれない）
後半…
テスト勉強
『2月にすること』
前半…
・絶賛テスト期間中���ので勉強継続
後半…
・一段落つくのでテックのエンドコンテンツ開始
・ポートフォリオの構成を考える

[榛月＠勉強垢！ @Work6834401431]

皆さん明けましておめでとうございます〜！ちょっと遅れました😇

だいたい一ヶ月ぶりぐらいのポストだ😂

先月のまとめ→YouTube上にあるコーディング過程の解説とともに同じものを作ってました。

今月すること→先月は、WEBページの型を学んだ形なので、独自のWEBページを作ってみる。

[榛月＠勉強垢！ @Work6834401431]

入力フォームの仕組みを具体的に、サーバーサイド側と連携するとなるとJavaScriptや他の部分の知識も必要になってくるとは思いますが今はまずはフロントエンド部分に集中しようと思います！

[榛月＠勉強垢！ @Work6834401431]

やっぱJavaScriptはHTML,CSSと違って一気にプログラミングって感じになってむずくかんじ���。
まずはJavaScriptの学習に時間掛けるよりもHTMLとCSSでちゃんとデザインに則ったコーディングと時間配分を先に意識したほうがいいか…🤔

[榛月＠勉強垢！ @Work6834401431]

本当に何も知らない時は動きをつけるには、「JavaScriptが必須…？？」レベルの認識だったので、HTMLとCSSだけでも充分雰囲気のあるサイトを作れるのは驚嘆です😯

[榛月＠勉強垢！ @Work6834401431]

cssのスタイリングの設定って思っていた以上に細かく指定できるんだな...。
例えば同じ階層に位置する、基準にした要素の次の要素にcssを設定する場合は、
#basic + .span {
//スタイリング
}
の形で作ったりできるのかな？
結構class名多くなりすぎてややこしくなることあるしこの技術も覚えたい。

[榛月＠勉強垢！ @Work6834401431]

今日の学習成果
・HTML5でのルビ振り
・動画の埋め込み,読み込み時の画像挿入,自動再生

[榛月＠勉強垢！ @Work6834401431]

急に寒くなって色々着込もうとしたらズボンが入らなくなってきた🥲
ﾌｧｰw痩せねばw　え？リングフィット買ってやっちゃう？🤣←

[榛月＠勉強垢！ @Work6834401431]

CODEPREP学習
ローディングのアレ
https://t.co/lm5ef9oaDX

[榛月＠勉強垢！ @Work6834401431]

CODEPREPでトグルスイッチの作りを学習した！（今日の朝勉🌟）
https://t.co/zrL2rsMs6j

[榛月＠勉強垢！ @Work6834401431]

パンくずリストの形をとりあえずHTMLとCSSだけで作ってみたけど...
https://t.co/Nxwuz5iGuO
これって、Wordpressを使わない場合、そのページ毎に今どこにいるか？をコーディングする必要があるのか。けっこう大変というか面倒というか...w
Wordpressのお手軽さを身に染みた回だったかも。

[榛月＠勉強垢！ @Work6834401431]

ドロップダウンメニュー(｀・ω・´)
https://t.co/9MKLKU4SGN

[榛月＠勉強垢！ @Work6834401431]

ドロップダウンメニューを作ったことないから、今日はそれを作ってみる。

[榛月＠勉強垢！ @Work6834401431]

グラデーションを作るcss
通常？
linear-gradient (最初の色,後の色)

円形
radial-gradient(内側の色,外側の色)

[榛月＠勉強垢！ @Work6834401431]

borderの種類
dotted:点線
dashed:切り取り線みたいな
solid:一般的によく使う実線
double:二重線
groove:額縁みたいな？

他にもいろいろあるらしい

[榛月＠勉強垢！ @Work6834401431]

さっきまでのは今日振り返った内容なので、先週ボタンをつくりながら理解した部分をこんどは纏める。
box-shadow:x座標、y座標、ぼかし具合、色
で影はつくる。影は一般的に黒っぽい色（グレー含む）か、ベースに指定した色を、少し暗くした色で指定するといい感じになる。

[榛月＠勉強垢！ @Work6834401431]

rgbaとopacityの透過の違い↓

・rgbaは背景に対して透明度を調整

・opacityは、指定した要素部分全てに対しての透明度を調整（文字、枠線といった内容も含めて薄くなったり、する）