PoipOipoN

ウルトラハイパー雑記ブログ。

フロントエンジニアを目指す話 5話 表作成とかなんかちょっとした知識とか

基礎はだいぶ終わってきたっぽい?

基礎はほとんど終わってあとは応用力とかいろいろ応用したコードとかの勉強をした方がいいのかなと思っている状態です。実際に一個サイト作ってみるとかやったほうが勉強になるし、実践で使えるコードとかも覚えれそうだから色々のサイト見て回ろうかなと思っています。ともあれまだ勉強することだらけなので油断はできないのだが実際にがっつりコーディングに挑戦しながら学ぶ方向にシフトする必要がありそう。他にもデザインの勉強とかいろいろあるけどその辺はまだ先になりそう。

 

表の作成方法とデザイン変更

サイトに一つはあるんじゃないかって言うぐらいに利用されている表の作り方を今回勉強しました。デザインも自分でいろいろ触れる&簡単だと思ったので記事作成にも積極的に活用していきたい。人に見られること前提で考えるとまだまだ知識が足りないが、簡単なものは作れるようになったと思う。

HTML側の文書で使用するタグは

  • <table>:表全体の囲い
  • <tr>:行全体の囲い
  • <th>:表の見出し部分
  • <tb>:普通の表の中身

<table>

 <tr><th>表の見出し</th></tr>

 <tr><td>表の通常部分</td></tr>

</table>

のような感じで表を作る。行と列は<tr>の数を増やせば列が増え、<tr>の中に<th>or<td>を増やせば行が増える。

paddingで表の中身の余白指定

table th or td{padding:~;}で余白を変更できます。

表の色の変更

table{color:~}で全体の文字色を変更できる。見出しだけ色を変えたいならtable thと指定する。

背景色はbackgroundで変更できる。

表の中身を中央寄せにする

table{text-align:center}で中のテキストを中央寄せに出来ます。

表の枠線の見た目を変える

HTMLで設定してもいいけどあとあとめんどくさいのでCSS側で指定しましょう。

table{border-collapse: collapse;}

とまず書くのを忘れないようにしましょう。じゃないといらない余白が表の中に出来ます。余白を活用したい時は書かなくてもいいです。

tablle th,table td{border:solid 1px black;}とかいつもの感じで書くだけ。

線の種類はborderの値に含まれているものが使えます。

セルの結合方法

縦方向にセルを結合したい時は接合をスタートする起点のタグの中に<th rowspan="結合したい列数">を書くだけで結合されます。値は整数です。

横方向はrowspanがcolspanに変わるだけ。

結合される予定の<th><td>は消すのを忘れないように。

左右の結合は右方向にされます。

疑似要素のbefore、after

CSS側でHTMLで作る要素みたいなものを作れる。

検索エンジンで要素として認識されないためSEOに影響がなく便利。

h1::before or after{content:"表示させたいテキスト"}のように使用する。

::が二個なのはcss3からで古いブラウザで表示させたいなら:を一つにする必要あり。

beforeは要素の直前に表示され、afterは要素の直後に表示される。

今回のまとめ

いよいよあんまりやる事が無くなってきたので色々なサイトを検証して勉強していこうと思う。

フロントエンジニアを目指す話 4話 要素の位置調整とか箇条書きとか

 

 

レイアウトに重要そうな部分

今回勉強した内容にレイアウトに必須なプロパティのpositionについても勉強した。一気にレイアウトの幅が広がったが割と使いこなすのは難しそうだと思った。特にややこしいと思う部分はなかったが実際にはデザインの知識も関連してきそうなのでセンスが問われそう。他にもすでに登場した<ul><ol><li>の詳細なデザインの変更方法や表の作成方法も今回学んだ。<a href="~">使ったリンクのデザイン変更のバリエーションも学んだのでその辺もアウトプットしていこう。それと文字フォントについても学んだがそちらは全部のフォント覚えるのは大変そうなので調べながら使っていくことになりそうだ。

ではアウトプットしていこう。

 <a>タグ使い方まとめ

