Yamato@Web制作

北海道在住の心理士
Web制作を身につけたいと思っています
趣味はゲームとバドミントン
ポートフォリオ　　

[Yamato@Web制作 @y_web_design]

#WCBカスタマイズチャレンジ です。
入院したのが尾を引いており、色々忘れてしまったので引き続きリハビリです。お盆に入る前に一段落して良かった。

コーディングよりも、画像を探したり色を決めたりするほうが圧倒的に時間かかるのは私だけですかね･･･？

https://t.co/6DGrFsID6h

[Yamato@Web制作 @y_web_design]

Twitterは今後どうなるんでしょうね。

肺に穴があいてしばらく入院していたので、リハビリがてら #WCBカスタマイズチャレンジ ･･･ではないですが書籍を参考にカフェのホームページを作ってみました。

https://t.co/0HkN4eXtRK

[Yamato@Web制作 @y_web_design]

#WCBカスタマイズチャレンジ ということで、企業型ページをカスタマイズしました。

以前にもアップしましたが、TwitterCardがうまく表示されていなかったのでアップし直したものです。

七三ゆきのアトリエ（https://t.co/c0EkGOFF1o）様の素材を使わせていただきました。

https://t.co/hffpTNreeb

[Yamato@Web制作 @y_web_design]

#WCBカスタマイズチャレンジ の3回目（企業型サイト）です。
formやtable要素は難しいです･･･。

ゲーム会社を想定して作りました。使用したイラストは【七三ゆきのアトリエ】様のものです（https://t.co/c0EkGOFF1o）。
ありがとうございました。

https://t.co/hffpTNreeb

[Yamato@Web制作 @y_web_design]

#WCBカスタマイズチャレンジ ということで、疑似要素やFontAwesome等の学習したことを使いながらブログ型のページを作ってみました

調べながらなので全然進まないですが、うまく指定した通りにCSSが効いてくれると嬉しいですよね～

https://t.co/UDd7n3zs1G
現在 #デイトラ中級編

[Yamato@Web制作 @y_web_design]

最近学習したscroll-snapやモーダル表示を使って大好きなゲームを紹介するサイトを作成しました

｢20ｰ30代をターゲットにしたゲーム紹介サイト。悲惨な世界観を好む人たちをゲームダウンロードまで誘導したい｣
https://t.co/IeDFarMLiM
＃デイトラ
#WCBカスタマイズチャレンジ
#アークナイツ

[Yamato@Web制作 @y_web_design]

CSSのscroll-snapプロパティが機能しなくて原因を探っていると、拡張機能の「SmoothScroll」がブラウザに入れていると動かないことがわかりました

スクロールがうまく動かないんだから早く気づくべきでしたね･･･

自分が未熟なのでCSSに原因があると決めつけていました
#WCBカスタマイズチャレンジ

[Yamato@Web制作 @y_web_design]

#デイトラ 中級編jQuery実践課題編

できるようになったことをポートフォリオに実装しようとしても反映されず･･･

サーバーへのアップロードがうまくいっていないのではと思いましたが、原因はキャッシュだったようです

『Ctrl + F5』を使うとキャッシュを読みこないので良いですね

[Yamato@Web制作 @y_web_design]

#デイトラ ポートフォリオ作成編Day20

ここ数日何度も何度も苦戦しては調べることを繰り返し、やっとポートフォリオを公開することができました･･･
デザインはとりあえず伝えることだけを考えてシンプルにしました（画像もあまり入れていない

https://t.co/wOmZvDoPRg

[Yamato@Web制作 @y_web_design]

#デイトラ コーディング練習編Day8 & 9

｢ゼロからコーディングしてみましょう！｣はとても難しくて大変でしたが、何とか自分で考えながら最後までできました（途中何度も動画を見直しましたが･･･）

コーディングで大事だなと思ったこと
①試行錯誤
②htmlでのsectionやdivによる基本的枠組み

[Yamato@Web制作 @y_web_design]

#デイトラ コーディング練習編Day6

講師の方がimgタグのalt属性について、「目が見えない方々でも音声読み上げを使って情報を受け取るために必要なもの」と説明していて個人的に好感がもてました

一般的にはSEO対策において重要としかあまり耳にしなかったので･･･

[Yamato@Web制作 @y_web_design]

#デイトラ コーディング練習編Day5

ミス一覧
①cssでclassのセレクタ（.header-navなど）を書くことが続くと、唐突にでてきたタグのときにドットをつけてしまっていた（.header {}にして変わらないな･･･って数秒悩んだ）

②font-sizeにしたかったのに、Emmetで入力してfons-styleになっていた

[Yamato@Web制作 @y_web_design]

#デイトラ 【HTML/CSS基礎編】終わった感想まとめ

①HTMLのタグやCSSのプロパティはざっくりと覚えておく。ググりながら使えば良いと言われるが、どんなものがあるかぐらいは知ってないと調べにくそう

②Emmetしゅごい･･･

[Yamato@Web制作 @y_web_design]

【box-sizing】

box-sizingプロパティにおいて、値で「border-box」があるなら、paddingまでを含めた「padding-box」やmarginまで含めた「margin-box」もあるのかなとアホなこと考えて試してみましたがエラーでした。

あるわけなかったか･･･。

[Yamato@Web制作 @y_web_design]

【fontプロパティ】

覚えておくことは4つ
①font-size：px, %, em（倍）
②font-weight：normal, bold
③color：色
④font-family：書体（ ,で区切る）

#デイトラ

[Yamato@Web制作 @y_web_design]

【直属の子孫要素の指定】

CSSにおいて、> を使えばHTMLで直下に置いてある要素のみ指定できる（.contents > p { } など）（基礎編Day3）
#デイトラ

[Yamato@Web制作 @y_web_design]

【相対パス】

1つ上の階層にあるものを指定するときには「../」を使って、同じ階層にあるものは何もつけなくて良いと書籍で学んでいたので、同じ階層にあるものは「./」で指定できると初めて知りました（基礎編Day3）
#デイトラ

[Yamato@Web制作 @y_web_design]

#デイトラ のWeb制作コースの受講を始めました
なるほどと思ったことや覚えておきたいことは、見返せるようにツイートしておこうかなと思います

｢DAY 2｣のaタグの説明「aはAnchor（いかり）の略で、リンク先へ錨をおいておく」がスッと理解しやすいなと思いました