ちょっと休憩

休憩時間の暇つぶしに。IT、日常生活での出来事、ホームページ制作を素人目線から。

ホームページ制作練習(画像に文字を載せる方法)

みなさんどうも。

たけるです。

今日のお題は…
僕がホームページを作っている際に生じた疑問点について、
解決法を書いていく。というお題です。
勉強している方々の参考になれば幸いです。

さて、
以下の画像をご覧ください。

カップルの画像だ。
くー、幸せを満喫しやがって悔しい!

というのは置いといて解説したいと思います。

話に戻りますが、
今回は画像に青い文字を重ねたいと思います。
これがHTMLとCSSです。それと先ほどの画像と。

See the Pen kaisetu2 by takeru77 (@takeru77) on CodePen.

bodyタグの直下にmainクラス。そしてそのCSSには
position: relative;で基準とする場所を決めました。
mainクラスのさらに直下のh1タグにはposition:absolute;
を設定し、動かす要素を決定しました。

今のコードでは青い文字が画像の上に乗っからず、
下の方にずれているのが分かると思います。
ここで私は思いました。

CSSの.main h1 { でposition: absolute;を指定しているのに
なんで上に乗っからないのだろう?
relativeは.mainに設定してあるはずなのに…」

このように親要素.mainクラスにrelativeが指定されていて、
かつ子要素.main h1 { にabsoluteが指定されていても、
その子要素の上にもう一つ同階層の子要素があると(
HTMLファイルのmainクラスの中のimg要素のこと)
青い文字は画像にうまく乗っかりません。

←←←(特に意味はありません)

こういう場合にはabsoluteが指定されているCSS
(今回で言えば.main h1 {   )
の場所にtop:を指定すると変わります。

試しにtop:0;を指定してみましょう。こうなります。

See the Pen kaisetu3 by takeru77 (@takeru77) on CodePen.

うまくいきましたね。

後はそのtop:0;をtop:50px;とかtop:20%;とか指定して
高さをつけるだけです。

See the Pen kaisetu4 by takeru77 (@takeru77) on CodePen.

僕はtop:70%;くらいにしました。

 

 

と、ここまで散々書きましたが…
青い文字を画面に載せる方法ではもう少し簡単な方法が
あることに気づきました。

←←←(特に意味はありません)のところです。

それはHTMLファイルでmainクラスの中の
img要素とh1要素を逆にすれば良いということです。
(top:を指定する前段階に)

そうすればh1要素はabsoluteを指定しているため、高さが消え、
(absoluteを指定するとその要素の高さが消えます。
 まだ書いてませんでしたが…また今度記事にします。)
画像とh1要素が重なるというわけです。
その後はtop:を指定してh1要素の文字を好きな場所に
配置するなりすれば良いということです。

See the Pen kaisetu5 by takeru77 (@takeru77) on CodePen.

 

こういうのは
ネットで色々解決策を調べたりするのですが、
さまざまな解決法があり頭が混乱します…

というわけで
ではまた。

テックアカデミーにした理由編

どうもこんにちは。
たけるです。

以前の記事で「ホームページ制作で副業する」
と書いたと思いますが、そのためにテックアカデミーを受講することにしました。

まぁ、独学でやっていくと書きましたが、やはりスクールに通った方が
確実かと思い、通うことを決めました。
細かいことは下記記載しますので、見ていってください。

 

何故難しいと思ったのか?

ざっくり分けてしまうと以下の3つの理由があります。

 

①ホームページに関する実務経験が無いから

 

一般にプログラミング等のフリーランス
実務経験が無いと仕事が来ないらしいです。
その情報源は知恵袋やその他ホームページ
ですか…

 

情報源その①(知恵袋)

↑ クリックで表示

情報源その②(知恵袋)

↑ クリックで表示

情報源その③(ブログ)

↑ クリックで表示

ホームページ制作はプログラミングではないですが、
こういう記事を見ると不安になってくるものです。

 

②このまま勉強し続けていても、
企業用のホームページを作るほどの自信がなかったから

 

これまでprogateというプログラミング学習サービスや、
自分でホームページ作成の練習をしてきましたが、
やはり企業用のホームページを作るには難しそうでした。

ちなみに下の画像が僕の作ったホームページです。

こんな感じでレベルアップはしているものの、
企業のホームページを作るのにはまだまだ時間が必要だと感じます。
要は見栄えが良くてユーザーの使いやすさが考えられたWebサイト
を作るにはまだまだ時間が掛かりそうということです。
※下はダイエーのWebサイト↓

https://www.daiei.co.jp/meat/

そもそも分からないところが多々ありますし…
成長も頭打ちになってくると思います。
やはりここはしっかりと体系的に教わった方が効率が良いと考えました。
(実はMentaというサービスは使っていました。簡単に説明
すると、教えたい人(メンター)と教わりたい人(メンティー)を
つなぐサービスです。)

 

③案件の補償がついていたから

これもかなり大きな理由になりました。
自分で良いホームページが作れたとしても僕にはその
受注したという実績がありません。
ですが、テックアカデミー「初めての副業コース」なら
案件の補償がついています。
※2022年5月13日現在。

とは言っても補償は最初の一件のみですが…
ですが全く案件をとったことがないというよりは
一件だけだとしても経歴がついていた方が良いと考えました。
0と1の違いは大きいってやつです。

 

以上の理由からテックアカデミーに通うことにしました。
どんなスクールかはまだ分かりません。
受講が始まり次第、それらに関する記事も書いていく予定です。

 

まとめると

今まで独学でホームページ制作の勉強をしていた。(メンター付)

課題をこなしていく中で、体系的に学んでみたいという
思いと、本当に案件が取れるかどうかという不安がよぎる。

テックアカデミー「初めての副業コース」にて
案件の一件目の保証というコースを見つける。

受講を決める。

 

と言った流れです。
また何かありましたら記事を書いていくつもりです。

ではまた。

 

 

 

 

 

大事な用語集①(web、ホームページ、webサイトとは?)

どうもこんにちは。

takerudesu。

前回の記事でプログラミング言語をやっていくと

書きましたが、もしかしたら

「そのプログラミング言語とは一体なんなの?」

という方もいらっしゃるかもしれません。

そこでそのプログラミング言語という

続きを読む