CSSの勉強初期に<a>タグについて書いたが、新たな使い方があることが発覚したので先に書いておこうと思う。多分必須レベルなので調べなくても使えるように忘れないようにしたい。

<a href="リンク先">リンク先に飛ぶ</a>

通常の使い方。「リンク先に飛ぶ」のところ押すとリンクに飛ぶ。

<a href=""リンク先" taget="_blanc">別タブに飛ぶ</a>

別タブで開くリンクを作ることができる。半角スペースと_を忘れないように注意したい。使いすぎるとうざいだけなので使いどころをきちんと見極めよう。

a{text-decoration:none;}

リンク先ボタンの下線を消せる。特定のリンクのデザインを変えたい時はid名やclass名を指定するのを忘れないように。

a:hovor{~}

カーソルを合わせた時のデザインを変える。リンクあるあるなやつです。

値はcolor、font-size、font-weigthなど指定可能。カーソルを重ねた時に色が変わるなど分かりやすいようにデザインできる。ただ特殊なセレクタの使い方をする。

a:hover img{~}で画像のデザインも変更可能。

a:visited{~}で訪問済みのデザインの変更可能。

ページ内の特定の場所に飛びたい場合 

飛びたい場所のタグにid名を指定し、<a href="#id名"></a>で完了。簡単です。

別ページの特定の場所に飛びたい場合は、

<a href="飛びたいURL#id名"></a>で完了。半角スペースなどもいらない。続けて#id名とコーディング。

 

ul、ol、liの詳しい使い方

CSSの勉強を始めた最初の方で学んだ箇条書きのul、ol、li達ですが、詳しくデザインの変更方法などまだ勉強していなかったので今回書いていこうと思います。

箇条書き全体の要素のデザインを変える

セレクタにolかulを指定すると箇条書き全体のデザインを変更できる。borderを指定すると箇条書き全体を二重線などで囲える。

ul li{background~}で背景色を変更できる。liを忘れないように。

箇条書きの黒点や数字を消したい場合は

list-style-type:noneを指定することで消える。

小技

箇条書き内の改行は<br>を使おう。

ulタグの間にolタグを入れたりすることでもできる。

positionの使い方

positionは要素の位置調整に使えるレイアウトに必須な知識です。使いこなせないと多分人権ないと思われます。なので頑張って使いこなせるまで実践していきたいと思います。

positionとセットの値まとめ

  • static:初期値。位置調整できない
  • absolute:親要素基準で絶対的な位置調整ができる。なにに阻まれようとどこにでも位置調整できる。
  • relative:現在位置基準で相対的な位置調整ができる。
  • fixed:画面の決まった位置に要素を固定できる。かなり便利そう。

位置の指定に必要なプロパティはtop、bottom、left、right。

position:relative;

top:10px;

みたいな使い方をする。

とりあえずstaticはまずいので、迷ったらrelativeを指定しておくと便利。

z-index

position:absolute or fixedの時に使用する。要素同士が重なった時にどの要素を前面に出すのか順番を決めたり指定することができる。

値は整数が使用され、数字が大きいものから前面に表示される。

position:staticには使えないので注意が必要。

 

その他勉強したプロパティ

cursor

カーソルアイコンを変更することができる。種類はかなりあるので使いたい時は調べて使うようにしよう。

overflow

要素からはみ出たテキストなどの扱いを決める。自動でスクロール式に設定できたりするのでかなり便利。

値は

  • visible:初期値で普通にはみ出た状態で見える。
  • scroll:はみ出た部分が隠れてスクロールできるようになる。
  • hidden:はみ出た部分が純粋に隠れる。
  • auto:ブラウザによって変わるが、基本はscrollと同じになることが多い。
white-speace

HTML文書上での改行やtab、スペースなどの扱いや要素の端までテキストが到達したときの自動折り返しなどを設定できる。

