プログラミング: 10/15/16

2016年10月15日土曜日

ホームページの縦型のメニュー

マウスカーソルの移動により選択が可能です。

ソース

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

top:500;

position: relative;

margin:30% auto;

width: 200px;

height: 100px;

border: 3px solid #73AD21;

}

div.absolute {

position: absolute;

}

</style>

</head>

<body>

<div style="left:40px;position: absolute;" >ユーザーID入力域</div>

<div style="top:50px;left:40px;position: absolute;" >パスワード入力域</div>

</div>

</body>

</html>

CSSを利用したログイン画面

styleを利用して、以下の値をして位置決めを行いました。

top

left

positionは、「absolute」

です。

ソース

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
top:500;
position: relative;
margin:30% auto;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
}
</style>
</head>
<body>

<div class="relative">
<div style="left:0;position: absolute;" >uid</div>
<div style="left:40px;position: absolute;" >ユーザーID入力域</div>

<div style="top:50px;left:0;position: absolute;" >pwd</div>
<div style="top:50px;left:40px;position: absolute;" >パスワード入力域</div>
</div>
</body>
</html>

(css) ページ全体のレイアウト

実行してみる

ホームページ全体のレイアウトです

画像のようなレイアウトは、以下のようなCSSでなりたっています。

黄色の部分でヘッダーやフッターの設定で重要ですが、

div.left,div.content等の全体的な構造も大切だと思いますね！

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
margin: 0px;
border: 1px solid gray;
line-height: 150%;
}
div.header, div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
h1.header {
padding: 0;
margin: 0;
}
div.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
div.content {
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">おいしいもの</h1></div>
<div class="left"><p>
ここにメニューを書くこと
</p></div>
<div class="content">
<h2>よろしくね</h2>
<p>ここは、本文内容</p>
<p>ここは、本文内容２</p>
</div>
<div class="footer">Copyright</div>
</div>
</body>
</html>

JavaScript データ型

JavaScript　データ型

実行してみる

[解説]
  JavaScriptでは、データ型が以下のようなものがあります

  数字型　 data=12型number
  文字型   data=文字列12345型string
  論理型   data=false型boolean


[ポイント]
  プログラムをするときは、データ型を意識しなければなりません。

  typeOf演算子でデータ型をしらべる

  トライ
    数値型から文字列型へ変換

ソース

  var data=12;
  document.write( "data=", data, "　型=", typeof(data),"<br>" );

  var data="文字列12345";
  document.write( "data=", data, "　型=", typeof(data),"<br>" );

  var data=false;
  document.write( "data=", data, "　型=", typeof(data),"<br>" );

linux で　viの使い方

昨日youtubeに投稿したのですが、

最近は、みなさん頑張っていますね、かなり自分は劣等感でいっぱいです。

でも、せっかくviに関してまとめたのでこちらにそのマトメを書いておきます。

＊マウスによるGUIのエディターと違う
＊カーソル移動のやり方
＊編集
＊ファイル操作

最低限憶えておきたい事
・モードが２種類あります
＞コマンドモード
＞入力モード

　※入力モードを終わりにするには、
　　Escキー

・カーソルの移動は、矢印キー
（上、下、右、左）

・編集
文字列の追加　a
文字列の変更 R
文字の削除 x

行の追加 o
行の削除 dd

・ファイル操作
書き出す　：wq
破棄する　：q！

もっと便利に

・編集の取り消し
編集操作の取り消し　u
編集操作の取り消しの取り消し　Ctrl+r

文字列の検索
/hoge hogeの文字列を検索
n　　　　次のhoge
N 前のhoge

・行のコピー
１行コピー　yy
ｎ行コピー　ｎ数字ｙy
ペースト　ｐ

練習問題
１．include ファイルを追加します
２．関数の複製を作成する（関数名を既存関数２にする）
３．行のコピー、カット、ペースト

はじめてのプログラム

JavaScript

はじめてのプログラム！

実行してみる

[解説]
  JavaScriptで「おはよう」を表示させるプログラム

[ポイント]
  必ず「script」タグで囲むこと


ソース


<html>
  <head>
    <title>画面表示</title>
  </head>

  <body>
    <h1>画面表示</h1>

    <script>
      document.write("おはよう！");
    </script>

  </body>
</html>

楽しいプログラミング

プログラムは楽しくなければ、いけないと思い、ここに

ブログを開設しました。

最初にプログラムは楽しいか？

自分は面白いと思っていますよ、

２０代から初めてもう５０代ですから、だいぶ楽しんでいます。

基本プログラマー、SEだったのでプログラミングの面白さ、大変さはよく

分かっているかな！

面白いこと

自分の思ったとうりに動作してくれる事

いろいろ調べたり大変だけど、難しい事、現象が再現しない

などあるけれど。。

達成感は最高かもしれませんね

登録: 投稿 (Atom)

プログラミング

2016年10月15日土曜日

(css) ページ内のメニュー表示です（縦メニュー）

ホームページの縦型のメニュー

マウスカーソルの移動により選択が可能です。

(css) ログイン画面

CSSを利用したログイン画面

(css) ページ全体のレイアウト

ホームページ全体のレイアウトです

JavaScript データ型

JavaScript　データ型

linux で　viの使い方

はじめてのプログラム

JavaScript

楽しいプログラミング