背景色の設定
2色以上の色を背景に設定するときのメモ
使うcssプロパティはbackground:linergradientってやつ
グラデーションに使うやつだけどくっきりした色でも分けられるので便利だった。
〜使い方〜
例 <section id="concept">に使うとする。
＃concept {
background:linergradient(red 50% , blue 50%);
これを使った場合 上半分が赤、下半分が青となる。
色の開始場所終了位置も決められる。
例 background:linergradient(red 0% 30% , blue 30% 100%);
こうやって指定したら要素の上30%が赤、30%から最後までが青となる。
素人すぎて覚えること多すぎ！
メモ書き imgタグとか
スクールの事前課題終わったと思ったけどぐちゃぐちゃすぎてやり直し＾ー＾
ぐちゃぐちゃのコードでレスポンシブしようと思ったら右側に謎の余白とか出てきてわけわからなくなったので絶対分かりやすいように後のことをできるだけ考えて書いた方がいいと思い知った；；
imgタグは基本divタグで囲って書いて行った方が分かりやすいあんま良くないって言われたけど分かりやすいから今のところはこのスタイルでいく、もう少し知識ついたら変わるかも。
メモメモ
widthはpx指定しないなんかレスポンシブの時わけわからない余白に悩まされまくった。
原因はimgのpx指定、多分footerのborderのrem指定。
borderは親要素の幅指定が良くなかったのかも？
修正したというか書き直した後だから思い出せない…
これからはわからないことが解決した瞬間にここに書いていこうと思った。
html cssの基礎的なことはわかってきたけど少し不十分だと思うのでもう少しそこらを勉強しつつJavaScriptも並行して進めてこう。
HTML CSS アウトプット用メモ
webページを制作するときはまず枠組みを考える。
後共通で使えそうな設定のcss関係も
とりあえずHTMLはheader footerは絶対で次にそれ以外を使う一つのコンテンツでほとんど完結するなら<article>多分sectionとかmainとかで作った方が分かりやすいかも？
<header>
</header>
<div>
</div>
<section>
</section>
<section>
</section>
<section>
</section>
<footer>
</footer>
みたいな感じ？
よくあるのはheader内には左にロゴ右にnavとか
HTML記述例
<header>
ロゴ画像ではなく文字で書く場合ここに記述
↓↓↓↓↓↓
<h1>サンプル</h1>
ここにメニューとか概要とか
<nav class="クラス名>
<ul>
<li>メニュー</li>
<li>概要</li>
</ul>
</nav>
</header>
このままだと縦に並んでしまうのでcssで調整する
ここからcss
まずは高さとか色々
header {
height : 70px; ⇦ヘッダー全体の枠の高さ
display:flex; ⇦横並びにする flexbox使える
justify-content : space-between;⇦なんか両端にいい感じなるやつ
line-height: 〜px;⇦行の高さ
padding:〜px; ⇦余白の設定
復習で色々やってたけどそんなに書けない・・・
合ってるかもわからん
疲れたからまた明日
確認用で色々書かなきゃ
プログラミング学習始めたのでメモ兼雑記
つい1週間くらい前からぼちぼち勉強を始めました。
当面の目標はフロントエンド、web系に転職、のちにスキルアップをしつつという感じでざっくりですがこれからのことを考え始めスクールも通うことにしました。
独学でもやっていけるでしょうが転職などのサポートやエンジニアの方からアドバイスがもらえるということで自分のためになりそうなので決めました。
世間は今コロナ真っ只中。
ネットの情報を集めてると未経験の転職は結構厳しそうだなと感じています。
それでも自分がやってみたいと挑戦してみたいと思ったのでIT業界を目指すことにしました。
さてこれからどうなるのかまだ分からないけれど、日々勉強ということでProgateをちまちまと学習しています。
学習するにあたって６割ほど理解したらとりあえず次に進むといいと聞いたので結構ざっくり進めています。
HTML CSSはとりあえず終えましたがまだ分からないところも多々あります。
基本的な書き方はわかったもののサイトを作るとなったらかなり行き詰まり具体的に何が上手くいかないかというと右端にメニューのリストを配置したいのに思い通りに動いてくれなかったり、いざ書いていくと<div class>を無限に製造したり書いていくうちに訳がわからなくなってしまいます。
始めたばかりなので色々模索しつつ後々はJava Scriptなどを使って動きがあるものを作ってみたいです。
ゲームの公式ホームページなどを作ってみたいので参考にChromeの検証を使ったりして覗いてみたけど初心者には全く意味のわからない世界でした。
まあ焦る状況ではあるけれど自分のペース、、ちょっと急ぎ目で頑張っていきたいと思います。
次の記事からはその日学習したことのメモ的な感じで書いていこうかと思っています。
今週の目標
- HTMLのわかっていないとこの復習
- JavaScriptのwhileとSwitchの理解を深めて次の学習に進む
- 適度な休憩を入れる
しばらくはProgateメインでカリキュラムとか配布されたら移行する感じで
では。
