患者基本情報作成①

今回では、患者基本情報で表示する項目とHTMLとCSSを使った実際の画面設計をした。


項目数は９項目で、
「氏名」、「氏名（フリガナ）」、「患者ID」、「性別」、「生年月日」、「住所」、「アレルギー」、「感染症」、「禁忌」

この項目に絞った。

HTMLでClassを指定すると共に、図１のように各項目を追加した。

<div class="haikei">
    <ons-list-item>
      <ons-col width="30%"> <h6>氏名</h6> </ons-col>
      <ons-col>{{ patient.Patient_ID }}</ons-col>
    </ons-list-item>

図１　HTML 患者基本情報の項目追加

またデザインとしては、CSSでClass=haikeiのbackcolorを変更した。

.haikei{
    background-color: #D7EEFF;

}

図2　CSS 背景の色の変更

結果としては図3-図４のようになった、データはまだ取り込めていないが今後表示できるように取り組んで行きたいと考えている。

図3　患者基本情報の画面

図４　患者基本情報の画面

また文字のフォントや一行あたりの幅など調整していきたいと考えている。