ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

2019-01-01から1年間の記事一覧

【Webデザイン勉強6日目】〜Part2〜

はいこんばんは! ハンバーガーメニューの作成でつまずきました! SPサイズ=ハンバーガーメニュー PCサイズ=グローバルナビ ってのを表現したいなと思い、PCサイズのグローバルナビはできたんですがSPサイズにしたときのハンバーガーメニューの作成でつま…

【Webデザイン勉強5日目】〜Part2〜

はいこんばんは! HP模写のSPサイズに入りました! ハンバーガーメニューの作成がちょっと時間がかかりそうです! 今日はちょっと仕事の関係で時間があまりとれなく、SPサイズのcssファイルを作成してロゴサイズを変更することしかできませんでした(今から…

【Webデザイン勉強4日目】〜Part2〜

はいどうも! 今日も作業を行いました 今日は過去の自分のブログを読み返し、作業をしました。 justify-content: space-betweenとか 画像を中央に寄せるときにtext-align: center; で中央に配置できるのが勉強&復習になりました! メンターの方からいただい…

【Webデザイン勉強3日目】〜Part2〜

はいどうも! 今日は自分の過去のブログを見直していました。 やっぱり忘れている部分が多かったです。 特にflexのところjustfy-contentあたりです。 整列、余白の部分です。 今日は過去の自分のブログを新しいもの(Airbnbサイトの模写を除く)から順番に見…

【Webデザイン勉強1.2日目】〜Part2〜

はいどうも! 久々すぎる更新ですw なんでかっていうと、教えてもらえる人がいないから一人で悩みまくって挫折したって感じです。 とはいえ、辞めようと思っていたわけではなく教えてくれる人を探そうって思って探して、再開しようと思った頃には3週間ほど…

プログラミング教材を購入!!

連続作業を進めていたのですが、やはりわかっている人に気軽に説明できる環境が欲しい!ということで教材を買いました! その名もSkill Hacksです!↓↓ -Skill Hacks- 動画で学ぶWebアプリ開発講座 これで、今まで時間をかけていた事が即解決できそうです! …

Webデザイン勉強103日目の成長報告!

はいどうも! 今日も作業を行いました。 急遽予定が入ってしまったのもあり、あまり時間が取れませんでした。 今日の作業進捗を報告します。 今日やった事 Bootstrapの概念理解 【打ったコード】 ↓smの場合↓ ↓xsの場合 コードでsm時に4カラムずつ指定してい…

Webデザイン勉強102日目の成長報告!

今日はインプットに時間を使いました。 Airbnbサイトの模写にかなり時間がかかっているため、誰かに聞ける状況をつくりたく検討していました。 【叶えたい事】 ・誰かに自分が詰まっているところ、迷っているところを気軽に聞ける状況を作りたい 【懸念点】 …

webデザイン勉強101日目の成長報告!

はいこんにちは! 今日の進捗報告です! 実は、毎日更新100日やってたんですが なんと101日目は更新できませんでした涙 会社の同僚と飲みに行ったんですが、お酒が止まらず作業ができなかった事が原因です。 反省しつつ、気を新たにして取り組もうと思います…

Webデザイン勉強100日目の成長報告!

どうもこんばんは! 今日で毎日作業100日目です。 今日は、昨日から引きずっている画像の表示のさせかたがわからず、ほとんど進まず悔しい思いをしました。 独学で進めるところまで進もうと思っていたのですが、やはりエラーや疑問に直面した時にすぐに質問…

Webデザイン勉強99日目の成長報告!

こんばんは! 今日の作業進捗報告を行います! 左側:公式ページ 右側:模写サイト(作業中のため色をつけている場所があります) 本日は以上です。 今日やった作業で、わからない部分が一つありました。 元々横長の画像があり、横幅が小さい時には正方形で…

Webデザイン勉強98日目の成長報告!

こんばんは!今日の作業進捗報告です! 【今日やったこと1】 mdサイズにした時の、グレーの部分の横幅調整 (元々は、上の要素と同じ横幅になっていたので少し小さく調整しました) 【今日やったこと2】 mdサイズで見た時、文字と画像を横並びに表示 (画像…

Webデザイン勉強97日目の成長報告!

はいどうも! 今日の作業進捗を行います! Airbnb公式サイト 左:スマホサイズ 右:PCサイズ ↓うまくいかない時↓(selectを2行にして配置できない) ↓成功!↓ この表示にするために1時間以上ググってました。 実際、display:flex;にして横幅を%指定するだけ…

Webデザイン勉強96日目の成長報告!

はいどうも! 今日も作業を行いました。 今日で、Airbnbスマホサイズの模写が完了しました! こんな感じです。 【公式サイト】 https://ja.airbnb.com/host/homes 違うところはあるんですが、個人的にだいぶん近いところまで表現できたと思います。コードの…

Webデザイン勉強95日目の成長報告!

はいどうも! 今日も作業を行いました! 今日は、ざざざっとコードを最後まで書き切りました! 細かいところの調整が全然終わっていないので、明日からはそこを中心にやっていこうと思います。 模写HP(Airbnb) https://ja.airbnb.com/host/homes 作ったHP …

Webデザイン勉強94日目の成長報告!

はいどうも! 昨日から始めたAirbnbサイトの模写の続きについて、進捗報告します! 左:公式サイト 右:模写サイト ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーーーーーーーーーーーーーーーーーーーーーーーーーー…

Webデザイン勉強93日目の成長報告!

はいどうも!本日も作業を行いました。 ①昨日の復習 Bootstrapの記述方法について 昨日は動画で記述されたコードの構造についてなんとかイメージでも覚えようと思っていたんですが、今日公式サイトでコードを丸々コピって自分の書いているところに貼り付けた…

Webデザイン勉強92日目の成長報告!

はいどうも! 今日の進捗報告を行います! コード→表示例 の順番で画像を貼り付けています! 画面サイズ=sm(スマホ) 画面上部=アラート 二段目=ハンバーガーメニュー ハンバーガーメニューを開いた時 画面サイズが大きい時 How to use のタイトルに対し…

Webデザイン勉強91日目の成長報告!

はいどうも! 本日も作業を行い、Bootstrapの学習を進めました。 本日の進捗を報告します! 【打ったコード→表示されたページ】 の順番で振り返ります。 btn = ボタン btn-sm = small ボタン btn-lg = large ボタン colは12で設定されているため、記述しなけ…

Webデザイン勉強90日目の成長報告!

はいどうも! 本日も作業を行いました。 ①Bootstrapのブログを2本読む&コードを実際に書いてみる 1.http://websae.net/twitter-bootstrap-grid-system-21060224/ 2.https://www.marorika.com/entry/bootstrap-beginner ②レスポンシブデザインの英語YouTube…

Webデザイン勉強85日目の成長報告!

はいどうもこんばんは! 今日も作業を行いましたので進捗報告です! ①Firebaseを利用したHP公開。 詳細は省きますが、自分のローカルにあるファイルをUPロードして公開できます。 ポートフォリオ用のサイト作成の時に使えそうです。 実際アップロードしたの…

Webデザイン勉強84日目の成長報告!

はいこんばんは!本日の作業進捗報告を行います! 今日学んだこと ①CSSを使ったアニメーション ②数値や値の代入の仕方 【打ったコードの意味】 animation-duration: 2s; = アニメーションに2秒の秒数をかける animation-iteration-count: 2; = 2回アクション…

webデザイン勉強83日目の成長報告!

はいどうも! 本日も作業を積み上げました。 【作ったHP】 【打ち込んだコード】 一つ一つ解説するとすごい時間がかかりそうなので省こうと思います。 今日学習したことは、各コード自体は難しくないのですが「どういう構造にして組み立てるか」というところ…

Webデザイン勉強82日目の成長報告!

はいこんばんは!今日の作業進捗報告です! 【打ったコード】 HTMLでdivでくるみ、テキストと画像を配置 CSSでは.features直下のh1に対してだけの指示を記述 【表示したページ】 今日は、ここまで

Webデザイン勉強81日目の成長報告!

はいどうも!本日も作業を行いました! 今日の作業進捗報告を行います! 今日から、スマホにも対応したHP作成のカリキュラムに入りました! 【作成した画面】 【打ったコード】 デベロッパーツールを使い、body,h1,pのmarginをなくすところが勉強となりまし…

Webデザイン勉強80日目の成長報告!

はいどうも! 昨日、たくさん寝れたので今日は復活いたしました。 本日の作業進捗報告を行います。 【打ったコード】 [item-1-start] 〜 [item-1-end] = 名前です。任意に設定が可能です。 grid-column: item-1-start / item-1-end ; = 列方向で、どこに配置…

Webデザイン勉強79日目の成長報告!

はいどうも! 今日はグリッドでの移動です! 【打ち込んだコード】 表示した画面は一つですが、色々な記述方法がありました! grid-row-start: 3; = 行方向の始まりが3 grid-row-end: 4; = 行方向の始まりが4 grid-row: 3 / span 1 ; = 行方向の始まりが3,終…

Webデザイン勉強78日目の成長報告!

はいどうも!今日の作業進捗報告です。 【表示比率の調整方法】 ①grid-template-columns: 100px 1fr 2fr; 左は100pxで固定し、残りの2列は1:2の比率で表示させることが可能 ②grid-template-columns: 50% 100px 100px ; 左はブラウザに対しての50%、他の2列…

Webデザイン勉強77日目の成長報告!

こんばんは! 今日の作業進捗報告です! 今日はグリッドで区切る方法の学習を行いました。 display: grid; = グリッドを行うという記述 grid-template-row: 0px 0px 0px; = 各行のpx数の指定。3行でgrid指定があることを意味する grid-template-columns: 0px…

Webデザイン勉強76日目の成長報告!

はいこんにちは! 昨日、ブログを書き上げたと思ってブラウザ閉じたらUPできていませんでした汗 あたらめて昨日の作業進捗を行います。 以下の記述は、通常サイズの時は要素を左と右にFloatで横並びにさせて、400px以下の時は横並びにしないという記述の仕方…