CSSでテキストに影を付けます。 ✓text-shadow:水平 垂直 ぼかし 色； ※ぼかしは必須ではないので指定しなくてもオッケーです。 ✓今回のコード .works{text-shadow: 2px 2px 2px #000, 0 0 #000;} ※,(カンマ)で区切ることで複数の影の指定が可能です。 水平の指定は-2pxなどを指定すると左側に影ができます。 垂直の指定は-2pxなどを指定すると上方向に影ができます。
■HTMLファイルに<img>タグで画像を挿入。 最初は画像が大きいと容量が大きくなってしまうと思い、イラストレーターから『書き出し』の時点で縮小しました。 すると… 縮小させるだけなら解像度は問題ないのですが、Webページは拡大してみる場合もあります。その時はばっちりぼけてしまいます。 『あー…、そういえば縮小した画像を拡大したらモザイクみたいになったことあったっけ』と思い出し、元の大きさのまま書き出してCSSで縮小して調整することに、 すると…。 いい感じに表
.lengthとは■配列の要素の数を取得 定数 kamaboco を定義 console.log(kamaboco.length); で配列の数を取得⇩ webページ上で右クリック➡検証からconsoleを選ぶ。ここで出力結果が確認できる。 ４が出ているので定数kamabocoの配列の数は『４』であることが確認できる。 ■配列の要素の数を『設定』できる。 ⇩ 配列の要素の数をが『５』になった。 でも実際の配列の要素は４つだけ…。どうなっているかというと。。。
HTMLファイルの中に記述することでtwitterやfacebookのアイコンを利用できるサービスがあります。今回は参考にさせていただいた記事を紹介しつつ僕が実装した手順を書いていきます。 ■FontAwesome(フォントオーサム)fontawesomeとググると以下のページがトップに出てきます。 このページがアイコンを実装できるサービスです。 クリックして中に入ると全文英語で表記されています。この機会に英語に慣れるといいかもです(自分は英語できません)。 英語だっ
ファビコン…タグに表示されたページ名の横に出てくる小さなアイコン。 設定の手順■イラストレーター、フォトショップなどで260PX以上のpngデータを作る。 今回はフリーイラストのピザを使用しました。 ※注意点・カラー設定 web上に表示するのでRGB設定にする。 CMYKは紙印刷用の設定。 ・書き出し、png設定で保存。 Web用に保存を選びます。 これで準備はOKです。 ■realfavicongeneratorをググる。 このサイトに入り、【Selec
プロパティはたくさんありすぎるので覚える必要はないみたいです。color,font-sizeなどよく使うものも多いので実際使いながら覚えていったほうがいいようです。 ■色の値・色の名前で指定 例）background-color ⇩ ✔色の名前にカーソルを合わせることで『カラーピッカー』を使うことができます。※VSCエディターの標準機能です。 出てきたカラーピッカーの値をクリックすることで『ｒｇｂ』『ヘックス値＃(カラーコード)』などで指定することもできます。
■ＨＴＭＬファイルにＣＳＳで装飾することをＣＳＳの宣言と言います。 ■方法は3種類 ✔ＨＴＭＬファイルの<head>の中で宣言 ✔インラインスタイルで宣言 ✔外部スタイル氏と宣言 ■ＨＴＭＬファイルの<head>の中で宣言ＨＴＭＬファイルのテキスト <div>タグの文字を大きくして赤くしたい <head>の中で宣言 <style>タグを使う <style> div { プロパティ ： 値 ； } </style> ⇩ 赤
✔<form>タグ要素 ✔method属性・ログインフォーム <form action="送信先" method="送信方法"> </form> ※送信方法＝ post または get ■ post ➡封筒(見えない) ■ get ➡はがき(見えちゃう) ✔<input>要素 ✔value属性(実際送信される値)<input type="部品" name="部品の名前" value="初期値"> ■type属性の部品➡ text pass
※箇条書きで進めます。 <table>要素➡その範囲が表であることを表す。 フローコンテンツ 配置できる要素は<tr>要素 <tr>要素➡ table row(行) <table>の中にしか入らない。 <th><td>しか入らない。 <th>要素➡ table header cell(見出しのセル) フレージングコンテンツ(<p>とかは入れられない) <td>要素➡ table data cell(内容のセル) ⇩ 表になりました。 <table bor
✔️画像を挿入したいときは<img>要素を使う。これは『空要素』なのでとじタグは必要ない。 書き方は⏬ <p><img src = "画像ファイルのパス" alt ="代替え"> パスというのは表示したい画像への道順を書き込むもので、ファイル名を書き込めばよい。 ※リンク先が外部サイトの時は https://～で始まる。 alt =""は画像が読み込まれなかったときの代替えとして表示される文字を書き込む。 imgのパスのcarbonaraのスペルが間違っている
✔ハイパーリンクの使い方、絶対パスと相対パスという概念 ✔絶対パス…URLを指定してジャンプ ✔相対パス…ファイル名を指定してジャンプ 絶対パス■URL(web上の住所)を指定すれば絶対にたどりつける。 ✔URL➡http://～で始まるWeb上の住所 相対パス■フォルダ名、ファイル名をルールに従って表記してジャンプさせる。 考え方…フォルダを部屋、ファイルを人と考える。 例えば、HTMLというフォルダに入っているsampleというファイルを呼び出したいときは、
✔️ハイパーリンクとは、表示しているページと他のページを結びつける【HTMLの機能】です。 ✔<a href = " URL or ファイル名 ">アンカーテキスト(テキスト名)</a> <a> … anchor(アンカー) 意味➡船のいかり この画面のコード⇩ <li></li>の中には配置できる。 カルボナーラをクリックするとこのページに飛ぶ⇩ このタグを使って別ページにジャンプさせることができる。 同じファイルの中のページであればタイトルを
✔<dl></dl>…用語説明リスト description list フローコンテンツ(<body></body>の中に配置できる。) ※この要素の中には<dt></dt>, <dd></dd>を配置するのがルール。 ✔<dt></dt>…説明する用語 description term ※必ず<dl></dl>の中に配置する。 ✔<dd></dd>…説明や定義 description , definition ※必ず<dl></dl>の中に配置す
✔箇条書きを表す要素<ul></ul>…unordered list【順不同リスト】 <ol></ol>…ordered list 【番号順リスト】 <li></li>…list item 【ul ol の中に入れるリスト】 ✔17行目は箇条書きの入れ子…【リストの中にリストを入れる】 ✔複数行のインデント(字下げ) … Ctrl + ] ✔スクリーンショット … Alt + PrtSc このコードの表示
【最も使う要素】✔最も多く使う要素に<p></p>と<h1>～<h6>がある。 要素には役割があり、これを正しく指定することで、 PCに正しい情報を伝えることができる。 ✔<p></p> ➡ 段落 ✔<h1></h1>➡ 大見出し ✔<h2></h2>➡ 中見出し ✔<h3></h3>➡ 小見出し h4からh6はあまり使わない。 ※それぞれ文字サイズが違うが文字サイズを変える目的では使い分けない。 あくまでPCに正しく情報を伝える手段として。 【特殊な記
✔HTMLの要素には挟める要素が決まっています。 例えば <h1><p>コンテンツモデル</p></h1> は表示はされるが文法的にはNG PCも迷いながら表示しているのかもしれませんね。 各要素には挟める要素が決まっており、表示はされるが文法的にはNGです。 ✔要素の中に配置できる要素をコンテンツモデルといい 【〇〇コンテンツ】のようにカテゴリー名で指定されています。 ✔例）<p>がんばれカカロット<em>おまえがナンバーワンだ</em></p> <p>タ
