外部ファイルによるスタイル適応について

本日の教材動画はこちら 今日はいよいよ最後のスタイル適応方法である、「外部ファイルを読み込んでCSSを適応させる」を勉強していきたいと思います！ 外部ファイルからCSSを読み込む方法 CSSファイルを用意し、それをページに読み込ませるにはLinkタグを使います。使い方はheadの中に＜link rel="stylesheet" type="text/css" href="外部ファイル名"＞を記載してあげるだけでOK。外部ファイル名は任意でいいが拡張子は .css となる。 用意する物 外部ファイルを適応するために準備する物は、適応させたいページ（〇〇.html）とスタイルを書き込んだCSSファ…

styleタグによるスタイル適応の仕方

本日の教材動画はこちら 前回は直接CSSを書き込む方法をみましたが、今回はオーソドックス？なheadにCSSを書いて適応していく方法を勉強。 ＜styleタグ＞によるスタイルの適応方法 styleタグによる適応は、head内にCSSを記載する必要があります。type属性（type="text/css"）の記載が必要で、使い方はhead内に＜style type="text/css"＞〇〇＜/style＞と書き、〇〇内にCSSを記載する形になります。 CSSの記載の仕方について おさらいとなりますが、CSSには①セレクタ（どこの）②プロパティ（何を）③値（どうするか）の指定が必要です。また、プロ…

直接CSSを書き込む方法

本日の教材動画はこちら CSSについて勉強した際、CSSの書き方は3種類あることがわかりました。今回はその中の1つ目の方法「（style属性を利用して）直接タグの中にCSSを書く方法についてみていきたいと思います。 ＜style属性＞をタグの中に使う 直接CSSを書き込むには、タグ内にstyle属性を追加する必要があります。使い方は利用したいタグ内に style="CSSの指定" を記載します。 また、下記の理由でhead内に一言CSSを使いますよ！という一文を記載したほうがいいようです。 文書内で使用されるスタイルシートがCSSによるものであることをブラウザなどに知らせるために、 <head…

CSSの書き方について

本日の教材動画はこちら 前回はCSSの概要的なものを確認しましたが、今回はもう少し突っ込んだCSSの書き方についてみていきたいと思います。 ＜CSSの適用・優先順位＞について HTMLは書いた箇所に書いた通り適応されましたが、CSSは基本別ヵ所（headや外部ファイル）に書くことになるため、どれを適応・優先するのか決まりがあります。 ・書いた順番によって優先される CSSは基本「あとに書いたものが優先」されます。つまり同じような指定を何回も書いていた場合は最後に書いたものが優先されます。 例えば、外部CSSファイルでの指定は「文字色：赤」、style要素で文章単位の指定を「黄色」、style属…

CSSとは？

本日の教材動画はこちら ついにCSSのお勉強に突入です。今回はCSSとはなんぞや？という概念的なものからみていきましょう。 ＜CSSの役割＞について HTMLでページの構造（ここに文字、ここで改行して、リンクはこれで...などなど）を決めるために書いていましたが、CSSはページの見た目を決めるために書かれます。つまりページのデザイン性を高めるために書くものですね！ ＜CSSの構造＞について CSSは「1.どこの」「2.何を」「3.どうするか」 という3点セットの情報で記載します。例えば「h1の文字の大きさを50px」にしたい場合は、「h1の（どこの）」「文字の大きさ（何を）を」「50pxにする…

HTML 勉強まとめ

さて、ロードマップ通りに3月から勉強を進めてきましたが、ようやくHTMLの基礎を学び終わりました。我ながら時間かかりすぎては？？？？と思いますが、あれこれしながら自分のペースで勉強してきたため、挫折せず続けてきたことだけ評価していただければと思います。 調べればまだまだ色んなタグや属性、使い方があるのはわかってるんですが、一先ずはロードマップ通りに習得できたということにしましょう。つらつら勉強してきたこと、勉強して疑問に感じた事をずっと書き残してきたため、今後の（自分の）見直し用に下記に簡易リンクを設置しておきます。 HTML 基礎勉強まとめ 基礎タグ編 ・HTMLについて1から勉強しなおして…

ボタンと送信について

本日の教材動画はこちら 最後に今まで習ったフォーム関連の仕上げともいえる、送信ボタンについてです。 ＜ボタン＞の種類について まずボタンには下記の2タイプ（2タグ）が存在します。 【 inputタグ / type="submit" 】 入力したデータを送信するときに押すボタン。そのままですね！データ送信以外には基本使われないらしい。ボタンとして表示したい文字は value="〇〇" で指定。使い方は＜input type="submit" value="〇〇"＞となる。 【 buttonタグ / Javascrip】 こちらはJavaScripなどを使って処理を実行するのに使うボタン。重要なの…

フォームのグルーピングについて

本日の教材動画はこちら 今日はフォームのグルーピングについての勉強です！グルーピングには主に＜fildset＞と＜legend＞を組み合わせて使い、より便利に使うために＜label＞タグを使うことができます。 ＜fildset＞タグ 複数の入力欄をまとめるのに使用する。タグで囲ったところは四角の枠線でまとめて表示されるようになる。使い方は＜fildset＞＜/fildset＞で、タグ内にまとめたい入力欄のタグを入力する。 ＜legend＞タグ 上記の＜fildset＞タグでまとめた項目に説明をつけることができる。テーブルで言う表題のようなもの。使い方は＜legend＞〇〇＜/legend＞で、…

ドロップダウンメニューについて

本日の教材動画はこちら 前回選択式入力のタイプについて勉強しました。「1つしか選択できないタイプ」にはラジオボタンとドロップダウンメニューがあることを学び、ラジオボタンの使い方を習いましたが、今回は前回説明されなかった「ドロップダウンメニュー」について勉強していきたいと思います。 ＜ドロップダウンメニュー＞について ドロップダウンメニューは、以下の要素を組み合わせて使います。 ・＜select＞タグ ・＜name＞属性（selectタグと併用） ・＜option＞タグ ・＜value＞属性（optionタグと併用） ＜optgroup＞タグ ドロップダウンメニューは上記の要素のみで使用可能だが…