六回目ーー『CSS』実践、なろうホームページ参考ーー
CSSも分割しようと思ったのですが、HTMLと違い色々試行錯誤して悩まされたので一括で書きます。
プログラムについてはすぐHTMLとCSSで投稿するのでここでは書きません。
それでは引き続き実践の報告を行います。
前書きにも書きましたが、CSSを入れると面倒なことになったので一気に書きたいと思います。
では、まず完成した画像からどうぞ。
見ていただければわかるでしょう、少々右側の偏りが激しいですが殆どに多様に出来たと思っています。
まあ、画像や文字等多くが出来上がっていないのでおかしさてんこもりで、シンプルを通り越した出来の悪い海賊版にしか見えませんね。リンク先も作っていないので本当にホームページを作ってみただけです。
忠告というか、私が一から作ったわけではありません。
なろうのホームページを参考にソースを開き順番などを真似て作ったもので、実質半分自分で考えたと思っていただければ丁度良いと思っています。
次は解説をします。
見ていただければわかりますが、ヘッダーの部分。
今まで習った限りでは『TOP～』のメニューを作るだけでした。実践ではメニューの上に『大きなロゴ』、『リンク』、『文章』があります。
まずそこで色々と躓いたのを覚えています。
前回から何度も言っている
【『HTML』ファイルに書き込むプログラムの順番】です。
まあ、此処自体に順番の変更はなかったので楽でした。
ですが、新たな問題として
【3つを並べて表示する方法】を悩むことになったのです。
頭の中では『ロゴ』を左側に、『リンク』を右上に、『文章』をその下に、と簡単に配置してレイアウトできるわけです。
ですが、コンピューターはそうもいきません。
人間には出来ない高速演算をするわけですが、命令が無ければ動かず、命令通りにしか動けないのです。近未来には思考を読み取り簡単に配置できるようになるのでしょうが、現在ではできません。
何度も言いますが
コンピューターは上から読み取るので、人間の様にこっちを読んであっちを読む、といった複雑なことは出来ないということです。できてもそのような命令を与えられていなければできません。
恐らく、言われれば当たり前じゃん、とか思うのでしょうね。
ですが、知っているのと理解できているかは別問題なのです。
私は幼い頃にやったゲームブックを思い出しました。(正式名は知りません)
攻略本の事ではなく、本で遊ぶゲーム――TRPGに近いんでしょうかね。
読者の選択によって何ページに飛ぶ、そこで何が起きるから何を選択して股ページを飛ぶ……結末は何々である、といった代物だった気がします。
すごろくにも近いんでしょうね。
話が脱線しましたが、実践してみて
『プログラミングとは実際文章で遊ぶ絵の無いゲームの様なもの』
だと思いました。
話を戻します。
以上の3つを上手く配置させるには『float』要素を使えば良いです。私自身『left』と『right』で出来ると考えていました。
ですが、甘かったんですよ。
まず『ロゴ』を左に配置する分に変更はありません。
ただ、画像に変更した理由は、文字だと大きさがいまいち把握できにくいというのがあったからです。
何が問題だったかというと、ただ『left』や『right』を使っても上手く配置されないということです。頭で出来てもPC上では上手く出来ない、そこがプログラミングの挫折する要因の一つなのでしょう。
何が原因かというと
まず表示サイズ――横幅を決めていなかったことです。
『header』の横幅＝ホーム(Web)ページの大きさで、これを決めておかないと画面全体限界まで横に広がってしまうのです。
なので、一番最初にそれら全てをグループ化している『body』のCSSに『width』を使い横幅を設定してしまうのです。
その後に『ロゴ』を左へ、『リンク』と『文章』を両方右へ『float』します。仕上げに文字のサイズや空白を作ってレイアウトしました。
他にも、ロゴを画像にしたように残り二つの『HTML』に『p』を使いクラス名を付けて個別変更出来る様にしなければなりませんでした。
この辺りの細かい部分こそが、実践しなければ学べない大きな理由です。
他の変更点
●メニューの『li』要素にそれぞれ『a』でリンクを付け加えています。
付けなければリンクにならないので忘れていました。
●『body』のCSSの下に『li(クラスではないので【.】は付けない)』のCSSを作り『・』を消すプログラムを書き加えます。
一番の変更点(追加)として
CSSの一番最初に
* {
padding: 0px;
margin: 0px;
}
これを書きこんでいます。
意味は表示画面の全体の空白を無くします、という命令で、初期状態ではいくらかの余白がデフォルトであるからです。
次は『main』に入ります。
前回のものを見ていただければわかりますが
順番は『広告→キーワード群→広告→PickUp!→右サイド→左サイド』という順番になっていました。
ですが、これでCSSを作るとそれぞれを並べて配置できず、空白も生まれて段々が幾つも出来てしまうのです。
ですから『広告→右サイド→キーワード群→広告→PickUp!→左サイド』の順にHTMLを書き換えました。
これが大きな悲報であり、私の中で順番が大切なのだと決定づける物事でした。
また、右サイドのそれぞれの枠は同じなので、同じ変更が統一で出来る様に同じクラス名を付け、多くの枠の名称も同じ変更が出来る様にしました(人気キーワードから探すやサイト概要のこと)。
他
●検索のフォーム変更
『input』を使うまではよかったですがクラス名を付けなければならず、付けてもCSSでどのように書けばいいのか悩みました。
●空白の計算にも頭を使い、時間がかかった要因の一つです。
ここまで来れば後は中央でも右サイドでも同じように変更して書き加えるだけでした。
空白の計算を行い、クラスごとにCSSを考える。
言葉にすれば簡単で、何をしたらいいと分かれば真似て書けばいいだけでしたね。
ただ、未だに変な空白が出来ていたり(レビューの日時の空白)、右サイドの上に大きな空白が出来たりです。その辺りが何故かも原因が分からず悩ませる部分です。
プロならもっとコンパクトに出来ると言えるのでしょう。
私も作った後にこうやったら纏められるのでは？ 等と思う箇所があります。弄らないのは力を使い果たしたと言いますか、変に弄って戻せなくなったら大変なので……言い訳ですが、私の中では完成なのです。
満足はしていませんがね。
他にもいろいろな部分に納得いかないところがあります。
未だに『padding』と『margin』の使い分けが難しく思いますし、『border』に関しても此処に引いたらいいんだよね、と感覚でやっていました。
結論を言いますと
『クラスでごちゃごちゃしているが、見返すと使っているプログラムは少ない』
ということです。
『p』 『a』 『h』 『div』 『li』 『span』 『input』 『img』
HTMLにはこれぐらいしか使っていません。
『font-size』 『width』 『height』 『float』 『margin』 『padding』 『borader』 『color』
CSSもこれだけで出来ているんです。
書いていないプログラムもありますが、そんなのはクラス名だったり、URLだったり、上下左右を決めるだけなんです。
ですから、一度実践してしまえば一から作るのは難しくとも想像より難しくないと思えるのです。
まあ、現段階では表示だけでレイアウトも何もない配置しただけなのですが。
それでもまっさらな状態からここまで出来たというのは感動があり、達成感があり、高揚感、歓喜、苦労、疲労、それから言い表せないクリエイターとしての一歩を感じました。
これだけあればもっとうまくレイアウトできるという人が多数なのでしょうが、私もそう言えるまで諦めず、最終目標のフリーソフト販売までこじつけるよう日々精進し続けます。
今感じている疲労も苦労も苦痛も、今まで感じていたものとは違う良い意味での体感だと思って味わっています。
それでは、これで一回目の実践を終えます。
次はRPGツクールを使ったマップや簡単なイベントを作り、ゲームを作るとはなんなのか知りたいと思います。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
