POSITIONプロパティ

A DIARY

６月になりにけり
入梅近い 花言葉は心の美しい人

クレマチス しゃしんのなまえ
2UP↑　　　　　　　　　　　　　　　　　

今日はpositionプロパティの勉強です、相対位置か絶対位置かを指定する。

 static
staticの翻訳は、ありふれた・静的なの意味、特に配置方法を指定しません。この値のときには、 top、bottom、left、rightは適用されません。これが初期値です。

 relative
relativeは、相対的の意味で相対位置への配置となります。positionプロパティでstaticを指定 した場合に表示される位置が基準位置となります。

 absolute
absoluteは、絶対的の意味で適用むずかしい、絶対位置への配置となります。親ボックスに positionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外 の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。画面をスクロールすると動かないので注意

 fixed
fixedは、一定の意味でabsoluteより解り易い、絶対位置への配置となるのはabsoluteと同じです が、スクロールしても位置が固定されたままとなります。

  表示位置関連はこちらURLをリファレンスしてくださいページおわりに相対表示と書かれたプラム色の部分です。


MDN/position

ポジション設定

　　

ポジションはHTMLファイルとCSSファイルとで設定します

「 fixed：固定した（2015年 6月）（Top）　」　「 absolute：絶対！」　「 relative：相対的表示　」　「 static：スタティック 」sticky : 粘つく、ねばねばの意

と表示された「 文字列 」の文字色と位置を指定しています

それぞれの位置に注意してみてください。2015年6月 Home はクリックでページにトップに移行するこ

position: static staticの場合の表示

position: relative relativeの場合の表示

position: absolute        absoluteの場合

position: fixed2015年6月

position: fixed     TOP

