ピュアチャ〜ジ

広告代理店のディレクター休職中。元ホスト/元メイド喫茶キッチン/元アパレル店員。その人にあった生き方や考え方についてを語るブログ。その他楽しんでもらえそうなネタを書きます。

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以下の時は横並びにしないという記述の仕方…

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

はいどうも! 今日も作業をしましたので進捗報告です! 小さい画面サイズ→大きい画面サイズになった時に表示を切り替える方法! 【画面サイズが小さい時】 画面サイズが小さい時は、widthを指定していないので100pxで横いっぱいに表示されています。 【中く…

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

はいどうも! 今日も動画で学習したので進捗報告を行います! 今日はflexboxの動画15本分やりました。 ドットインストールの動画は短いと2分とかで終わるので、結構サクサク進めた印象です。 display: flex = flexの指示を出す。今回だと要素を包むcontainer…

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

はいこんばんは! 今日の作業進捗を報告です! 今日は、印刷の際の記述を学習しました。 【リンクURLを要素の直後に文字で表示させる方法】 a href^="http:" : after { content: attr(href)""; color: blue } a hrefで始まるタグで、http:で始まるリンクを持…

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

はいこんにちは! 今日の作業進捗を行います! レスポンシブ入門の勉強に入りましたが、CSSについての内容もあったので、それも学んでいきます。 cssの記述の意味をやりました。 【タグ→表示】の順番で画像を貼っていきます。 ① first-letter = 一文字目 fir…

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

はいどうも! 今日の作業進捗報告です! デベロッパーツールの使い方の学習は昨日までで一旦終了して、今日からレスポンシブサイト作成の勉強動画に進んでいます。 【今日学んだ記述】 :nth-child(odd) = liタグの奇数タグに関して処理を行う記述 :nth-child…

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

はいどうもこんばんは! 今日も勉強を行いました〜 今日は作業というよりか、昨日に引き続きYouTube動画でChromeのデベロッパーツールの学習を行いました! 昨日のブログで、学習が終わったら画像付きで説明すると言っていたと思うのですが 画像付きで説明を…

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

はいどうも! 今日からは参考にしているマナブさんの運営しているマナブログ の記事を参考にして動画で学習を行いました。 上から見て環境を整えて、【6】の3本の動画を見ました。(HTMLとCSSはUdemyで勉強したので、一旦飛ばしました) 今日学んだことは【…

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

はいどうも! 今日の作業進捗を行います!! 【作成したHP(料金体制〜フッター)】 【HTML&CSS】 【修了証明書】 今日で終了しました〜!!!嬉しい!!!^^ このコースの受講で、【Photoshop,HTML,CSS】の基礎を身につけることができました! とはいえ…

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

どうもこんばんは! 今日の作業進捗報告です! 【作成したHP】 【HTML1】 【CSS1】 【CSS2】 今日の学び 1.HTML1に記述しているdtについて dtタグの中にpタグを追加して、二つのインライン要素を含んでもいいOKという事が学びになりました。 2.CSSやHTMLのマ…

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

はいどうも! 今日の進捗報告です。 【作成したHP(ピンクの部分】 【HTML】 dlタグの中にddタグって二つあっていいということが学びになりました。 【HTML2】 【HTML3】 【CSS1】 【CSS2】 【CSS3】 今日引っかかったのはここでした。 ul liのセレクタ内にh…

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

はいどうも! 今日も作業を行いました〜。 【作成したHP】 ページネーションより下の部分を作成しました。 【HTML1,CSS1】 こんな感じです。 cssのpagenationとul,liのところ両方でwidthとheightを設定しないといけないっていうのが注意点だなと思いました。…

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

はいどうも! 今日もがっつり作業しました! 打ったコード見返すと、あぁこんなにコード書いてたっけ〜〜 ってなりました。笑 【作成したHP】 【HTML1】 【HTML2】 【HTML3】 【HTML4】 【CSS1】 【CSS2】 上から二つ目 dl ddの中のwidth: auto;は発見でした…

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

はいこんばんは! 今日も作業を行いました〜 【作成したHP(途中まで)】 【HTML1】 まぁ、簡単なHTMLを記述しました。 【CSS1】 こちらも、簡単な記述です。笑 【CSS2】 こちらも簡単ですね。 【CSS3】 paddingってインライン要素だと適用できなかったんじ…

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

はいどうも! 今日も作業を行いました! 【完成したページ】 【CSS1】 veritical-align = tableタグを使って記述した際、文字が左下に配置されてしまうのを左上に場所移動をするタグです。 inputタグ = インライン要素なので、display: inline-blockを利用し…

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

こんばんは。 今日の作業は以下です。 【美容院HP】 ①メニュー一覧ページのHTML,CSSの記述 ②ご予約、お問い合わせフォームのHTML,CSSの記述を行いました。 画像付きで以下で紹介します! 【でき上がったページ】 左側を記述しました 【HTML】 dl dt ddでくる…

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

どうもこんにちは! 今日も作業を行いました〜 いつの間にか集中できてる時ってないですか?今日はそんな日でした。笑 今日の作業進捗報告です! 【模写したHP】 今日は新着情報〜フッターまでを作成しました 【HTML】 こんな感じです。今日は超シンプル。 …

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

はいどうも! 今日も作業進めました! 【今日進んだところまでのHTML】 【HTML1】 今日はまっさらな状態から始めたので、DOCTYPE〜のところも記述しました! ただ、これは絶対記載するのでテンプレとしてメモっておけば問題なさそうです。 今日の気づき 特に…