C.K PRIVATE WEB系,

WEB・PIC

C.K PRIVATE WEB系

C.K PRIVATE /  2010年・WEB関係のページです
WEB系のHTMLやCSSやドリームウイバーの基礎などをUPしています

2010/12/19  1行のプログラム

C言語もそうですが、テキストエディターなどに書いて、拡張子を.phpで
保存すれば、サーバーの設定が出来ていれば動くと思います

<?php echo "Hello,World!" ?>
これはもっとも簡単なPGですが画面に「Hello,World」と表示します
<?php と?>がPHPのプログラムの範囲を示すタグです
echo Hello,World!は画面に文字を表示する命令です

2010/12/12  成功と失敗

PHPのプログラムを覚えていく上で基礎となる成功、失敗、認証失敗のコード?です
応答コード
200 成功
404 失敗
401 認証失敗

2010/12/3  PHP HTTPのメソッド

HTTPのメソッド
メソッド 動作
GET 指定されたURLに対応するリソースを返す
POST データを投稿する
HEAD GETと似ていますが、ヘッダのみの返し、データ部分は返さない
PUT サーバーにデータを保存する
DELETE 指定されたURLに対応するリソースの削除をする


メソッド  操作対象   バージョン
GET  /test/index.html   HTTP/1.1

2010/11/28  アクション

<a>に続くイベントビヘイビアの対象に擬似してビヘイビアが指定できる場合、擬似リンクを
使って指定するイベントは<a>に続けて表示されます、この擬似リンクを削除すると同時に
削除されます

アクション
アクションビヘイビアの動きです、ビヘイビアの対象によって指定できるアクションが
異なります、アクションがメニューから選べないときは、ビヘイビアの対象をチェック
してみてください

APエレメントをドラッグ APエレメントをドラッグできるようにします
JavaScliptの呼び出し イベントに対して実行されるJavaScriptの関数を書き換えます
URLに移動 指定したURLのページへの表示を切り替えます
非推奨ーShovkwaveまたはSWFの制御 ShockwaveやFlashの再生や停止の制御を行います
非推奨ーサウンドの再生 選択した音声ファイルを再生します
非推奨ータイムラインータイムラインの停止 タイムラインの動きを停止します
非推奨ータイムラインータイムラインの再生 タイムラインを再生します
非推奨ーライムラインータイムラインフレームに移動 タイムラインの特定のフレームに移動します
非推奨ーチェックブラウザ ページを表示しているブラウザとそのバージョンによって表次ページを切り替えます
非推奨ーポップアップメニューの非表示 ポップアップメニュを非表示にします
非推奨ーポップアップメニューの表示 ポップアップメニューを表示します
イメージのプリロード あとから表示するための画像を前もって読み込ませます
エレメントの表示ー非表示 id属性を指定してある要素の表示/非表示を指定します
ジャンプメニュー メニューリストをジャンプメニューにします
ジャンプメニュー移動 指定したメニューリストで選んだページへ移動します
スワップイメージ 画像を別の画像に切り替えます、画像の復元も同時に指定できます
スワップイメージの復元 スワップイメージで切り替えた画像を元に戻します
テキストの設定ーコンテナテキストを設定 APエレメント内のテキストを指定したテキスト(タグやJavaScriptも含む)に置き換えます
テキストの設定ーステータスバーテキストを設定 ブラウザのステータスバーに指定したテキストを表示します
テキストの設定ーテキストフィールドのテキストを設定 フォームのテキストフィールド内のテキストを指定したテキスト(JavaScriptも含む)に置き換えます
テキストの設定ーフレームのテキストを設定 フレーム内のテキストを指定したテキスト(タグやJavaScriptも含む)に置き換えます
ナビゲーションバーイメージの設定 画像をナビゲーションバーイメージに設定します
フォームノバリデート 入力フォーム内の文字が条件を満たしているかを検査します
ブラウザウィンドウを開く 指定したページを別のウィンドウで開きます
プラグインのチェック ブラウザに組み込まれているプラグインをチェックし、指定したURLに切り替えます
プロパティの変更 id属性を指定してある要素のプロパティを変更します
ポップアップメッセージ 指定したメッセージの画面を表示します
効果ーシェーク 要素を左右に揺らします
効果ースキッシュ 要素を縮めて消します
効果ースライド 要素をスライドアップ/スライドダウンします
効果ーハイライト 要素の背景色を変化させます
効果ーブラインド 要素をブラインドアップ/ブラインドダウンします
効果ー拡張/縮小 要素を拡張/縮小します
効果ー表示/フェード 要素をフェードして表示します

