マガジンのカバー画像

プログラミング学習

25
本
運営しているクリエイター
MHK
MHK

MHK

HTML/ CSS 〜東京フリーランス（無料練習素材でコーディング）　〜

前回、めんどくさいな〜と思って、否、時間がかかりそうで足踏みしてしまった課題ですが、思い返せば約1ヶ月前に始めた学習で、初期の自分を振り返る意味でも復讐で、否、復習で取り組んでみたいと思います٩( 'ω' )و

【東京フリーランス】

お久しぶりです。
目標は4時間！

【タグアイコンの挿入】

そして、表示できない悩み…

→今回は、ファイルの表示trap
　href="./デイトラ/favi

もっとみる
MHK

MHK

HTML/ CSS 〜Progate🐓上級編（道場コース）　〜

そういえば、

実際にWebに公開している際、このような変更は一回一回更新し直していくのだろうか…

今は、目の前の道場に集中しよう…

ちなみに、前回の学習コースでは2ｈかかってしまいましたとさ☠️　だってねぇ… 可愛い子供たちがお昼寝から目覚めてちょっかい出してきたんだもの😳→😓→☺️→😍→🤩→🥳🤡🤗🤪→🥰　そりゃ一緒に遊んじゃいますわなぁ🍀　だから実質1ｈだったかなぁ…�

もっとみる
MHK

MHK

HTML/ CSS 〜Progate🐓上級編（学習コース）　〜

修了予定は2ｈ！

前回、学習スライドで一通り学習したので、その上で、気づいたことや注意事項を記録します。

【学べること】

＜1章　レスポンシブデザインとは＞
　　目標物を確認しよう
＜2章　メディアクエリ＞
　　メディアクエリを設定しよう
　　メディアクエリによるレイアウト
　　box-sizing
＜3章　レスポンシブデザインの実装＞
　　レスポンシブデザインの型を準備しよう
　　タブレッ

もっとみる
MHK

MHK

HTML/ CSS 〜Progate🐓上級編（学習編）〜

謎の上級編を探して…

学習スライドを見つけました！👀ので、記録をば！٩(๑❛ᴗ❛๑)۶

【レスポンシブデザイン】

🍀Media Queries

@media (条件) { .... }

🌸レイアウト崩れを直す

box-sizing: border-box;

→⚠️*{box-sizing: border-box;}→すべての要素に対してCSSを適用

box-sizingをbo

もっとみる
MHK

MHK

HTML/ CSS 〜Progate　Flexbox編〜

修了時間1ｈ！

Flexboxなるものが、最近気になっていた、「PC」「タブレット」「スマホ」による表示の違いについての謎を解消してくれるそう！✨

🍀display:flex

🍀flex:auto →親要素に合わせて、伸ばしたい要素に対して使用。

🍀一方、こちらは、flex-wrap:wrap→折り返したい要素の親要素に対して指定。折り返したい要素自身に対しては、widthを指定。

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース中級編（全部通して自力でやってみよー💪body lessonからWebページの公開まで！）〜

目標3ｈ20ｍのところ、前回、、、1ｈ…50ｍくらい？（結構おおめにに見て😅）

コードを書けたのは、実際には、1ｈ10ｍくらいだったけど（言い訳⚡️）、絶対に疑問や調べ物系が出るからややこしや…

めげずに、もうひと書き٩( 'ω' )و

【自分でやってみて、抜けていた箇所】

🌸body lesson

→.lesson-icon p{
position:absolute;
top:

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース中級編（全部通して自力でやってみよー💪headerから、body mainまで）〜

目標は3h20ｍ！

【ボタン、アイコンの挿入】

サルワカさんのを用いて、ようやく、Font Awesomeさんの最新Ver.の方を使うことが出来ました。これまで、何故に出来んかったのだろう…🙄spanとiの違いかなぁ…

🌸サルカワさん紹介（最新）Ver.→<link rel="stylesheet" href="https://use.fontawesome.com/releases/v

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース中級編（message部分・フッターのレイアウト）〜

残り時間は、ー20ｍ😅

【message部分のレイアウト、ボタンの設定】

🍀<a>と<span>のどちらでボタンを作るべきか？！

→aタグ：href部分にURLを設定したら、リンク先に飛べるボタンになる
spanタグ：ただ押せる（押しているように見える）だけ

🍀ボタンをactiveでへっこます動き→🌸position: relative;をtopやleftと併用する→その要素を本来

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース中級編（body lesson部分のレイアウト）〜

残り目標時間、40ｍ！！

ははは…　自力でやった時に、この目標時間を目指す感じで★

【body lesson部分のレイアウト】

今回の<img>と<p>は1つ塊なので、<div>でまとめます。

🍀重ねた画像と文字<p>に関して、文字を画像の中心に合わせたい

→width:100%

また、テキストの中央揃えで疑問に思っていた、display:inline-block;が出てこなかった。

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース中級編（headerのレイアウト）〜

残り目標時間、1ｈ50ｍ！

【ヘッダーのレイアウト】

🍀rgbaの復習

🍀 line-heigh→文字をヘッダーの中心の高さに持っていきたい(文字の縦の幅とヘッダーの縦の幅を同じにしたい) 時。

⚠️本来は行間の調整だが、要素の縦方向の中央に文字を配置する機能も

🍀transitionのアニメーション→ボタンのカーソルを合わせて時の変化

🍀🍀🍀<a href="#" cla

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース中級編（bodyの背景画像・ボタンレイアウト・アイコンの挿入）〜

Progate道場で復習中。今日からraidingページの中級編。目標は3ｈ20ｍ⭐️

【背景画像の入力と、top-wrapperの作成】

🍀改行について→<br>を使うか、<h1><h1>にするか迷ったため。

→文章が長くなる場合（今回は<p>）、2つ使いをすることに。

🍀背景画像の挿入→

.containerではなく、.top-wrapperでコーディング。

🍀top-wra

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース初級編（全部通して、自力でやってみよー！→お問い合わせ内容とフッター⚠️中央揃え）〜

お問い合わせフォームとフッターの作成時間に関しては40分くらいで、気になったところや中央揃えの調べに約1時間かけました…😅今日は2ｋｍ程先の踏切がたらふく見える公園に行ったから、子供たちも喜んで遊び、その後良く寝てくれました🥰おかげで昼活も1時間程出来たけど、自分の遊び時間も作っちゃったから、夜活で補いましたとさ。

【お問い合わせ内容の作成と、フッターの作成】

🍀Atomでtextare

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース初級編（全部通して、自力でやってみよー！→body contentsまで）〜

【初級編のコーディングを、Atomを使ってやってみる！】

🍀cssをスムーズに適応させるために

🍀bodyのheader→<div class="header">のdiv忘れ😱

　→プレビューの表示より修正。

🍀body {
font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

→ b

もっとみる
MHK

MHK

HTML/ CSS 〜Progate道場コース初級編（お問い合わせフォームの作成、フッター部分の作成）〜

【お問い合わせフォームの作成】

🍀前回の、<h3 class="section-title">でh3のclass設定を使用。

🍀inputとtextarea

🍀typeとvalue

⚠️.contact-formのpadding設定をしても一向に左隅に余白が出来ず、困った困った状態に…

→<div class>のdivが、divがぁぁぁ… dovに！！😱

【フッター部分の作成】

もっとみる