Web プログラミング

【もりけん塾42日目】表の修正は
とmarginで改善

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

完全初心者で2月から独学でHTML&CSSとJavaScriptを学び、無料の職業訓練でJavaを受け9月から晴れてサーバーサイドエンジニアになった友人に以下のことについて相談しました。

 

 

相談した内容

  • 独学で勉強した方法
  • 表の文字が見えづらい
  • 画像クリックでテキストが表示する方法

これらについてそれぞれ記事を3つに分けて整理していきます。

 

今日は2つ目の『表の文字が見えづらい』ことについて。

表の文字が見えづらい

現在のLPで表を作成しましたが、表の文字が非常に見えづらいことを相談しました。

 

表は横3、縦13で文字が多いために横がはみ出てしまいます。

 

実際にしたことは、

  • tableで表を作成
  • 表がはみ出るため画像に変更
  • 文字が小さく見えづらい

という結果に。

 

【友人の回答】横幅を狭くしてCSSを使え

友人は文字を減らせるなら減らす。

難しいなら<br>を使って横幅を減らす方法をとり、CSSで修正するとのことでした。

 

【アドバイスを受けて】実際にやってみた

codesandboxでデータを残しておいたので、実際にやってみました。

 

以前は他のboxに表がかかっていたので改善したのは、

  • 画像→tabelに
  • <br>
  • marginで余白調整

これでbox内におさまりました!!

 

全然できなかったので画像に変更したのに…!

 

おわりに【反省点】

知っている情報でできたのにそれに至らなかったのは経験不足だと痛感。

 

友人は模写を1日1つこなし、実際に自分でも作成していたので経験値を積んでいた。

 

ここが分かれ道だと感じました!

 

LPが終わったら

  • 何度も模写とゲーム作成に時間を注ぐ
  • もりけん先生の勉強を友人が教えてくれたゲームとマッチさせて身につけていく

この方法でプログラミングで遊んで行こうと思います!

 

できたのうれしいー!!!!!!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada