xampp環境でLAN公開

プログラミング

2021.11.23 2021.11.08

xamppに配置したWebサイトをLAN（Local Area Network)公開してみよう。

アプリの作成

任意の場所に（デスクトップ)に今回作成するアプリ用のフォルダを作成する。
フォルダ名はなんでよいが今回はex7とする。

js,css,imagesフォルダの設置

ex7フォルダの直下にjs,css,imagesというwebアプリを作る際のテンプレとなる３つのフォルダを作成する。

index.htmlの作成

ex7の直下にindex.htmlを作成する。内容は以下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
  <div id = "container">
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>
</html>

main.cssの作成

cssフォルダの中にmain.cssを以下のように作成する。

#container{
  width:701px;
  margin:0 auto;
}
header{
  height:200px;
  background-color:pink;
}
main{
  height:500px;
  background-color:aquamarine;
}
footer{
  height:100px;
  background-color:aqua;
}