今回のアウトプットは前回のdisplayプロパティの「display:flex;」を使用して要素を任意の位置に配置する方法です。 Flexbox:任意の位置に要素を配置する方法 親要素に「display:flex;」を付与する 子要素は横並びになる その子要素らに並び順や、要素同士の…

要素の配置について、まず必要なプロパティは displayプロパティ display : block; 指定された要素は、ブロックレベル要素として表示 display : inline; 指定された要素は、インライン要素として表示 display : inline-block; 指定された要素は、並びはイン…

今までの記事にて画面の考え方をお伝えしました。貼りましたので確認していただければと。 ayachuubuu.hatenablog.com ayachuubuu.hatenablog.com ayachuubuu.hatenablog.com さて、この画面への要素の配置。今までもお伝えしましたが、 どこに どんな大きさ…

前回の続きです。 プロパティまとめ２

今回は、プロパティの一覧を作成したのでそれを載せます。 Part.１ プロパティまとめ１

今回はCSSの再度確認です。 CSS ＝ Cascading Style Sheets のことで、HTMLに装飾を加えるための言語です。 例） h1{ color: red; } と記述します。 Hello World 上記のように h１要素 を赤く装飾することができました。 h1{ ⇦セレクタ color: red; ↑ ↑ プロ…

HTMLは基本「入れ子構造」となっています。 そのため、中身によって箱（積み木）の大きさが変わるわけですが、 今回の「親要素」「子要素」についてもこの入れ子構造に関係しています。 簡単に分かりやすくするため、「ｕｌ要素」を使って説明します。 このu…

今回は、 インライン要素 について考えます 今回の要素は「正方形の四角」です。 この要素に当てはまるのが 1. a 2. span などの要素になります。たくさんあるのでGoogle先生に聞いてみてください。w このブロック要素にCSSが指示できるのは 余白（margin外…

前回積み木に見立てて、画面の考え方を行いました。 今回は、 ブロック要素 について考えます 「長い四角」と表現しましたが、画面の幅（横幅）いっぱいに広がっている要素です。 この要素に当てはまるのが 1. h1 2. p 3. div 4. form などの要素になります…

本日は、画面を考えます。 どうゆうことかというと、 <h1>プログラミング初心者</h1> と画面に表示する時、どこにどうやって表示させたいか。 指定して見栄えよくしたいものです。 その時に必要なのが、積み木（パズル）の考え方です。 画面は、積み木をはめ込むため…

CSS Cascading Style Sheats 簡単に言うと、スタイリストさん。 HTMLで文字やリンク、画像の指示を出したものに、色をつけたり、大きさを変えたりすることができる。 画面のデザインまで変えられちゃう万能タイプ。 <h1>プログラミング初心者</h1> に対して .h1{ colo…

今回は他の要素を紹介する。 <h1>見出し</h1> <P>文章の段落</P> <a href="">リンクを貼り付けられる</a> <img src= ""> # 画像表示 <ul> <Li>黒点 リスト１</Li> <li>黒点 リスト２</li> </ul> 基本的な要素はこんなものかなと。 これで画面上に文字を入れることはできるが、なんともつまらない画面。 私の記事も同じく味気ないのだ…

前回、名付け親になるイメージと言い放った訳だが、より具体的にコードとともに説明しようと思う。 プログラミング初心者 と見出しをつけたかった訳だが、これを担当させたい時に使うのが ＜h＞ヘッダー要素。 要素って何？ 今までの記事にも散々使ってきた…

今回は、bodyについて。 いつも何げなくみているWebサイト画面。ここには、いろんな情報があります。 ただ文字を打って表示させているのではなく、その文字が何を表しているのかパソコンに教えてあげないと、こちらの意図として作ったものを同じように表現し…

HTMLとは Hyper Text Markup Language ブラウザ上で文字・画像・リンクなどを表示させるための言語 < >をタグといい、終了タグで囲む ※中には終了がいらないものもあります は、「これはHTMLを記載したファイルです！」と宣言したもの 一番最初に記述する 4…