値は

  • normal:要素の端まで行くと自動改行。html文書上で空白、tab、改行が続いても一つの空白にまとめられる。文末以降の改行などは全て無視される。
  • nowrap:normalの自動改行されない版。<br>の出番。
  • pre:tab、スペースは反映されるが自動改行されない。
  • pre-line:改行はそのままだが、空白はすべてまとめられる。
  • pre-wrap:preの改行される番。他のいらなくない?

 

 

今回のまとめ

レイアウト関係は本気でマスターしないとまずそうなので定期的に使いながら友達になれるようにしていきたい。ただちょっと急に忙しくなったので勉強にあまり時間取れないのが悲しい。

フロントエンジニアを目指す話 3話 CSSの縦横の幅とか余白とかその辺の勉強

 

 サイトの見た目に関係する難しそうな縦横幅と余白の勉強

今回勉強して、プログラミングって本当にちゃんと理解していないと実際にコーディングするときにコードが出てこなくてただの役立たずになると思った。それが基礎ならなおさら。CSSの勉強を始めて2日目にして早速?マークがちょっと出て危なかった。調べたら割とwidthとheight、paddingとmargin付近の勉強で一度つまずく人が多いっぽい。プロパティと値を覚えるのと基本的な使い方はそこまでむずかしくはないと思ったけど、コーディングのルールみたいなものがめんどくせえなと感じた。

あとで書くけど一番なんだこれって思ったのは、marginの上下の余白の話。要素が縦に並んでて両方にmarginを指定した場合、上の要素のmairgin-bottom:20pxと下の要素のmargin-top:10pxは合計で30pxはなく、この場合大きい方のmargin-bottomの20pxのみ指定される。

分かってればいいけど使いにくいと思った。さらに、borderを設定した場合はまたややこしくなる。box-sizing:boder-boxというコードを入れないと大変になる場合がある。というか、要素からborderで設定した枠線の分だけはみ出るという結果になったりする。横方向の話だと、margin、width、paddingの合計が100%ちょうどにしている時に更に、borderを設定すると100%+borderになるので別でコードを追加して、100%の中にborderも含まれるようにする必要がある。

余白や枠線のサイズを%で指定しなかった場合は、問題ないんだけど今スマホでもPCでも美しくWebサイトを見れないとSEO的にもよろしくないので%が便利なのはすでに理解した。なのでこのようなめんどくさい知識もきちんと勉強しないといけない。

とにかくアウトプットしていこう。

widthとheight

昨日も書いたと思うけど今回勉強した内容にもいろいろでてきたので再度復習を兼ねて書いていこうと思う。

width

要素の横幅を指定できるプロパティ

height

要素の縦幅を指定できるプロパティ

 

今回新たに分かったのは現代ではスマホでも見ることを考える必要があるのでここを%で指定することが多い。pxを使用することが多いと思ったけど実際は%で指定することが多そうだ。一回現役エンジニアの上官に質問してみようと思う。

以下適当にまとめ

  • 要素がdisuplay:inline状態だと指定できないので忘れないようにしよう。
  • デフォルトでinlineなタグは<a><img><span>。
  • デフォルトでblockなタグは<p><div><ul><h1~h6>。
  • inlineの要素は中身のサイズ=幅だと思っておこう。
  • 子要素は親要素より自動で大きくなることは無い。
  • widthのデフォルトauto時は横限界まで幅は大きくなる。
  • heightのデフォルトのauto時は縦限界まで大きくならず、中身のサイズで決まる。
  • bodyのwidthは指定されていないとブラウザのサイズになる。%で指定するときは親要素基準なので重要。指定しなければ見ている端末によって横幅が変わる。

min-widthとmax-width

なにかとサイト作成時に役立ちそうなminとmaxさん。まだ実際効果を実感できてないなので、きちんと理解できてない感はあるけど忘れないようにはしておきたい。この二つは言わずともpxで指定する必要がある。%で指定している場合はブラウザサイズによっては小さくなりすぎたり大きくなりすぎたりすることがあるため。ただ画像には%で指定することがある。

min-width

これ以上は小さくならないという最小値を指定できる。

