【コロナに負けるな!】HTMLとCSSをやってみた

どうも、どせぜんです。
コロナによる緊急事態宣言が出され、大混乱の中ですが、自宅に籠らなければいけない時こそ自分を磨くチャンスだと思っています。皆さんもこの1ヶ月で色々高めちゃいましょう。

Skill Hacks 2日目。やってきました。

今日はCSSについて。CSSはhtmlではただの文章の羅列だった物にデザイン性を持たせる物であると解釈しました。

紘己 が描画を共有しました

どう考えてもhtmlだけよりもCSSをプラスしたほうが見やすいしなんかかっこよくできる。
ガッバガバの解釈ですが、文字の色や位置、文字を入力した場所の背景、その他もろもろができるようになったのではないかと思います。

htmlという言語で基となる文章を作成し、それをデザインする為にCSSという言語を使う。
結局はhtmlを使うとかCSSを使うって言ってるけど、拡張子(.mp3とか.zipとかみたいな)が.htmlと.cssに変わってるだけで、実際のところやってる事はその言語に合わせた文法で文字打ってるだけです。そして英語覚えるなんかよりも全然簡単な文法。
本当は違う言語を使っていたら別々の環境を用意しなきゃいけないはずだけど、そんな手間が省けているのがAWSのcloud9というわけです。(多分)

そんな事言っても、文字だけのものをデザインできるようにするなんて難しいんでしょう?って思うかもしれないんですけど、あらかじめ作ったhtmlファイルとCSSファイルを紐付けさせれば良い(1行で終わる)だけなので、すごい簡単。
デザインに凝り出すと色んな文法を知っていく必要があると思いますが、凝りたいと考えたなら調べる事は苦ではないはず。とりあえず現在では文字を書き、場所を決め、色をつけ、画像を貼る(背景も設定)などができるという状態になりました。

あれ?これだけできればホームページ作れるじゃん!
ってことで、明日からはHTML/CSSの演習として簡単なホームページ作成をします。乞うご期待。

あと、個人的にざっくり覚えておいたほうがいいと思ったのは、余白を決めるときの範囲の指定です。
margin(外側の余白)とpadding(内側の余白)というプロパティを使うのですが、cssファイルにおいて

#change {
margin: 10px 20px 30px 40px;
}

と入力すれば、htmlでchangeというidを指定したものに10px(top) 20px(right) 30px(bottom) 40px(left)という余白を外側に作るということになります。これが上記のmarginの部分をpaddingに変えると内側に余白を作るということになります。

紘己 が描画を共有しました 2

以上、最後まで読んでいただきありがとうございました。
継続のため、今日も明日の演習の動画の1本目だけ実践して終わっときます。

ではまた。

〜Skill Hacksが気になった方〜
-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座

コメントを残す

メールアドレスが公開されることはありません。