~~~~~~~~~~~~~~~~~~~~~~~
Htmlのコードをみる-
<p class="sample">position:static<span class="sample1"> staticの場合の表示</span></p>
<p class="sample">position:relative<span class="sample2"> relativeの場合の表示</span></p>
<p class="sample">position:absolute<span class="sample3">absoluteの場合はcolor: #59adc2; top: 1900px; left:150pxに設定する</span></p>
<p class="sample">position:fixed<span class="sample4"><span style="font-size:1.2em;">2015年6月</span></span></p>
<p class="sample">position: fixed<span class="sample4"><span style="font-size:1.4em;"><a href="https://canape2020.stars.ne.jp/"> ＆emsp;＆emsp;＆emsp;＆emsp;＆emsp;TOP</a></span></span></p>
~~~~~~~~~~~~~~~~~~~~~~~ 


  • CSSでのコードをみる->       class="sample"に対応文字と背景4〜１*/  
    • 

  • span.sample4 {color:#808000;  position: fixed;    top:50px;    left:80% }　      /*span class="sample4"に対応、赤文字色と定位置、相対数値で決める*/
    • 

  • span.sample3 {color: #59adc2; position: absolute; top: 1936px; left:150px } 
    • 

  • span.sample2 {color:#ff0000;  position: relative; top:0px;     left: 25% }
    • 

  • span.sample1 {color:#808000;  position: static;   top:10px;    left:10px; }　     /*white*/  */
    • 

  • p.sample1{color:#808000;}
    •
    ~~~~~~~~~~~~~~~~~~~~~~

    参照（リファレンス)するときに使うタグ (HTML ブロック引用要素)

    参照（リファレンス)に関連したタグ 「　ｑ　」「Ｑ　」「　ＢＬＯＣＫＱＵＯＴＥ　」について
    ＜ｑ＞タグは他から引用文・句 であることで ＜cite＞Cite属性には＜/cite＞ ＵＲＬを記入する
    ＜q cite="http://www.htmq.com/html5/q.shtm"＞★HTML5タグリファレンス＜/q＞こうなる、 こちらをURLを参考にしよう。

    ★HTMLタグリファレンスには引用や転載にはＢＬＯＣＫＱＵＯＴＥを指定しようするには、

    ＜ＢＬＯＣＫＱＵＯＴＥ＞で囲まれた部分が引用・転載であることを表します。 このタグは、比較的長めの文章を引用・転載する際に使用します。 改行を必要としない程度の短い文章を引用・抜粋する際には、Ｑタグを使用してください。 Internet Explorer等の一般的なブラウザでは、＜ＢＬＯＣＫＱＵＯＴＥ＞で囲まれた部分は 上下に1行分のスペースが挿入され、左右もインデント（字下げ）され、上下左右にスペースが空きます。 ただし、インデントさせることを目的に＜ＢＬＯＣＫＱＵＯＴＥ＞タグを使用するのは誤りです。 インデントが目的の場合にはできるだけスタイルシートを使用してください。 スタイルシートでは、 ＜ <div style="margin: 10px;">コロナ感染下がったがオミクロン株　南アフリカで発覚した</div> ＞などと記述します。
    こちらをURLを参考にしよう.
    ３UP↑
    さつきさつき

    好きな武士のランキングまず崇福寺福岡に眠る黒田官兵衛次に毛利元就　三本の矢の逸話、来客に接餅と酒の選択の話で有名、墓は勝榮寺ある　真田幸村は　安居神社に　そして一殺多生降魔剣、の本能寺の変　明智光秀　そして厭離穢土欣求浄土　の徳川家康だろうか。

    　

    3分で出来る料理ＰＤＦのアップロード


    ４UP↑ 白いクレマチス白いクレマチス

    3分で出来る料理

    ５UP↑
    サツキ皐月

    好きな武士のランキングまず崇福寺福岡に眠る黒田官兵衛次に毛利元就　三本の矢の逸話、来客に接餅と酒の選択の話で有名、墓は勝榮寺ある　真田幸村は　安居神社に　そして一殺多生降魔剣、の本能寺の変　明智光秀　そして厭離穢土欣求浄土　の徳川家康だろうか。

    　
    徳島蓮の紅水 熊本より

    蓮の生育を始めた。野菜は熊本からの贈り物。

    今日のお天気

    今日は雨です。

    洗濯むりでしょう。

    明日のお天気

    明日は雨です。

    まもまく梅雨かな傘をわすれずに。Mm




    ６UP↑

    PHPとは

    そもそもプログララムは、先駆者の高度な開発した新しい言語を生み続けている、それを公表し競争し続けているらしいのです。

    プログラムに色々興味がHTML言語の一面的は表示でなくPHP言語に興味を持ちました、PCでは直接見れない裏で稼働するようです。

    本を購入してみることにしました
    有隣堂で"Personal Home Page" に由来するＰＨＰの教本購入
    エディターはさくらを用い、便利なXAMMPPをインストールしWebサーバーの中のファイル・フォルダーに注意して、直接書き込むプログラム。
    文字文字化け対策、C:ディスク〜phpフォルダphp.iniファイル書き換える
    エディターのUTF8に書き換え、Apacheポート番号など書き換え　小文字aを入れ替え苦戦しました

    PHPプログラムとは何か * 条件に応じて処理を変更できる（条件判定） * 同じ処理を繰り返し行える（反復） * 『動的なWebページ』を作成することができる * 会員登録画面などの登録・更新処理を伴うWebページを作成することができる

    編集ができるレシピ集をPHPで実装しました

    ※PC.内部ローカルサーバで試すやり方と、外部サーバー（無料）サイトがようやく成功しましたPHPがどんなものか感覚で理解できました

    URLが<a href="http://localhost:8888/yasashiiphp/" >PHPでレシピ<a>と

    こちらですhttp://masumotoid.php.xdomain.jp/yasashiiphp/index.php

     こちらも! PHPについてご覧ください

    Macの像のマークMAMP起動してPHPをトライ

     

    14日午前１０時撮影、ハスの語源は花弁の散った後の花托が”蜂の巣”に似ているからしい。2千年前の種を咲かせた大賀ハスも有名，開花は四日間らしい。悟りも諸行無常。メダカはどこ？

    徳島蓮の紅水 はす はすの本

    ねじれ花花は蘭の一種でねじれ花だったかな

    ７ UP↑

    PHPのバージョンを調べる

    【コマンドプロンプト/Windows10】についてmarronブログに
    使用しているPHPのバージョンを調べるには、phpinfo();を記述したPHPファイルを用意する方法もありますが、
    ここではコマンドプロンプトを使ってバージョンを調べる方法についての記事になります。

    PHPのバージョンを調べるコマンドはphp -vです。 

    php -v

    
＜mark＞タグ使用「ハイライト表示」黄色表示する、＜mark class="mark"> tagと css-mark.mark { 背景色：rgb（255、255、153）;黄色をRGBで薄く

    コマンドを実行する時、環境変数にPathを通しておくと、基本的にパソコン上のどの場所からでも自由にコマンドを実行できますが、設定していなければコマンドを実行する場所は限定されます。

    とりあえず、初めは環境変数にPathを通していない場合のコマンドの実行方法でやってみましょう。

    「php -v」を実行する場所

    PHPのインストール先でphp -vを実行すれば、通常は問題なくPHPのバージョンが表示されます。
    XAMPPを使ってインストールした場合、デフォルトのインストール先は「C:\xampp\php」です。

    まずコマンドプロンプトを開いて（ショートカットキー：[WINDOWSキー] ＋ [Rキー]　⇒ 「ファイル名を指定して実行」ウィンドウのフォームに「cmd」と入力 ⇒ [Enterキー]または[OKボタン]を押下）、インストール先のフォルダへ移動しましょう。

    コマンドプロンプトでフォルダを移動するには、cd(チェンジディレクトリ)コマンドの後にスペースを入れて、移動したいフォルダまでのパスを入力して実行します。

    [PHPのインストール先へ移動する]

    C:¥Users¥xxxxx > cd C:\xampp\php

    コマンドが受け付けられると、コマンドプロンプトが参照しているフォルダが指定したフォルダになります。移動先のパスの表示「C:\xampp\php>」の状態で、コマンド入力の待機状態になります。

    後はPHPのバージョンを調べるコマンドphp -vを実行するだけです。

    [PHPのバージョンを調べるコマンド]

    C:¥xampp¥php > php -v

    コマンドが受け付けられると、『PHP 5.6.11…』とバージョンが表示されます。

    [PHPのバージョン表示結果]

    C:¥xampp¥php > php -v
PHP 5.6.11 (cli) (built: Jul  9 2015 20:55:40)
Copyright (c) 1997-2015 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2015 Zend Technologies

C:¥xampp¥php >
    ８>UP↑

    工事中
    この先お待ちください