PCなど大きいブラウザで見るときはちょうどいいサイズだけど、スマホで見たらちょっと小さすぎるなってときに指定してあげると便利。

画像などが画面からはみ出てしまうとき(親要素より大きくなる時)はmax-width:100%を指定する。%で指定すると縦長になったり縦横比率がおかしい画像が出来上がることが多いので、そういう時はheight:autoを指定してあげると治る。

max-width

これ以上は大きくならないという最大値を指定できる。

スマホなど小さいブラウザで見るときはちょうどいいサイズだけど、PCでみたらちょっとでけえなって時に便利。

※min-height、max-heightも存在するけどあまり活躍しないらしい。縦横比がおかしいなと感じたらheightの方をautoで指定してあげるとバランスがよくなる。

 

widthとheightの今回の勉強はここまで。今後新たに新しい使い方や注意点が出てきたら書いていこうと思う。

marginとpadding

要素周りの余白を指定できる。

padding

要素の中の余白を指定できる。要素の一部として含まれる。

margin

要素の外の余白を指定できる。要素に含まれない。

 

要素の中央から外側に順に

要素中央(テキストなど)ーwigth、heightーpaddingーmargin

 

上下左右はborderと同じで

top(上)、bottom(下)、lef(左)、tright(右)で指定できる。

padding-topなど。

まとめて指定したい時は

p{padding or margin:10px 5px 10px 5px;}

左から順に上、右、下、左と指定できる。

上下、左右のまとめて指定の場合は

p{padding or margin:10px 5px;}

左が上下、右が左右。

%で余白を指定したい場合は

  • 基準は親要素
  • paddingの余白指定はNG
  • width、padding、marginの合計値が100%になる必要がある。
  • borderを同時に使うならbox-saizing:border-boxを忘れないように。
marginの相殺

上にも書いたが、margin同士がぶつかるとは合計値ではなく、大きい方が優先され、小さい方は消される。これは忘れないようにしたい。

 

 今回の勉強まとめ

レイアウトにめちゃくちゃ重要そうな内容ばかりだったので実践では忘れないようにしたい。ただ実際使ってみるといろいろ発見がありそうなので使ってみて再度勉強していきたい。

 

今回の落書きは長すぎるので結果だけ

HTMLとCSS

実行結果

HTMLとCSS

実行結果2

 

 

 

 

 

 

 

 

 

 

 

 

 

フロントエンジニアを目指す話 2話 CSS覚えること多くない?

 

覚えることが多いCSS

ここ数年何かを暗記しようとか理解しようとか思って勉強した記憶が無かったので全て忘れないように記憶することは可能なのかと思うほどにCSSの勉強が心配になってきた。25歳ということもあるだろうが公務員試験に向けて頑張ってた時代はそこまで暗記に困った記憶が無かったのでショックである。比べる対象が10代なのがそもそも間違っているのだろうけど5年やそこらでここまで変わるとは思わなかった。今この記事を見ている10代の若者がいるなら本当に今のうちにいろいろ勉強しておきなさいとアドバイスしたい。人によるだろうが筆者はすでに頭が悪くなりつつあるみたいだ。とにかくそれなら余計にインプットだけではなく、アウトプットをする必要がある。頑張っていこう。

CSSをコーディングする場所

まず最初に疑問に思ったのがCSSはHTMLの文書の中に書くもんだと思っていたが、別にそうじゃなくてもいいらしい。というより上官に聞いたらHTMLファイルと別でCSSのファイル作ってくれた方が、メンテナンスとかいろいろ楽だから基本的には書きこまないよと言われた。他にも多くメリットがあるそうだが、実践段階に入っていないので理由は後回しにしてとりあえず、CSSを書く場所だけは覚えておきたい。

外部ファイル

名前の通り○○.cssというファイル名で保存して、後にHTML側でcssファイルを開くという方法。cssファイル側とHTMLファイル側に多少の工夫が必要だが、特に難しくもないのでこちらをまずマスターしておきたい。

cssファイル側にはコーディングの一発目に

@charset"UTF-8"

