ホームページを無料で初めて作る! -6時間目:やっぱり、動いてみないとわからないことってあるよねって思ったこと-

本日、2度めのHP作成更新。

目標時間、30分で書く!

 

スポンサーリンク

やってみてわかったこと

考えているだけで、わからないこと。

動いてみないと、わからないこと。

今回HP作成で感じました。

 

昨日は、

「どうしよう~、あれも、これも、どれも、それも…」

とか、アホみたいに考えて、不安になってたのね。

 

 

しかし、実際に動いてみると、

意外とうまく行けたりするんだ、これが。

 

ってか、当たり前だけど、

考えているだけじゃ進めない、動かなきゃ進めないからね?

って、自分にツッコんでいたw

 

 

 

失敗が怖いわたし

とにかく、

デキることを、1つずつこなしていくのが大事。

 

あれもこれもと、やることがいっぱいになって怖くなったんだよね。

デキないかもしれない…。って不安が勝手に爆発した。

 

6時間目は、

ハムスターヒストリーのページに取り掛かりました。

まぁ、今まで飼ってきたハムスターの紹介みたいな感じですね。

 

これもまた、すげぇ悩んでいたんですよ。

 

「一覧にしようかな?けど、横に並べるタグってどうするんだ?

自分には無理だよ…、また調べる地獄に陥るよ…。」

 

勝手に妄想して、勝手に諦める。

 

これ、いつもの私のパターンだよなぁww

 

やってみなくちゃ、わかんないじゃん?

 

ってか、すごく思うんだけど、

絶対に失敗してはいけない

って考えなんですよね、私は。

 

失敗した!もう人生終わりだ!

ぐらいまで、行きますからねぇwww

 

ってか、

私は失敗しない人間なのだ!

ってところもあるんじゃないかな?

認めたくないけどなぁwww

 

何回も失敗しようよ。

失敗して、やっと前にすすめるんだよ。

 

私はこれが意味がわからなかった。

 

失敗したら痛いじゃないか!

しか見れないんですよね。

 

まぁ、こんな書き方してますが、

まだまだその考えだからね?w

 

けど、

失敗して、先に進むのも悪くない。失敗しよう!

とはちょっと思えるようになったかもしれない。

 

とりあえずやってみた

もう、このままじゃ進まないので、とにかく行動してみました。

リアルタイムでの状況を書いてみる。

 

あ~何からすれば…。何がわからないのかわからない。

 

…う~ん、まずは、画像をはめ込んでみようかなぁ…。

あれ?サイズの縦幅が同じなのに、なんか画像ぼやけている…?

あっ、HTMLにサイズの指定がある!これを私の画像サイズに直せば…

 

いやぁったぁ~~!!キレイにはめられた~~!!

 

テキストとか入力したら、ちゃんと枠に入ってくれるんだろうか…?

あっ、入れてみたら意外と普通に入った!

けど2段にしたのに、1段になっている…。

 

あっ、そうだ、<P>タグでマークアップすれば…

おお!ちゃんと2段になった!

名前のところは、太文字とか大きくしたいな。

<h2>タグとか使えば良いのかな?

 

…無反応…なぜ?

 

えっ、じゃあ<h1>とか…?

 

……だめだ、まったくわからん!

これは後回しにして、先に進んでみよう。

 

紹介文を書き込むけど、ちゃんとキレイに段になってくれるのかなぁ…?

右側の画像に文字が入り込んだりしたら嫌だなぁ…。

 

おっ、おお!?

ちゃんとキレイに改行してくれている!え~嬉しい!

あっ、<br>を入れたら、キレイになるかな?

 

…けど確か前に、

<br>はSEO的に良くないとか聞いたけど…?

 

ええい!今はとにかくやってみよう!

あっ!いい感じじゃないか!!

 

下のスペースが変に空いているなぁ。

そういえば、&nbsp;は良いって書いてたような?

 

おお~!キレイにスペースがデキてんじゃん!

 

表とかもいじってみるか…。

これを自己紹介の枠にするの良いかもなぁ…。

 

あっ、WordPressで表いじったこと有るから、わかる!

 

…ん~、けどダサくね?

 

まぁ、あとで色とか変えればいっか。

それよりも、なんかテキストが短いので枠が狭いんだよなぁ…。

 

横にした方が、きれいになるかも?

タグもわかるし、いじって…。

 

いいじゃん!

けど、もういっそのこと1列でいいかも。

 

ああ~けど、これってスマホじゃどう見えるんだ?

前せっかくうまく言ったと思ったヘッダーが潰されてたしさぁ…。

スマホで確認するの面倒だよ?

 

