JavaScriptで初心者が入門としてやったこと1（事前準備）

JavaScriptcss, javascript

広告

目的

JavaScriptやvue.jsを勉強する中で、実際にテストとして開発この記事で書いていければと思っております。今回は事前準備ということで、簡単なhtmlファイルと簡単なcssファイルを作ってこれから勉強をする事前準備としました。
前回vagrantで開発用の仮想マシンを作ったので、環境としては、vagrant上で動作のテストを行っていきたいと思います。
vagrantでの環境構築はこちらの記事を参照してください。

最初にやりたいこと

最初に勉強としてやりたいこととしては、よくあるヘッダー部分のログインにマウスを重ねた時に、メニューが表示されるという機能を実装したいので、そのための簡単なhtmlファイルを作成していきます。

実装部分

HTMLファイル作成

<html>
<head>
<script src="../node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <div id =header>
    <div id =login></div>
  </div>
</body>
</html>

<script>タグで後々開発で使うとされる、vue.jsを読み込んでいます。
次の行で、今回使うcssファイルを読み込んでいます。
<div id=header>は、ページの上部に帯状で表示するヘッダーのブロックとしています。
<div id=login>で、ログイン等で使用されるブロックとして想定して作っています。

CSSファイル作成

#header {
width: 100%;
height: 50px;
background-color: burlywood;
}

#login{
width: 50px;
height: 50px;
background-color: cadetblue;
position: relative;
left: 90%;
}

表示したいと思う、サイズ等を指定してブロックを配置。
loginの方では、positionをrelativeにして、左から全体の90%の位置に表示するというもので指定しました。

position

ボックスの配置方法を指定するプロパティ。

static：　そのままの位置（デフォルト）
relative：　相対位置（px指定しなければstaticと同位置）
absolute：　絶対位置（基準位置は、親要素がstatic以外であれば親、それ以外はウィンドウ左上）
fixed：　絶対位置＋画面上に位置固定

表示されるもの

このような簡易的なものが表示されたので、いよいよ実装になりそうです。

広告

JavaScriptcss, javascript