というコードを書く必要がある。文字化けを防ぐために必要なものである。書かないといけないものと覚えておこう。

cssを読み込みたいHTMLファイルを開き、<head>タグ内に

<link rel="stylesheet" href="CSSファイル名orCSSファイルの在処のURL">

というCSSを呼び出すためのコードが必要。

特に難しくもないので今後は基本的にこの方法を使ってHTMLとCSSを勉強する。

<head>タグ内に<style>タグを使用する方法

HTML文書の<head>タグ内に<style>ここにcssコーディング</style>という使い方をするだけでCSSを楽に書くことができる。

インライン

一部のデザインだけを変えたい時にstyleを属性として使用する、インラインというものがある。

<h1 style="color:red">

コーディングが上手な人はインラインをほとんど使わないらしいので基本的には使わない方法で頑張りたい。あとで書くがcssのプロパティdisplayに使用する値のinlineとは別である。

適用される優先順位

インライン > <style>タグ > 外部ファイル

外部ファイルで作ってサイト全体のイメージを作り、このページのデザインだけ少し変えたいなと思ったら<style>タグを使用する。というような使い方でいいはず。

 

この辺の知識はとりあえず忘れないようにマスターしておきたい。

 

cssを学ぶに当たって要素について勉強した

要素とはhtml文書においてタグで囲われたもので

<p>これらが要素</p>

だと簡単に解釈した。

要素にも親要素と子要素というものがあるが、簡単に

<div class="poipoi">

    <p>これは例です</p>

</div>

この場合だと<div>タグが親要素で<p>タグが子要素となる。CSSを勉強するにあたって必須知識らしい。

CSSの基本形式

セレクタ{プロパティ:値;}

  • セレクタ=タグ<p>など。<>で囲う必要はない
  • プロパティ=colorなど命令したいものを書く。
  • 値=プロパティによって値の種類と使い方は様々。
  • 最後の「;」を書かないと続けてコーディングする場合,次の行のcssの指示が反映されなくなるので書く必要がある。一つだけコードを書く場合などは書かなくてもいいが今はとにかく絶対書くものだとして理解しておく。後々書いたらまずい場面が出てくるのであればその時は修正。
セレクタにid名とclass名を使用する場合

idは#id、classは.classと書く必要がある。

複数セレクタをまとめて書きたい時

#id,div,pなど「,」で区切る必要がある。

適用先を指定したい場合

.class p のように半角スペースで区切る。

プロパティの種類と値

昨日使い方を勉強したものを記載。これからもどんどん使えるものを増やしていきたい。

color:red

文字色の指定。値は色の名前か、カラーコードと呼ばれる英数字の#FFFFFFのようなコードで指定する。カラーコードはググればいくらでも出てくる。

fontsize:1px or 1em

フォントサイズ指定。値はpxかemで指定。emは現在の大きさの倍率で指定できる。

text-align:center

文字の位置調整。値はleft、light、center。デフォルトはleft。

background:red

背景色。色の名前かカラーコードで指定する。

border:solid 1px black

文字周りに線を足すことができる。値は線の種類、太さ、色の順で書く。

線の種類はsolid(普通の線)、dotted(点線)、dashed(破線)、dooble(二重線)、none(無し)

プロパティを少し変えるだけで文字の上下左右に線を指定することもできる。

border-top(上線)、border-bottom(下線)、border-left(左線)、border-right(右線)

borderのみの場合は文字を囲む。

widthとheight

要素の縦と横の大きさを指定できる。widthが横幅でheightが縦幅。値はpx。

paddingとmargin

要素の内側の余白をpaddingで指定、要素の外側の余白をmarginで指定できる。

display:inline

要素の表示方法を決めるもので、値はinline、block、inline-block、none。

block

要素が縦並びで自動的に改行されます。

要素のwidthとheightも指定できる。

paddingとmarginの指定も自由自在。

要素の中身は指定しなければ自動的に横に長くなります。

p、div、ul、h1~h6などのタグは初期値がこれ

inline