2010/11/22  ビヘイビア イベント

ビヘイビアパネルで指定できる、イベントとアクションについて表にまとめました
ビヘイビアの対象や、対象としているブラウザによって選べるイベントやアクションがことなります

イベント
イベントはビヘイビアを動かすきっかけです、ビヘイビアの対象や、対象としている
ブラウザによって選べるイベントやアクションが異なります

onBlur フィールドの中にあるマウスカーソルが、フィールドの外を出たとき
onClick クリックしたとき
onDbClick ダブルクリックしたとき
onError イメージの読み込みに失敗してエラーになったとき
onFocus フィールドの中をクリックしたとき
onKeyDown どれかキーボードのキーを押したとき
onKeyPress どれかキーボードのキーを押し続けているとき
onKeyUP 押していたキーを離したとき
onLoad ページの表示を完了したとき
onMouseDown マウスボタンが押されたとき
onMouseMove ビヘイビアの対象の上でマウスカーソルを動かしたとき
onMouseOut マウスカーソルがビヘイビアの対象から離れたとき
onMouseOver ビヘイビアの対象にマウスカーソルが乗ったとき
onMouseUP 押したいたマウスボタンが離れたとき

2010/11/14  [代替テキスト]

ALT [代替テキスト]には、画像の説明となる文字を入力します、
インターネットからイメージをダウンロードしているときは、
イメージが配置される場所に、この文字が表示されます、ダウンロード後は、
イメージにカーソルを乗せると代替の文字は表示されます(IE)のみ
また、文字だけを表示するブラウザでは、イメージの代わりに、この文字が表示
されます
HTML4,0やXHTMLでは、代替テキストの入力は必須になっています

2010/11/7  「拡張」カテゴリの詳細

CSSスタイルパネルのカテゴリビューの拡張と同じです

改ページ
Webページで印刷するときに指定した位置で改ページを行います
Page-break-before
Page-break-after

Cusor
要素の上に重なったカーソルの形状を指定します

Filter
イメージや文字に視聴効果のフィルタを指定します

2010/10/30  位置カテゴリ詳細

要素を表示する位置や表示サイズなどを指定します

Position
要素の表示位置をを指定する方法を指定します
ここで値を指定した場合は「Placement」で表示する
座標を指定します

Width
要素の幅を指定します
ボックスカテゴリの「Width」と同じです

Height
要素の高さを指定します
ボックスカテゴリの「height」と同じです

Visibility
要素の表示、非表示を指定します、非表示の場合、ブロックカテゴリの
「Display」で「None」を指定した時とは違い、非表示の部分が空白として
残ります
ライブビューをオンにすると表示を確認できます

Z-index
PositionとPlecementで位置を指定したときなど、要素が重なって表示されるときの
重なり順を指定します値が大きいほど上に重ねられます

Overflow
幅と高さが指定されたブロック要素の内容が、指定した大きさに収まりきらないときの
表示方法を指定します、ドリームウイバーでライブビューがオフの場合は
スクロールバーは表示されませんが、縦横の大きさは指定した値で表示されます
この場合、ダブルクリックすると非表示の部分も全て表示されボックスの中が
編集可能になります「F5」キーを押すと、再び指定した大きさに戻ります

