見出し画像

駆け出しエンジニアなっちゃんの学習録

なっちゃん

未経験から自社・受託開発の企業様に採用していただいて、1週間。

OJTから始めさせていただき
あわあわしながら頑張っております。

業務内容や職場に慣れること、環境構築などなど
新しいことがたくさん。

これから自宅でも仕事内容に近い学習をし、
スキルアップに励んでいこうと思っています。

さて何からやってよいものやら。

優先すべきは、仕事でなかなか進まないところに対し、
どうしたらいいかの具体案を考えていくこと。

それには、私のPCさんに
・PHP
・TypeScript
・mPDF

などなど導入すること。

そんなわけでPHPを私のMacbook pro（M2）にインストールしようとおもったら、なかなかうまくいかず。

もともとHomebrewでいろいろと導入していたから、
brew -vしたり、
いろいろサイトを調べて
環境変数もいれて…ってしたんだが、

php -vってしても
command not found :phpが出てくる…

なんで？

ここで詰まってても先に進まないので、できることから始めよう！

課題はこれを綺麗に表示すること。

とりあえず、projectと名前をつけて、
HTML＆CSSの復習がてら、上記表示を行えるように試行錯誤。

上記を表示するためのソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="project.css">
</head>
<body>
  <div class="top_wrapper">
    <div class="year">
      <div class="year_form"></div>
      <div>年</div>
    </div>

    <div class="month">
      <div class="month_form"></div>
      <div>月</div>
    </div>

    <div class="day">
      <div class="day_form"></div>
      <div>日</div>
    </div>

    <div class="time">
      <div class="time_form"></div>
      <div>時</div>
    </div>

    <div class="second">
      <div class="second_form"></div>
      <div>分</div>   
    </div>

    <div class="line">&nbsp;~&nbsp;</div>

    <div class="top_wrapper">
      <div class="year">
        <div class="year_form"></div>
        <div>年</div>
      </div>
  
      <div class="month">
        <div class="month_form"></div>
        <div>月</div>
      </div>
  
      <div class="day">
        <div class="day_form"></div>
        <div>日</div>
      </div>
  
      <div class="time">
        <div class="time_form"></div>
        <div>時</div>
      </div>
  
      <div class="second">
        <div class="second_form"></div>
        <div>分</div>   
      </div>

  </div>
</body>
</html>

CSS

.top_wrapper{
  display: flex;
  width: 80%;
}

.year,.month,.day,.time,.second{
  display: flex;
  align-items: center;
}

.year_form{
  width: 100px;
  height: 50px;
  border: 1px solid #000000 ;
  border-radius: 5px;
}

.month_form,.day_form,.time_form,.second_form{
  width: 50px;
  height: 50px;
  border: 1px solid #000000 ;
  border-radius: 5px;
}

a{
  font-size: 32px;
}

.line{
  font-size: 32px;
}

ここで覚えたのは、
・空白をあけるときは「&nbsp;」を使う

ということ。


ちなみにフォームなんだからinputタグをつかえばいいのでは

というご指摘もあるかもしれないのですが、
どうやらmPDFでは対応していない？（調べ不足だったらすみません）
ようなので、四角を描く形にするしかありませんでした。

余白とかもう少し改善の余地はありますが。

あとはここからmPDFがこれらのCSSに対応しているかということ。
（文字化けなども考慮して）

英語での公式ドキュメントだから、なかなか解読が難しい😅

明日で終わらしたいこの課題。

ここでChatGPTの変化ver.を使ってみました。

ChatGPTで2021年9月以降の情報が欲しかったので
こちらを参考に。

私はWebChatGPTを使用してみました。
すると…

mPDFを使用して要素に希望の水平レイアウトを実現するには、CSSに必要な変更を加えることができます。提供されているHTMLコードには、Flexboxプロパティでスタイル設定された要素が含まれており、これは正しいアプローチです。しかし、mPDFで要素を水平に表示するには、いくつかの改良が必要です。以下は、水平レイアウトを実現するために更新したCSSコードです：

``css
.top_wrapper {
display: inline-flex; /* インラインフレックスに変更 */
width: 80%；
}
省略
…

複雑なCSSや特定のFlexbox機能を扱う場合、mPDFには限界があることを覚えておいてください。mPDFがレイアウトを正しくレンダリングする際に問題が発生した場合は、CSSを簡素化するか、別のアプローチを試す必要があるかもしれません。

また、mPDFにはサポートされているCSSプロパティと機能の独自のセットがあるため、希望するレイアウトが実現可能かどうかを確認するために、mPDFのドキュメントと互換性を常にチェックすることをお勧めします。

なるほど、しっくりくる回答が得られました。

全くもって正しい情報かは明日トライしないとわかりませんが、
一筋の光が見えましたw

もう2つ問題が。

・四角の角を丸くしたいけど、mPDFだとborder-radiausが効かない？
→imgとtdには効かないらしいけど、それ以外は効く？ような答えが返ってきた。

・文字化けしちゃう問題
→まずは参考のダウンロードページをみよう。

どうやらバージョンにもよるらしい。

もうこんな時間なので、今日はこのへんで。

明日は少し早く行って、問題解決に取り組む！

駆け出しエンジニアなっちゃんの亀さんのような成長をあたたかく見守ってくださるとうれしいです。 自己研鑽に拍車をかけたいと思います！