楽しく便利なwebライフ・web制作pc操作中

　

はじめに

ようこそ pc操作

画像、動画、Windowsの改善や便利なアプリ、不具合時の対応のしかた。
コーディングの基本やテキストエディタなど
”webについてのあれこれ”やwifiやネットワーク、ブラウザ、
マーケティングや広告、などなど。いろいろ役立つようなこと
健康、栄養やカラダ、働き方についても記載しています。

まだまだ改善中ですが、いろいろとお役にたてたらと思います。

更新について

pc操作作業

このサイトはまだまだ修正中のため、細かい修正更新は頻繁に行っております。わりと大きな更新については、ここに記載いたします。

　
　 PC操作

CMS

「Contents Management System」の略で、日本語だと「コンテンツ管理システム」になります。

WordPress 無料で利用でき情報が多い。プラグインが豊富。 baserCMS 　無料で利用できる国産CMS baserCMSさん NOREN 三菱銀行や日立などで利用されています EC-CUBE ECサイト用。ネットショップ。無料利用可能 EC-CUBEさん ecbeing ECサイト用。国内トップ。「JR東日本」等たくさんの大手企業が利用しています。
そこそこ高めの金額

saas

Sass(サス)とは、「Syntactically Awesome Stylesheets」のこと。

Rubyが必要なため、 windowsでは、Rubyをインストールする。Macの場合,Rubyは標準搭載されている。

インターフェース

タブレット、キーボード、マウス

コンピューターと周辺機器を接続するための仕様など。PCのキーボードやマウス、テレビのリモコンなど。
または、ユーザーのコンピューター操作方法のこと。

ハードウェアインターフェース 機器同士を接続するコネクターの規格を指す。 ソフトウェアインターフェース プログラム間でデータをやり取りするために定められた仕様やAPIなどがある。 GUI Graphical User Interface（グラフィカル・ユーザーインターフェース）。
マウスやタッチパネル等で操作すること。 CUI Character User Interface（キャラクター・ユーザーインターフェース）。
キーボードから打ち込み操作すること。
Windowsの「コマンドプロンプト」やMacの「ターミナル」など。 コンソール パソコンなどにおけるユーザーが使用する端末のこと、「ディスプレイ」と「キーボード」 を指す。

Java

JavaはJavaVMと呼ばれる環境が必須なことが多いので実行環境をかなり選ぶ。

コンパイラ型　開発時にまとめて変換されるため実行速度が速い。
C、C++、Javaなどはコンパイラ型言語です。

css

css装飾　

opacity 0.0（完全に透明）〜1.0（透明なし）の範囲で指定（初期値は1） 　設定するセレクタを指定する。

セレクタ{opacity:数値;}

:hoverなどで、リンクや画像のマウスオーバー時の透明度指定ができる　

a:hover { opacity: 数値; }　セレクタ:hover { opacity: 数値; }

外部リンク参考サイトさん opacityについてきほん
角を丸くする

セレクタ{border-radius: 数値px;}　４つのコーナーの角をまとめて丸く指定

それぞれのコーナーを丸くする
左上だけ丸くする border-top-left-radius:数値px;
右上だけ丸くする border-top-right-radius:数値px;
右下だけ丸くする border-bottom-right-radius:数値px;
左下だけ丸くする border-bottom-left-radius:数値px;

外部リンク参考サイトさん 角を丸くする
ベンダープレフィックス

Internet ExplorerやGoogle Chrome、Safariなど、それぞれのブラウザ独自のベンダープレフィックスがあります。

主にCSS3の動作・装飾を使いたいときに必要となる。
最近はベンダープレフィックスを必要とするプロパティも少なくなってきている。

確認サイト

CSSプロパティの頭（プレフィックス）に、それぞれのブラウザを表す文字列を追記する。
必ず最後にベンダープレフィックスがつかないプロパティを書く

ブラウザごと
InternetExplor -ms-
Google Chrome,Safari -webkit-
Firefox -moz-
Opera -o-

InternetExplorはマイクロソフトの「ms」、
Firefoxは開発元のMozillaから「moz」、Operaは「o」を使っている。

ベンダープレフィックスの必要性の確認サイトへ
HTMLとCSS

HTML

HTML装飾

部分にだけスタイルを適用する場合には、htmlタグにstyle属性を指定して直接記述することができます。

外部リンク参考サイトさん　htmlでのスタイル指定 透明 opacity

opacityを使う。要素の透明度を0.0から1.0の範囲の数値で設定します。

0.0が完全な透明で、1.0に近づくごとに不透明になっていき、1.0で完全な不透明になります。

style="opacity: 数値;"

外部リンク参考サイトさん　 htmlでの透明指定 MARQUEE MARQUEEサンプル

”要素を動くようにする”。
属性を付けると速さ、上下左右方向、範囲を指定できます。複数の仕組みを使う時は、ただ並べるだけ
<marquee 属性="値">要素</marquee">

属性

direction属性で、左右上下スクロールする方向を指定。

