悠々字的

PCなどの話題が主になる予定です！

ProgateのHTML&CSSがなかなか好調！

記述した通りに動くととても楽しいです。

 

ブロック要素に直し忘れて改行されなかった、といった手違いはありますがどんどん慣れていきたいです。

 

Progateの道場コース上級まで2～3週できたら、JavaScriptなど他の言語も気合入れてやっていこう！！

 

プログラミング言語(マークアップ言語)学習サイト、Progateが面白いです

題の通りです。

最近HTMLなどのいわゆるマークアップ言語を楽しんでいますが、

ネット上にProgateという学習サイトが存在する事を知りました。

 

クイズ形式のように、提示されたお題に対してhtmlやCSSなどを書いて、見本通りに作成できればクリアというとても楽しいサイトです。

 

プログラミング言語やマークアップ言語をゲームみたいに習得できるのは素晴らしいですね！

 

他にもいろいろな言語が学習できるのでとてもオススメです。

ゆくゆくはマークアップ以外にプログラミングも学んでみたいです。

 

それではまた次回！

HTML記述の際に、Internet Explorerの互換モードを停止する作業。

HTMLを記述する際に、

Internet Explorer(以下IE)で正常に表示される為の設定を施します。

IEでは、古いWebブラウザで表示した状態を再現する機能(互換モード)があるようですが、この互換モードが意図せず発動してしまうのを防ぐ為に、HTML記述の際に、互換モードを予め停止しておきます。

 

<meta http-equiv="X-UA-Compatible"content="IE=edge">

という一行を、<head>タグの中に記入しておきます。

<head>タグの中では、.cssや.jsファイルを読み込む機会があると思いますが、それらを読み込む前にこの一行を記入する必要があるようです。

IEの互換モードを停止する一行の前に.cssや.jsを読み込んでいると、そこで表示モードが決定する為だそうです。

従いまして、IEでの互換モード停止命令の一行は<head>タグでも上の方に記述するべきだと言えそうです。

<head>タグの中での記述の優先順位が存在するという概念も発覚しましたので、知識が順調に増えましたら再び言及したいと思います。

 

それではまた次回！

HTMLの疑問、viewportを整理してみる。

HTMLを勉強し始めて数日、だんだん記述したコードがブラウザ上に反映されていく事にも慣れてきました。

 

例によって個人用ですが、おや？どういった意味かなと思ったコードを自分に解説したいと思います。

↓そのコードがこちら↓

 

<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">

 

viewportの設定は少々難しいらしいので、私の読んでいる教本では読み飛ばしても大丈夫という事でしたが、せっかくなので理解したいなぁと思います。

 

<meta name="viewport" content="">と記述する事により、

Webページの表示する領域を操作できるようです。

まだ理解が追い付いてはいませんが、表示する領域というと、

縦幅や横幅の事を指しているのかな、とそんなことを考えました。

 

width=device-widthという部分では、width(画面の幅)にdevice-width(デバイスの幅)の値を代入しているようです。

 

なので、表示するデバイスの幅によってwidthの値が決定する為、表示する画面に対して最適な解像度に調整してくれるという事だと思います。素晴らしいです。

 

user-scalable=yesについては、ユーザがズームできるか否かを指定しているようです。今回はyesが代入されているので、ズームできることになりますね。noにした場合はズームを許可しないという事になります。

 

initial-scale=1.0の部分では、Webページを開いた時点でのズーム率を指定しているとのことです。1.0倍なので100%、すなわちそのままの手を加えていない拡大率ということになりますね。

仮に数値を2.0に指定すれば、2.0倍になるので最初からドアップになりそうですね。

 

今回ご紹介したviewportは最初何のことやらサッパリといった感じでしたが、ひとつひとつ噛み砕いていけば、易しい要素で構成されている事がわかりました。ひとつの<>の中にごちゃっと詰まっていると難しいように見えますがｗｗ

 

画面上に表示するサイズをデバイスの画面幅に委ねるという自動化のタグを入れておけば、毎回コピペで十分という考え方もできるような気もしますが、理解しておけばのちのち役立つような気も致しますので、細かく理解していけたらなと思います。

また何かおや？と思ったタグや仕様があれば取り上げたいと思います。

 

 

それではまた次回！

 

JavaScriptは専用ファイルを作成する必要があると思っていたらそんな事はなかったの巻

JavaScriptはそれ専用のファイルを作成して、

htmlファイルから呼び出す行為が必須だと思っていましたが、そんなことはない様子…

 

インラインスクリプトというそうで、htmlファイルの構文の中に

直接JavaScriptを書いちゃうそうです。

 

↓以下インラインスクリプトの一例↓

<script type="text/javascript">//ここからインラインスクリプト開始

console.log("Hello注意報");//console.log関数使用

</script>//インラインスクリプト終了

 

<script>と</script>の間に記述する

という書き方をしているのでわかりやすいですね。

htmlファイルの中にJavaScriptを埋め込めるのは初めて知りました。

 

 

 

それではまた次回！