あっ、なんか変なことしてしまった…

んんっ?これってもしかして、スマホのスペース幅では!?

 

そうか、確かこの無料テンプレはレスポンシブデザインだ!

だから窓枠を狭めると、スマホと同じ方法になるんだ!

 

あっ、めっちゃいい感じじゃないか!?

これでスマホでも大丈夫なデザインになっているな♪

 

 

とまぁ、こんな感じで、

いい感じに進んだのですよ!

 

改めて文章で書き出してみると、

すげぇ自分との戦いしているなぁww

めっちゃ足引っぱてんじゃん、もうひとりのボクよぅw

 

まぁ、こんなこと言ったらまたいじけるんで、ほどほどに。

見方を変えれば、問題点を発見してくれているのだから。

 

他に勉強したこと

あとは、

  1. 画像の枠を消すタグ
  2. メニューバーをハムのリンクにする
  3. サイドバーは<aside>でくくっていた
  4. <article>で一つ一つの枠を作っている
  5. サイドバーの余分を消す
  6. メインコンテンツに、<article>で枠を追加

などなど、色々勉強できましたね。

 

あっ、そういえば職業訓練で習った!

ってことが多々ありました。

<article>とか<aside>とかね。無駄じゃなかったんだな。

 

わかったら、すごく嬉しいんですよね!

前に進んでいるって感じがするから。

 

 

他のサイトを参考にする

あとね、ハム一覧どうしようかな?

と悩みながら進んでいたのですが…。

 

これってよく考えたら、キャラ紹介なんですよ。

FF15とか、うたわれるもののサイトを見ていたのですが、

これを真似すれば良いんじゃないか?って思って。

 

とくに、うたわれるもの。

これって、縦に全キャラを載せているんですよね。

 

正直、「各ハムたちをいちいちクリックするの面倒じゃないか?」

って思っていたのですよね。

なので、これは真似させてもらおうかと。

 

でも、タグがまだよくわかってないんですよねぇw

また調べないとなぁ~。

 

でも、縦に並べても、

「他のキャラを選ぶ時、いちいち元に戻らなくちゃいけないのでは?」

とか思ったんだよね。

 

そこも、うたわれるもののサイトを見てね。

半透明で、一番上にキャラの一覧を押せる仕組みになってんですよ。

すげぇって思った。さすがプロだなと。

 

けど私にはそんなの無理wなので、

よくある「トップに戻る」とか各ハムの下に作っても良いかも?とか考えました。

まだアイディア段階なので、またやってみたら色々出てくるかもしれませんが。

 

または、右下によくある「トップに戻るボタン」を設置するとかね。

やり方は色々有るんですよね!

 

ダメだったら、また次に行けば良いんです。

やってみたから、行動してみたから、わかったんだよね。

まずはそこを褒めたい。

 

そして、やっぱりプロのサイトはすごいなと。配慮がデキている。

つまったら、他のサイトを見ることもオススメしよう。

 

おわりに

今回も、色々学べました。

やってみないと、アイディアもわかないですよね。

 

ってか、絶対に詰まるんですよ、予想外のことが起こって。

 

昨日見たアフィリのサイトでも書いていたけど、

 

100冊レシピを読んで、1回作る

ではなく、

1冊読んで、100回作ってみる

 

これが大事なんだろうなって。

上手に書いているなって思った。

 

 

あと、ここまでHPが進んだら、嬉しいのですよね。

もうニヤニヤして、ずっと見ていましたからw

 

まぁ、まだ不安はでかいんですけどね。

けどね、もっとやりたい!って気持ちが出たのは確かなんですよね。

この気持って大事だと思うんだよね。

 

また明日も頑張ろう!

 

 

▼HP作成記録▼

HP作成まとめ前半

HP作成まとめ後編

 

 

 

そしてこの記事は、50分かかりました。20分オーバーw

けど、大事なことなので良いとも思うんだよね。

 

無気力で居場所が無くて毎日つらいあなたへ

生きづらくて、人生詰みかけて辛かった私が…
自分を好きになり、かつ残酷な世界で戦える方法を伝えています。

HP作成記録
スポンサーリンク
引きこもりながらお仕事しませんか?

コミュ障のせいで、人間関係も上手くいかず、働くのが辛い!苦しい!
この先、ずっとコミュ障に悩まされないといけないの!?将来が不安だ!!
「コミュ障なんかじゃなかったら…!!」
と考えたことはないでしょうか?

実はそのコミュ障、ネットのお仕事では大きな武器になるんです!
新しいあなたらしい働き方、見つけてみませんか?

コミュ障でもいいのです。
トップへ戻る