木燃人の波止場

花やお寺や観光地の写真を紹介しつつ、皆さんとの交流を計りたく思ってます、気軽に見て戴き、コメントを戴ければ嬉しいです。

コーディング-2 (No 1918)

2018-12-24 08:00:00 | パソコン

    インデックスページ(ホームページ表紙)の作成

 

  Webサイト(ホームページ)を少しでも見栄えをよくしたいと、予てから考えて居た所、「HTML&CSSとWebデザインが一冊できちんと身につく本」に出合い、さっそく試そうと始めたが、最初の段階で躓いた。(詳細は当ブログ前々回を参照)

 この本では「Brackets」というちょっと高級(?)なエディータを使うように書いてあり、それなら是非使いたいのでやって見たが、私の頭脳では到底物にならず、この本の出版元に問い合わせたら、私では難しく到底使えないことが判明した。

 そこで「Brackets」を止めて、 「Crescent Eve」というエディータにした。 これはHTMLのタグを一文字入力すれば、その候補が現れて、その中から撰べばよいし、コーディングする画面の隣に即時に結果がディスプレーされるし、文法のチェックもしてくれるので、大変便利なのだ。

 しかし、その結果を見ると下の図のように正しく表示されないのである。 異常な所は、① 指定もしないのに、Logoが線で囲まれる。 ② その右のMenuが右端に寄らない。 ③ コピーライトが中央に来ないし、文字の色が指定通りになたない・・・などである。 

  

 この状態は、出版社に質問した直後であり、すぐには再質問は出来ないと思い、あらゆる事をやって見た。 しかしまだ出来ないから、遂に本は買ったものの、使い物にならないと、結論付けようかと思ったが、最後の最後に便利な「Crescent Eve」を使わない選択肢に気が付いた。

  そして、やって見たのが下記である。あれだけ苦労して、色々やっても出来なかったことが、瞬時に出来てしまったのである。このアプリは長時間使うと、止ってしまい全く動かなくなる習性(?)があるので、要注意と思って居たが、特定のタグにも対応してないのだ。

  このアプリは、最近インストールしたものであるから、まさか、対応しないタグがあるとは夢にも思わなかったのであった。 そのために、かなり面倒ではあるが、古くから使って居る「TeraPad 」というエディータにして、本に書かれているとおりに学習を再開した。

 

 かなり手間はかかるが、当然のことではあるが、一字一句正しくタグを入力し、その都度ディスプレーに標示させたが、極めてスムースに、教材のサンプル画像(インデックス画面=表紙画面)が完成した。 それが下記である。(実物は横幅960px)

 

  これにて、購入した本の、P149/300まで完了した(「Brackets」活用部分を除く)

 

  それで、早速我がWebサイトの表紙を作ってみた。 取り敢えずは、殆ど真似をした状態であるが、ほんの少しは”垢抜けした!”と自画自賛中であるが、皆さんは如何であろうか?。 ロゴの「木燃人」の背景を取りたいが、未だ出来ないでいる。 背景画像は1260pxに縮小したものを使用。

 

 気分を変えるためには、背景画像を変えるのがひとつの案、それはCSSファイルから。 ついでに「詳細な目次」へのボタンの色も、地味な色であるが、周りの色と協調を取ってみた。

    

 Life is beautiful の言葉に惚れて、使わせて頂いたが、著作権上は如何なものであろうか、また、英語を知らないものが、Snap!Snap! を単に Hobby!Hobby! と変えたが、文法上は正しいのかどうかなど、ご教示賜りたいのである。 それに色合いとしては、私は落ち着きがあり前者の方を好むが・・・?。

 

 

 

コメント