要素が改行されずに横並びで配置されていきます。

幅、高さ、上下の余白の指定ができません。横のpaddingとmarginは指定できます。

要素の中身の文字や画像のデータに応じたサイズに自動的になります。

a、spam、imgの初期値がこれ

inline-block

二つの良い所だけを抜き取ったようなものでとりあえず一番強い。

全部できるもので優秀。ブログのヘッダにメニューバーを作りたい時などに便利。

 

今回の勉強まとめ

CSSはHTMLとちがって覚えるものが多いっぽいので大変。暗記だけではなく、使い方もしっかり理解する必要があるのでプログラミングの難しさを痛感。とりあえず今は楽しめているのでよしとする。

 

昨日つくったやつ載せ

実際はちゃんとわかりやすいように改行してます。これはただコピペしているだけのものです。なんかコードを記事に張る方法あるみたいですけどめんどくさそうなので今はスルー。それより勉強だよ。

HTMLとCSS

実行結果

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta chraset utf-8>
<link rel="stylesheet" href="untitled-1.css">
<tytle>css練習2</tytle>
</head>
<body>
<div id="headline">
<h1>CSS練習</h1>
<p>段落1</p>
</div>
<div class="main">
<h2>見出し2</h2>
<p>これは<span class="light"></span>です</p>
<p>
<a href="https://www.poipoipon.com/">メインページへ</a>
飛びます。
</p>
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

 CSSファイル

@charset "UTF-8";
html,body {
/*ページ全体の背景色をベージュ*/
background:#fffbf4;
/*全文字を中央ぞろえに*/
text-align:center;
height:100%;
}
h1 {
/*h1タグ内の文字色を変更*/
color:#f89174;
}
#headline {
/*id="headline"の下に点線を*/
border-bottom:dotted 2px #f89174;
height:50%;
background:rgb(162, 211, 235);
}
#headline p {
/*id="headline"の中のフォントサイズを1.2倍に*/
font-size: 1.2em;
}
h2 {
/*h2タグの文字色をオレンジに*/
color:orange;
}
a {
/*リンクの文字色をgrayに*/
color:gray;
}
/*↓id="nav"の中のulに対してCSSを適用*/
#nav ul {
list-style-type: square type none;;
text-align:center
}
/*id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li {
display:inline-block;/*inline-blockに変更*/
width: 80px;/*縦幅を80に*/
padding:10px 0;/*要素内側の縦余白を10*/
margin:10px 0;/*要素外側の縦余白を10*/
vertical-align:middle;/*縦の表示位置を中央に*/
background-color:skyblue;/*背景色をskyblueに*/
font-weight:bold;/*fontを太線に*/
color:white;/*文字色をwhiteに*/
}

フロントエンジニアを目指す話 1話 HTMLから勉強して来い

 

 

上官命令:HTMLを一か月以内にマスターしてきて

前回とりあえず筆者のスペック説明を軽くしましたが、IT系のエンジニアといってもどれぐらい種類があるのからすら理解していない状態でした。フロントエンジニアがどんなものなのか軽く理解している程度で、我が上官の現役エンジニアによって大まかには理解でるようになりました。

 

Web系に強いエンジニアになりたいという理由で勉強を始めた訳ですが、そのためにはまずHTMLをマスターして来いと指示が出ましたので、とりあえずHTMLを攻略するために勉強を始めました。HTMLマスター後はCSSをある程度使えつまで勉強して、JS(JavaScript)など動的な開発を学んでいこうという結論になりました。とにかく今回は静的な開発の基本である、HTMLについて学んだことをアウトプットしていこうと思います。動的、静的な開発の違いについても正直まだきちんと理解できていな部分もある。

HTMLはWebサイトの骨みたいなものだということは学びました。HTMLが骨ならCSSは肉です。多分。HTMLは文字や画像をWeb上に表示させるもので、CSSはHTMLで表示させた文字や画像を装飾するために必要な言語という解釈で間違っていないと思う。装飾といったが文字や画像の位置や大きさ、デザインやレイアウトなど全て変更することができるのがCSSだということでWebサイト作成には必須だと理解したので頑張りたい。

