【HTML/CSS】divタグの使い方
こんにちは。駆け出しプログラマーの松下です！HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです！divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS
【CSS】CSSとは ?
Workteria(ワークテリア)では難易度の高いものから低いものまで、スキルや経験に合わせた案件を多数揃えています。会員登録は無料ですので、ぜひ会員登録してご希望の案件を探してみてください！
フリーランス／正社員のエンジニアとして活躍するには、ご自身のスキルや経験に合わせた仕事を選ぶことが大切です。ご希望の案件がみつからない場合はお気軽にお問い合わせください！ユーザ満足度の高いキャリアコンサルタントが在籍していますので、希望条件や悩み事などなんでもご相談ください。ご希望にピッタリの案件をご紹介させていただきます。
こんにちは。駆け出しエンジニアの岡野です。
ここでは、CSSとはについて説明します。
CSSについて勉強している方の参考になれば幸いです。
CSSとは
CSSとは、「この見出しは背景はグレーで」「テキストを中央揃えで」「文字は白で」などHTMLで定義した内容をどんな見た目に表示させるかをCSSで表示させます。簡単にいえばWebページの文章の見た目を調整する言語と覚えておくとわかりやすいです。
例
HTML＝構造
<p>ここが青い文字になります</p>CSS=装飾
p{
color : blue;
}CSSのバージョンについて
HTMLはバージョンによって書き方や使えるタグが異なるので注意が必要ですが、CSSはLevelによって使えないものはありません。
CSSは単に増えているだけなので、あまりバージョンは関係がないです。
様々なコーディング
ここで紹介するのは実際コーディングするときによく使われるものを紹介します。
①文字の大きさを変える
HTML
<p>文字の大きさ変わります</p>CSS
p{
fort-size : 2.0em;
}②色を変える
HTML
<body>
<h1>見出し<h1>
</body>CSS
body{
background : linear-gradient(#777777,#333333)fixed;
}
h1{
font-size:3.125em;
color : #999999;
}③余白を作る
HTML
<body>
<h1>見出し<h1>
</body>CSS
body{
background :linear-
gradient(#777777,#333333)fixed;
}
h1{
font-size:3.125em;
color:#999999;
margin:50px;
padding:50px;
}CSSの書き方
CSSの書き方には２つあります。他にもありますが初心者の方はこの二つを押さえておきましょう。
・style属性
・styleタグ
①style属性でタグに直接書く・・・style="cssのコード"というようにタグの中にcssを直接書きます。
<body>
<p style="color : red">テキスト</p>
</body>②styleタグの中に書く・・・styleタグを使えば<style>～<style>の中にcssを書くことができます。
<body>
<p style="color : red">テキスト</p>
</body>
<style>
p{
background-color: #ffffff
border-top:2px solid #333
color : red;
}
</style>【著者】
こんにちは。駆け出しエンジニアの岡野と申します。私に自身の事を軽く紹介すると、プログラミング言語については未経験で大学でもプログラミング言語については勉強していませんでした。なので、理解するのが大変でした。 皆さんには、プログラミング言語はなかなか理解するのが大変だったり、覚えることも多いのでこういった記事を参考にして頂き、勉強にお役に立てれば幸いです。
正社員／フリーランスの方でこのようなお悩みありませんか？
- 自分に合う案件を定期的に紹介してもらいたい
- 週2、リモートワークなど自由な働き方をしてみたい
- 面倒な案件探し・契約周りは任せて仕事に集中したい
そのような方はぜひ、Workteriaサイトをご利用ください！
定期的にご本人に合う高額案件を紹介
リモートワークなど自由な働き方ができる案件多数
専属エージェントが契約や請求をトータルサポート
よく読まれている記事
【HTML】リンクタグについて
こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(～タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ
【HTML/CSS】リストについて
こんにちは。駆け出しプログラマーの松下です！リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです！リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