Hope is a Dream. Dream is a Hope.

非公開ブログは再開しました。

トップ > PHP > hikaru-sakihama.comの作業記録

hikaru-sakihama.comの作業記録

PHP Javascript WEB

hikaru-sakihama.com

アーティスト崎浜光 のWebページを作る。

作業記録

20140215

Blogページの追加

Blogページを追加するために、ナビゲーションバーのBlogリンクから、WordPressへリンクするようにする。 手順 レイアウトはver_2.0のままを利用する。 （運用ルール：wordPressでのレイアウトは、hikaru-sakihama.fififactory.comのレイアウトをそのまま利用。） Blogを入れるようの要素のみを指定しておく。

WordPressでの準備。 固定ページもいらない。ブログページのみ。それなら、hikaru-sakihama用のwpを作ったほうがよい？まずは、まずは、テストから。

tag(ver_2.0-公開用)ブランチに移動。

headerとfooterを別ファイルから読み込む

各方法は以下

  • フレームを使う
    最も簡単に特に知識も必要なく利用できる方法です。ページ内に違和感なく埋め込みたい場合は を使う手もありますが、スクロールバーが出てデザイン的に許せない、という場合も多いはず。

  • ページをincludeする

    SSIが有効なサーバーであれば、

    <!--#include virtual="side.html"-->

    とすることで、上記の場合はside.htmlというファイルが読み込まれて表示されます。

  • JavaScriptで別ファイルを読み込む

    別なファイルを読み込みます。

    <script language="JavaScript" src="side.html"></script>

    この場合、読み込むファイルにはJavaScriptのdocument.writeで記述してやる必要があります。

    document.write('<table border="0">');

    という記述になりますのでタグの知識は必須になります。 また、Javascriptを切っているユーザーを考慮し、代替の方法が必要になります。

  • スクリプト言語（Perl/CGI、PHP）を使ってページを読み込む

    ファイルの拡張子が.cgiや.phpなどになってしまう（.htmlにする方法もここにありますが）ので、嫌がられる場合も多いですが、可能です。

今回はSSIが有効なので、ページをインクルードすることにします。(強調は`で囲む)

SSIの利用

profile.html内に、以下コードを設置

    <!--#include virtual="./header.html"-->

結果：なにも読み込まれない。
対処：拡張子は「.shtml」としなければならない。

拡張しを.shtmlに変更して再度更新。

    <!--#include virtual="./header.html"-->

結果：なにも読み込まれない。
対処：以下を確認ください。

  1. SSIを利用するページの拡張子が .shtml となっているかどうか。
    状況：拡張子が.shtmlではない。profile.html
    対処：profile.html -> profile.shtmlに変更
    結果：読み込まれた。成功!!
  2. SSIで呼び出されるスクリプトに実行権限があるかどうか。 例：パーミッション属性を755 SSIで呼び出されるスクリプト内に相対パス表記がある場合、そのスクリプトからのパスを正しく設定しているかどうか。
  3. SSIで呼び出されるスクリプトに Content-type が入っているかどうか。 例：print "Content-type: text/html\n\n";

と思ったけど、検索エンジンに読み込ませる読み込ませないとの関係で 良く分からないが、今回は省略。

CSSの管理について

  • 現状
    • base.css
      #header
      #container
      #side
      #contents
      #footer
    • garallery.css
      #main
      #thumbnail
    • profile.css #main #profile

!importの指定

既存のCSSスタイルを無視して、最優先で適用される。

  • 例 #sample{ margin-left: 10px !import; }

CSSのoutlineプロパティを駆使したHTMLのデバッグとテスト

/* outlineを全要素で表示させる
-----------------------------------------------------------------------------------*/
body * { outline: 2px dotted rgba(255,0,0,1) !important; } /* red */
body * * { outline: 2px dotted rgba(0,128,0,1) !important; } /* green */
body * * * { outline: 2px dotted rgba(255,165,0,1) !important; } /* orange */
body * * * * { outline: 2px dotted rgba(0,0,255,1) !important; } /* blue */
body * * * * * { outline: 1px solid rgba(255,0,0,1) !important; } /* red */
body * * * * * * { outline: 1px solid rgba(0,128,0,1) !important; } /* green */
body * * * * * * * { outline: 1px solid rgba(255,165,0,1) !important; } /* orange */
body * * * * * * * * { outline: 1px solid rgba(0,0,255,1) !important; } /* blue */

すごい！めっちゃ見やすい！

その他

  1. ワイヤーフレームを表示させてHTML構造を確認しよう
  2. 現在非推奨となっているタグを見つけるstyle直指定、fontタグ、centerタグ
  3. 現在推奨されている、画像に対するtitleとaltを見つける
  4. tableタグに推奨されるsummary属性やthの未定義scopeを見つける リンク先の未指定を発見する

要素の非表示

ブロックレベル要素とインライン要素について

  • ブロックレベル要素
    - 文章の骨組みとなる要素 - body要素の直接の子要素として配置
  • インライン要素
    - 文章中の一部として扱われる要素 - 通常はブロックレベル要素内部で使用される
  • 置換要素
    - ・・・・・・・

displayプロパティ

  • display
    - inline
    インラインで表示（初期値）
    - block
    ブロックレベルで表示
    - list-item
    リスト項目として表示 - none
    表示しない（領域そのものを表示しない）

Visibilityプロパティ

  • visibility - visible 表示する。 - hidden 表示しない。

このプロパティで非表示（hidden）を指定した場合でも、領域そのものは確保された状態になります。 領域そのものを消したい場合は、displayプロパティで none を指定します。

要素から文字がはみ出す。

文章の自動改行は文字の切れ目で行われている。 適当なところで、「。」を入れてあげればよい。

  • CSSで対処 - そこで対処方法として自動改行の関連プロパティである word-wrap, word-break, white-space を用いて制御できる。

子要素が親要素からはみ出してしまう。「.clearfix」

clearfixを使って、フロートを解除する。

2カラムレイアウト手法

  • Fixed Layout - 親カラム：px - 右カラム：px - 左カラム：px - メリット：様々なサイズの画面からの観覧では、固定幅がデメリット。

  • Lequid Layout - 親カラム：% - 右カラム：% - 左カラム：% - メリット：極端に狭い・広い場合は逆に可読性が悪くなる。

  • Flexible Layout min-width, max-widthを使って伸縮サイズを指定。これによりLequid Layoutの可読性が悪くなるのを防ぐ。 - 親カラム：% - 右カラム：px - 左カラム：%

  • Responsive Web Design CSS3のMedia Queriesを使ってレイアウトを制御。
    最終的にはこれを使いたい。

以上より、Flexible Layoutでとりあえずやろう。と思ったけど。 良く分からない。 Lequid Layoutで以降。 MusicSceneは恐らく固定幅レイアウト

contents内はFixed Layoutとする。

  • contents width:880px
  • side width:190px
  • main width:640pxs

上下中央揃えにする方法

分からん

positionプロパティの種類

説明

  • static
  • absolute
    - 親ボックスがposition:static以外
    - 親ボックスの左上が基準位置
    - 親ボックスがposition:static
    - ウィンドウ全体の左上が基準位置
  • relative
    - position:staticの時の自分の位置が基準。
  • fixed
    - absoluteと同じ。だがウィンドウをスクロールしても固定されたまま

サンプル

  1. 親要素をposition:relativeに設定
  2. 子要素(#nav)をposition:absoluteに設定 - right:0; - bottom:0; やっとできた。