ということでどんどんアウトプットしていきたいと思う。

昨日の成果まとめ

HTMLでコーディングするにはまずタグと呼ばれる<>で囲まれたコードを理解し、暗記する必要があると解釈した。CSSや他の言語だと覚えることが多いと師匠に聞いたが、HTMLは一か月でマスターすることができると教えてもらったので、すぐにでもマスターしたい自分はまず暗記することに力を入れる必要がありそうだ。ただコードの役割などは理解しておく必要があるかもしれないが現役エンジニアでも調べながらコーディングしているぐらいだからと励ましの言葉頂いたのであまり根を積めずに継続することを目標に頑張りたい。

タグまとめ

最低限今覚えて忘れないようにしておきたい昨日勉強したタグ達。

 

<!DOCTYPE html>

一番最初に宣言するようなもの。htmlでコーディングしていますよ的な?深く考えずにそういうものだと思っておく。

 

<html></html>

これも必要なものだと深く考えずにそういうものだと思っておく。二番目に書くタグで、コードの最後に終了タグを設置する。<html>と</html>の間にコーディングする。

 

<head></head>

その名前の通りWebサイトの頭脳的なもので目には見えないものでWebサイト上には表示されないものなどここに書く。Webサイトの見えない情報などをすべてここに記す。基本的にGoogle神が見る場所と勝手に解釈。

<head>内に書くべきコード。他にもたくさんあるみたいだが今は保留。

とりあえず今はこれだけいいと思う多分。

<meta charset="utf-8"/>

何か書いとけばいけないもの。文字のエンコードに必要らしいけど詳しく理解するのは先でいいだろうと解釈。とりあえず必須。

<title>例ぽいぽいぽん</title>

はてなブログなどブログサービスでは自動で出力されるようになっているので気にしなくてもよさそうではある。

 

<body></body>

訪問者に直接見えるWeb上に表示されるものを書く場所。<body>のタグ内に他のタグなどを使って多くの文字や画像を表示させていく。

 

<p></p>

今書いているこのような文章を囲っているのが<p>タグです。段落を変えたい時などは一度</p>で閉じます。

 

<a></a>

画像などにリンクを仕込んで押してもらうことで他のページに飛んでもらったりするときに使用する。こちらの使い方も少し特殊で属性を使用してタグを使う。

<p>

<a herf="https://poipoipon.com/">

<img src="使用する画像の保存先やURL"alt="適当な名前"/>

</a>

</p>

このようにすると画像をクリックすることで指定したリンクに飛べる。

 

<img src~~~~/>※終了タグ無し

imgでは終了タグは必要ありません。画像を貼るために使うタグです。PDFデータや動画などは貼り付けることができません。

使用できる画像データはpng、jpg、gif、svgなどの画像のみですが、gifが使えるので軽いアニメーションは張ることができます。

imgタグは終了タグがないため他とは違った使い方をする。

<p><img src=”ファイル名”alt"画像が表示できなかった時に代わりに表示する名前"/></p>

ファイル名は自分のPC内のものであればファイルの所在地、alt属性で囲っているところは画像が表示されない場合などに代わりに表示する名前を自分で決めて問題なし。iPhoneの画像なら<~alt"iPhoneの画像"/>みたいな感じで良いと思う。SEO対策で習ったので少しだけ知ってた。

文字と同じ扱いなので<p>タグで囲うようにする。必須なのかどうかはわからない。

 

<ul><li></li></ul>

箇条書き

<ol><li></li></ol>

番号付き箇条書き

※<li></li>の数は無制限。<ul><ol>タグの中の<li>タグを増やせばいいだけ。

 

<br>

改行するために使うやつ。文中などに<br>と書くだけでおk。

 

<id>と<class>

タグに名前を付けることができる。変数的なものかな?

<p class="poipoipon">

このように書くと<p>タグの名前がpoipoiponになりました。名前は日本語で書くことはできますがエラー吐くそうなので英数字で使用しましょう。名前の先頭は英語じゃないと機能しません。