Placement
「Position」で表示方法を指定した場合に有効です、上下左右それぞれの端
からの位置を指定できますが、通常は上下のどちらか、左右のどちらかを指定します

Clip
簿ロック要素やイメージをトリミングして表示する範囲を上下左右の端からの
位置で指定します、ブラウザによっては無効になります


2010/10/23  「リスト」カテゴリの詳細

リスト要素または表示で「リスト項目」を指定した部分のスタイルを指定します

List-style-type
項目の先頭に付く記号を指定します「None」を指定すると、
記号が表示されなくなります、リスト全体の記号が、リストの各項目
を指定する要素(li)に指定した場合は選択した記号に変わります

List-style-imege
項目の先頭に付く記号をイメージで指定します、リスト全体を指定する要素
(ul又はol)に指定した場合はリスト全体の記号が、リストの各項目
を指定する要素(li)に指定した場合は選択した項目の記号が変わります

List-style-position
リスト項目のボックスに対して、リストの記号を内側に表示するか、
外側に表示するかを指定します、リスト全体を指定する要素、(ulまたはol)
に指定した場合はリスト全体の記号の位置が、リストの各項目を指定する要素(li)
に指定した場合は選択した項目の記号の位置が変わります

2010/10/16  ボーダーカテゴリ詳細

要素の周りに表示する枠線を指定します

Border-style
ボーダー線の種類を指定します、上下左右別のスタイルを指定することも
出来ます

Border-Width
ボーダーの線の幅を指定します、上下左右別の幅を指定することも出来ます
数値指定以外の幅はブラウザによって表示が異なります

Border-color
ボーダーの線の色を指定します、上下左右の別の色を指定することも出来ます
特に指定しない場合、黒で表示されます



2010/10/9  ボックスカテゴリ詳細

ブロックレベル要素および表示プロパティをブロックにした要素、
イメージやテーブルの幅、高さ、余白などを指定します

Width
要素の幅を指定します、ブロックレベル要素やImg要素などで有効です

Height
要素の高さを指定します、ただし、指定した高さで要素内の内容が
収まりきらない場合は、Overflowプロパティで表示方法を指定します
ブロックレベル要素やImg要素などで有効です

Float
要素の隣に複数行の文字列を配置するときに利用します
イメージやテーブル以外に指定する場合は、幅も同時に指定します

Clear
フロートを解除する時に利用します、左、右または両方のフロートを
解除することが出来ます

Padding
要素からボーダーまでの余白を指定します「すべて同一」のチェックを
外して上下左右に別の値を指定することも出来ます

Margin
ボーダーの外側から親要素までの余白を指定します、「すべて同一」の
チェックを外して上下左右に別の値を指定することも出来ます



2010/10/2  ブロックカテゴリの詳細

ブロック内の要素に関するスタイルを指定します

Word-spacing
欧文の単語の間隔を指定します「ライブビュー」をオンにすると表示が確認
できます

Latter-spacing
文字の間隔を指定します、文字数の違う言葉を複数並べる場合、両端を
そろえるときなどに利用します

Vertical-aligh
隣り会う文字列との縦位置を指定します、ドリームウイバーでは
「ライブビュー」をオンにすると表示を確認できます

Text-Align
文字やイメージ、テーブルのブロック内での行揃えの位置を指定します

Text-indent
1行目の先頭を字下げする大きさを指定します

White-spase
複数の半角スペースを表示に反映させるか、また指定された幅に
文字が収まらなくても折り返さないかどうかを指定します
「ライブビュー」をオンにすると表示を確認できます

Display
セレクタの要素の表示方法を指定します、たとえば、「None」にして表示を
消したり、「Block」にしてリンクをブロックレベル要素のように表示できます



2010/9/25  セレクタの背景に関するスタイルを指定します

Background-color
セレクタに部分の背景色を指定します
ブロック幅と高さ及びPaddingの範囲いっぱいに背景色が表示されます