向かう方向を、left（左）,right（右）,up（上）,down(下）で指定します。
何も指定しない場合は、leftとなります。

速度 scrolldelay="　" 数値（標準は85）
動く範囲（幅） width="　" 数値（標準は6）または%
方向 direction=" " left,right,up,down
外部リンク参考サイトさん
・すくろーるやり方 ・marqueeの属性 　・MARQUEEの組み合わせ
ＨＲタグ

線を表します、 このタグには終了タグがない　size属性、width,color属性などの属性があります。

属性 size属性線の太さを指定し <hr size="値">、
width属性線の長さを指定する<hr width="値">
color属性カラー名かRGB値　<hr color="値">
外部リンク参考サイトさん　 水平線
外部リンク参考サイト ・いろ見本 豊富なサイトさん　
・地図うめこみ　google mapの入れ方 グーグルサポートから

配置、位置設定

配置について
外部リンク参考サイトさん ・画像の配置について 　・文章のセンタリング 　テキストの配置について

spanタグ

divタグ

レイアウト、ブロック分けに使用する。サイドバーなど

divとは箱のようなもので、divタグで囲まれたブロック全体に色などスタイルを適用する。

divタグ使い方

divはCSSで幅（width）と高さ（height）の指定ができます。

文字の大きさや色、背景色などdiv要素に適用させるにはid属性やclass属性をCSSで指定して付加する
<div class="aaa"> </div>

URIリソースの場所を示す。画像やファイルのある場所、リンク先URLなど外部リンク参考サイトさん URIとは　

外部リンク参考サイトさん イベント属性一覧

MIME(マイム)　［multipurpose Internet mail extensions］　タイプ　

WEBサーバーとWEBブラウザの間はこのMIMEタイプを用いてデータの形式を指定しています。
メールやWebのデータ送受信に使用するデータ形式を識別するためのコードの体系
MIMEタイプとは「タイプ名/サブタイプ名」の形式の文字列

外部リンク参考サイト ・MIMEタイプ　　 ・MIMEタイプと拡張子

フォームタグ

HTMlフォームタグへ

PHP

キーボード

エラー表示

フォーム

HTMLで構成されたフォームからデータを送信しPHPプログラムで受信します。 送信(HTML)、受信(PHP)ファイルが必要。 　 formタグは、送信ボタンが押されたときにaction属性の指定先にフォームのデータを送ります。
GET、POSTメソッド

PHPに最初からある変数（スーパーグローバル変数）の「$_GET」、「$_POST」配列に
フォームのname属性で指定した値をキーとしてデータが入る仕組みになっています。

GET送信ボタンを押した後のURLにファイル名の後にフォームから送られたデータが付加されます。
POST送信ボタンを押した後のURLにフォームの情報が付加されません。
POSTメソッドの場合もフォームのデータは送られるのですがURLに付加はされない
HTMLファイル作成
  1. 入力フォームを作成。HTMLのform タグを使用。
    [action] にデータの送信先、[method] にデータの送信方法（POSTかGET)を指定します。
    form method="　　" action="　　"　　/form

  2. 入力欄作成
    input type="text" で一行入力欄。 textarea 、/textareaで囲むと複数行入力欄作成。
    それぞれname属性で指定したデータをPHPに送る。

  3. 送信ボタン作成
    input type="submit"

アンケートフォーム

データを受信するPHPプログラムでは、テーブルタグ使用し各項目ごとに$_POSTで、それぞれデータを受信し項目ごとにechoで出力

php　echo htmlspecialchars($_POST['　']);

nl2br関数　改行が含まれる文字列を表示させる。アンケートなど、ある程度長文になる箇所で使用
外部リンク参考サイトさん ・簡単なアンケートフォームと$_POSTと$_GET
・簡単なアンケートフォーム

ファイル入出力

ファイル入出力のページへ fopen 関数、CSVファイルなど

掲示板

掲示板の書き込み内容を保存しておくファイルが必要なので、「.txt」という空のファイルを作ってソースと同じ場所に置く。
区切りとしてhrタグを使う。

file_get_contents（ファイル名）により、今までの書き込み内容を読み込み変数化。
if ($_POST['toukou']) によって、投稿があるか確かめる。

フォームから送られてきた値をブラウザ上に表示するのでhtmlspecialcharsを使う

file_put_contents("書き込み先ファイル名", "ファイルへの書き込内容");により、新しい投稿内容を追加する。

echoまたは、printによってブラウザに表記
外部リンク参考サイトさん ・投稿板作り方 　・hrタグ(線）

日付表示

ローカルの日付/時刻を書式化。　date関数(　）

外部リンク参考サイトさん ・日付表示　 ・日付表示　プログラム

date_default_timezone_set('Asia/Tokyo');を入れて、日本時刻に調整

?php　echo date("Y年m月j日　H時i分");　
　 　 　 　 　 　 　
Y 年。４桁の数字
m 月。（2桁の数値、2桁に満たない場合は0を付ける）
d 日。（2桁の数値、2桁に満たない場合は0を付ける）
H 時（2桁の数値、2桁に満たない場合は0を付ける）
i 分（2桁の数値、2桁に満たない場合は0を付ける）

上へボタン