メモ

メモを入力してみよう!


Lesson 05「表を作ってみよう!」

学習概要

tableタグ、trタグ、tdタグを使って表を作ってみましょう!

補足

プログラムを書くにはMacでは「テキストエディター」と呼ばれるものやWindowsでは「メモ帳」がありますが、さらに高機能なエディターとして今後紹介してく「Atom」や「Brackets」というものがあります。
さらに高機能で実際の実務でもよく使われるものは「Eclipse」と「InteliJ」という「IDE(あいでぃーいー)」という「統合開発環境ソフト」です。
統合開発環境ソフトは「Atom」など高機能なエディターのさらに高機能なものになります。要は「プロ用」ということですね。

「Eclipse」は無料で利用できますが、有料の「InteliJ」の方が高機能なためじわじわとシェアを奪われていっています。
WEB系の現場であればInteliJかAtomを使っているエンジニアが多いです。
そのあたりは好き好きだったり、現場で指定されている場合もあります。
(WEB系であれば「好きなのでいいよ」という現場がほとんどですが)

ただし、HTMLやこれからやっていくCSSという言語を扱って何行にも渡るコードを書いていくと「打ち間違い」がとても多くなっていきます。
metaタグがmataタグと打っているなどスペルミスや、<td></td>/</td>といった閉じタグを2度つけていたり、タグの間にいらない文字(この例だと「/(スラッシュ)」が入っていたり。
CSSで使うことになる「{}(波カッコ)」がちゃんと両方ついていなかったり、「;(セミコロン)」を行の終わりにつけ忘れていたり。

こういった「打ち間違い」によって「表示がおかしい」「うまく動かない」ということが初心者のうちは多発します。
何度見ても「練習のコードと合っているのに。。」と思うんですが、実際に講師がみたらすぐ誤りに気づきます。しかし、初心者のうちはなかなか気づかずに何時間も悩んでしまいます。

悩むという時間も実はとても大切ですし、実務で必要になる「コードの誤りをパッと見つける目を養う」という意味でもある程度悩んでもらいたいところですが、あまり悩みすぎてモチベーションが下がってしまっても元も子もありません。

そこで、実際の現場でも使われている「Linter(リンター)」というものをオススメします。
IDEには最初から入っていて、Atomには拡張機能としてインストールすることができます。

Linterはプログラミング言語の打ち間違いや構文間違いをチェックしてくれるものです。
HTMLをチェックするもの、CSSをチェックするもの、JavaScriptをチェックするものなど言語ごとに分かれていて「CSS」なら「CSSLinter」といったものがあります。
IDEは網羅している言語全てのチェックができますが、Atomではそれぞれインストールする必要があります。
インストールや使い方は少し難易度が上がりますが、出来る方は下記URLなど参考にインストールしておくと今後の開発がとてもやりやすくなります。

ATOM:https://eng-entrance.com/atom-editor
Linter:http://creating-homepage.com/archives/2304

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 05「表を作ってみよう!」 の内容※SEO用のため読めません

これからリンクを使った画面の切り替えを行っていきたいと思います。


まず前回作ったテストフォルダを開きその中に新しいフォルダを作成します。【入門】HTML言語・CSS言語初心者俺らを作成したら前回と同じく最初に作った INDEX . HTML ファイルを中にコピーします今回は二つコピーしましょうコピーしたファイルを開くと最初に作ったホームページが表示された図です。【入門】HTML言語・CSS言語初心者ここからファイルを編集していきましょう。


まずは1ページ目のファイルを編集していきます。【入門】HTML言語・CSS言語初心者画面に表示された際に1ページ目とわかるように適当に編集をしていきましょう。練習が終わったら次のページに移るためのリンクを作っていきます。リンクを表示させるには永沢を使います。


【入門】HTML言語・CSS言語初心者そして HF 毒性というもので次のページを表示させるためのファイルのパスを指定します1ページ目のリンクが完成しました次に2ページ目を作っていきますコピーした二つ目のファイルの名前を適当なもので変更します今回は SAMPLE . HTML としますこちらのファイルも先ほどと同じ空の下と分かるように編集していきましょう編集が終わったら同じく A タグを使い前のページへ戻るリンクを作ります。


これで2ページ目の完成です。【入門】HTML言語・CSS言語初心者完成したファイルを開いていましょうそれぞれ1ページ目と2ページ目の画面が完成しました1ページ目の画面から3ページを1ページ目の画面が表示されます表示された2ページ目のマイページへゴースト1ページ目の画面が表示されますこれで画面の切り替えを行うことができましたここからですねすについて前回の画像の時と同じくと解説をしていきたいと思います。


の中には H デフ属性というものを使って次の画面ですね続きの画面のパスを指定していますというのは場所のことでしたけれども今回のバスは SAMPLE . HTML なので INDEX . HTM 表示させる HTML ファイルと同じ場所にあるサンプルドット絵しているファイルにリンクさせますよそれを表示させますよという形になります。【入門】HTML言語・CSS言語初心者2ページ目も同じくですねサンプル. H メールファイルから見た時の同じ場所にある INDEX . HTML ファイル表示させてますよという形で指定がされていますなので音読箱のサンプルドット絵しているファイルこれが ファイルと同じ場所にあるリンクというフォルダの中にあったとします。


そうするとそうすると指定しているパスと実際の場所が違うので画面が表示されなくなります。【入門】HTML言語・CSS言語初心者次ページへのリンクをしてみてもですね指定したパス指定したファイルの場所には実際にはファイルはありませんよという形で見つかりませんでしたとなりますなのでこういう場合の1ページ目のリンクにはですねパスをリンクフォルダの中にある SAMPLE . HTML としたいのでリンクスラッシュ SAMPLE . HTML というパスにすることでリンクをフォルダの中にあるシャンブルドット絵しているという形になります。


リンクに指定したパスと実際のファイルの場所があるので次ページを押すとちゃんとページが表示されます。【入門】HTML言語・CSS言語初心者このリンクのパスにはですね今のホームページの URL を指定することもできますので例えばこのバスに2 sttt から始まる言葉 Google のホームページの URL アドレスを入れたそれで次ページをしてみると外部のグーグルのホームページが表示されるということになります