Background-image
セレクタ部分の背景イメージを指定します、セレクタによっては
ブロック幅と高さ及びPaddingの範囲いっぱおに背景イメージが表示されます
下にある項目で繰り返しの方向や表示位置などを指定できます

Background-repeat
Background-imageを指定しているときに有効です
背景イメージを敷き詰めて表示する方向を指定します

Background-attachment
Background-imageで指定しているときに有効です、ウィンドウをスクロール
したときに、背景イメージも同時にスクロールするかどうかを指定します

Background-position(x)
Background-imageを指定し、Background-repeatが「Repeat」以外の時に
有効です、背景イメージの垂直位置を指定します
数値で絶対位置の指定をすることも出来ます



2010/9/4  段落と改行の違い=<p>と</br>の違い

 

段落を指定すると、HTMLコードでは文章のブロックになり<p>タグが指定されます
ブラウザで表示すると、段落の文章は直前の文章との間が約1行分空きます
改行を指定すると、HTMLコードでは、指定した位置に<br>または<br/>タグが
挿入されます、段落とは違い、ブラウザで表示しても、改行前と改行後では間が
空きません


2010/8/28  相対パスと絶対パスについて

 

サイト内にあるファイルへのリンクは、ファイルまでのパスを示す相対パスで記述
されます、相対パスは、リンク元のファイルを基準として、下のフォルダには
/(スラッシュ)で区切ってフォルダ名を記述します、上のフォルダには
[../]でフォルダ名を指定します、一方、ファイルのURLをサーバー名から
全て記述する方法が絶対パスです、サイト外にあるページやファイルへの
リンクをする場合に使用します、
「http://www.XXXXXXXX/co.jp/2010.html」のように絶対パスで記述します


2010/8/21  JPEG GIF

 

JPEG GIF
WEBページでは主にJPEG形式とGIF形式の画像ファイルが利用されています、
それぞれに適切な利用方法があります

JPEG形式
写真や微細な色使いをしているイラストなどに向いている形式です、フルカラー
でファイルを保存できますが、保存するときのファイルの圧縮で、色がにじんだり
輪郭がぼやけたりすることがあります

GIF形式
ベタ塗りのイラストやロゴなどに向いている形式です、利用する色は256色
までですが、そのうちの1色を透明化できます、又、複数のイメージ表示を
順に切り替えるアニメーションGIFもあります


2010/8/7  拡張子

 

HTMLファイルや画像、Flashなどのファイル名に日本語名は指定できません
必ず半角英数字を使用します、又、拡張子も必要です

半角の英数字でも、次の文字は使用できないので注意してください
/(スラッシュ) ¥(円マーク) :(コロン) *(アスタリスク)
&、<、>複数のピリオド、先頭のー(ハイフン)


2010/7/31  見出し

 


SEOでよく使われるのがH1やH2などの見出しというものです
これは新聞などで例えると分かりやすく、一番目立たせたい部分を
見出し1=H1です、
次に見出し2=H2
 :
 :
 :
見出し6=H6までがあります、これをうまく使ってSEO対策につなげていくと
いいと思います


2010/7/24  タグの基本書式

 

HTML要素は通常、開始タグと終了タグで囲まれています
たとえば、段落の開始位置には<p>が、終了位置には</p>が指定されます
一方、画像を指定する<img/>タグや、改行を指定する<br/>など、
終了タグがないHTML要素もあります
HTMLの規則をより厳密に適用するXHTMLでは、これらの要素の>の直前に/を入れる
ようになっています、又タグにはさまざまな属性とその値を指定することが出来ます

タグの基本書式
<div>  class="main"> コンテンツ </div>
要素名 属性名 値   内容   終了タグ
(  開始タグ   )

開始タグだけの場合
<img  src =  "title.jpg" />
要素名 属性名  値
(     開始タグ    )


2010/7/10   ショートカットキー

 