idとclassの違いは同じ名前を使えるか使えないかです。idは一つの文書で同じ名前は使えません。対してclass名はいくら使っても大丈夫です。

使い分け方はまだ素人なのでよくわかっていません。

<div>と<span>

ある一定の間隔ごとに文章を分けてデザインを変えたい時などに使用する。

<div>は前後に改行が挿入される。<span>は何も起きない。

<span>が使いやすい?

<h1></h1>

見出しを表す(h1~h6まである。h1が一番大きい)

属性

今わかっている属性の使い方とか

<タグ名 src>

imgと合わせて使うやつ

<タグ名 alt>

画像が表示されなかった時に変わりに表示させる名前を指定できる

<タグ名 herf>

<a>タグと合わせて使う。リンクを挿入するときに使用。

5/19に勉強したことまとめ

とりあえずHTMLのさわりはおおまか理解したかな?といった感じである。上官にHTMLをマスターして来いと言われたので昨日学んだ基礎中の基礎は忘れないようにしたい。これからはCSSの触りも勉強していくことになりそうなので頑張ろう。

 勉強初日に書いたよくわからないやつ。とりあえずちょっと楽しかった。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<style>
body {
color: red;
background:
}
.main,a{
color:rgb(104, 49, 42)
}
p {
color:skyblue
}
div p span{
color:thistle

</style>
</head>
<body>
<div id="headline">
<h1>pooooooooooooooooooooooi</h1>
<p>HTML練習中</p>
</div>
<div class="main">
<h2>見出し。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="https://www.poipoipon.com/">ぽいぽいぽんへ</a>
飛びます。
</p>
</div>
</body>
</html>

 

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

  • 作者: 赤間公太郎,狩野咲,鈴木清敬
  • 出版社/メーカー: 技術評論社
  • 発売日: 2019/03/01
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

 

 

 

【2019年最新版】Yモバイルのおすすめプランを小学生でも分かるように紹介!

iPhone

 格安SIMの中でも回線が強い方で評価が比較的高いYモバイル。そんなYモバイルについて口コミや大手キャリアと比べてのデメリット、メリットをまとめました。Yモバイルに乗り換えを考えている人向けにおすすめプランも紹介。 

続きを読む

【2019年最新版】LINEモバイルのおすすめプランやオプションを紹介!

iPhone

なにかと知名度の高いLINEが提供するLINEモバイル。Softbankの子会社という立場のため多くの格安SIMに比べて回線が比較的安定していて、信用できるのでおすすめできます。そんなLINEモバイルについて口コミや大手キャリアと比べてのデメリット、メリットをまとめました。LINEモバイルに乗り換え検討中の方に小学生でも分かるように紹介していきます。

続きを読む

【2019年最新版】UQモバイルのおすすめプランを小学生でもわかるように紹介

Apple製品

格安SIMで回線が比較的に強いと言われているUQモバイル。そんなUQモバイルについて口コミや大手キャリアと比べてのデメリット、メリットをまとめました。UQモバイルに乗り換えを考えている人向けにおすすめプランも紹介。

 

続きを読む

音ゲーが好きな人はOSU!でのAim練習がおすすめ!【ダウンロード方法や曲インストール方法解説】

OSU!



OSU!とは

PC用の音ゲー(太鼓の達人的なもの)で既存の曲に合わせてカーソルが画面上に出現し、それをクリックするといったようなゲームで、Aim力がかなり必要である。説明が難しいのでYouTubeなど動画サイトでOsu!で検索をかけてもらえればすぐにでも理解していもらえると思う。とにかくAim力が雑魚の人にはかなり辛いゲームで、異次元Aimを手に入れたい人にとってはかなりおすすめできる。なんといってもハイセンシを目指すプレイヤーには個人的にはめちゃくちゃおすすめできる。筆者は振り向き3cm時代にこのゲームで鍛えた。使いこなせていたとは言っていない。ちなみに無料である。

続きを読む