WEB系の作業をやるときはホントウインドーズのショートカットキーを覚えておくと
作業がだいぶ楽になります、特にコピーなど良かったら下記を見てみてください
最低限ここに書いてあるものは一回は使ってみたほうが良いですよぉ☆

ウインドーズ
F2 ファイルの名前の変更
F7 全部カタカナ変換
F8 全て半角にする

CTRL+S 保存
CTRL+C コピー
CTRL+V ペースト
CTRL+X 切り取り 
CTRL+P プリント
CTRL+F 検索
CTRL+Z 一文字戻る

CTRL+Alt+Delete タスクマネージャー
ウインドーズ+E  エクスプローラ
CTRL+Aはその中のファイルを全て選択
SHIFT+クリックは選択

文章書いている最中変換を全てカタカナにする場合
F7で全てカナ変換
ネットだと
F5 更新
Alt+←矢印   戻る
Alt+→矢印 進む

フォトショップ場合は下記
CTRL+T 自由変形ツール
CTRL+M トーンカーブ(明るさ)
CTRL+ 拡大
CTRL- 縮小


2010/6/5   HTMLファイルの構造

 

HTMLファイルの構造
HTMLファイルは大きく分けてヘッダとボディーの2つの部分で構成されています
「あくまで大きく分けてですので、他にもフッダ、サブメニューなど色々あります」

ヘッダ(<head>~</head>)には、ファイルの種類や文字コード、ページタイトルなど
ページの中に直接表示されないものを指定したりします

ボディー(<body>~</body>)には、文字や画像など、ページの中に表示する
要素を指定します

<html>
       <head>
           ヘッダ
       </head>

        <body>
           ボディ
       </body>
</html>


2010/2/6   テーブルとコールスパン

コールスパンとは、テーブルのマスをあらわします
例えば横に4列並んでいる場合でそこにGIFなどのスペーサーを入れる場合は
<td colspan="4">と入れないと、他の部分が崩れたりします

 

こういうのって結構面倒だけど大切なので覚えておくとべんりっすよ

 

例・下を読んでみると
横に四マスのテーブルで
<td colspan="4">

<tr>← テーブルの1段をあらわします

↓横列3個分を使ってイメージを配置
<td colspan="3">

↓見出し3と宣言
<h3>

マウスを画像に当てると矢印が変わり、クリックするとsaleページに飛ぶ
<a href="sale.html" ><img src="images/2linkimg.jpg"

オルトは画像などに代替を意味します
alt="C.K FACTORY キャンペーン"

ワイズは横、ヘイトは縦の数値です
width="584" height="147" />

そして上で宣言した全ての物を閉じます
</a></h3></td>
</tr>


2010/1/23   始めまして

WEB系は初の更新になります、ここではWEBに関しての事を記載します、主にはHTMLやCSSなどのホームページに

関しての事になります、おそらくこれからWEBを始めるような人には良いかもですが、今WEBをしている人などには

かなり物足りない内容だと思いますのでよろしくお願いいたします

 

さて今回は初ですので一番基礎の所から、ホームページを作るうえでホームページビルダーなどソフトで

作る人にはあまり関係が無いかもしれませんが、そんなホームページビルダーでも、更新や作っているときに

ホームページのデザインや、文字などが崩れる事があると思います、そんな時はソースで見ると分かる事が

多々あると思います、(僕も前はホームページビルダーを使用していましたから(汗)

 

例えば↓ディブで始まるものは/ディブで必ず閉じます、この閉じるのがなくなってしまうと崩れたります

<div> </div>

これはディブに限らず「liリスト」や「aアクション」その他も同じになります、ですので崩れる時にはその辺を見てみましょう

<li></li>       <a></a>

 

正直僕なんかはディブの数を間違えて崩れさせてしまう事がありますです(汗

 

原因が分からないときでも、地道にソースコードの始まりと閉じる部分の数を数えてみましょう☆