0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ラインみたいなwebアップリケーションを作ろう!! 1日目

Posted at

はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

手順

1、htmlのクラス名を決める

ポイント1 : 紙に書き出して全体像を掴みながら決める
ポイント2 : BEMのルールに従ってクラス名を決める

2、画面設計 

学んだ事

  • 初めは、全体を書く
hello.haml
!!! 
%html
  %head
  %body
hello.sass
.html{
  background-color: #ffffff;
  color: black;
}

と記入!!!

  • 並べ方(flax box)
  • justify-content: center;
  • display:flex; 

今回は上記の二つを使いましたが、他にも色々使い方があります
flex boxはwebサイトを作成する際に必ず使う要素の一つと思います

  • haml要素

  • i要素

  • i 要素は、その文章内で定義されていないものを表すときに使われます

  • 他とは質が異なるテキストを表すものです

  • p要素

  • p 要素は、文書における人まとまりのこと

  • ul要素

  • ul 要素は順不同リストを表します

  • 順不同リストとは、項目の順序に意味ががない、箇条書きのことです

  • ulを使うとき必ず子要素は、liになります

  • a要素

  • a要素となるタグで囲った文章をリンクにすることができます。

  • クリックすると特定のページに遷移するように設定できます。

  • aタグのhref属性に対して、遷移させたいページのURLを指定します

感想

haml,sassでの記述が難しい
慣れれば、もっと素早く記述できると思いますが、今は、数をこなすのみですね
経験が浅い分時間が、かかりそうです
関係ない話なんですが、『NOKIA復活の軌跡』を読んだ感想
NOKIAは、携帯電話シェア世界topであったが、時代の流れに乗れず、スマートフォンの普及により携帯電話のシェアを奪われって停滞していきました。
これは、個人事業主を目指している私にも、当てはまることで、個人事業主の場合、時代の変化に、敏感でないと突然仕事がなくなる可能性があります。
情報収集能力・行動力・時代の流れに合わせる能力・時代を先読みする能力はフリーランスで生きていく上で大事だと思いました。

終わりに

もっとこうした方が良いよなどご指摘頂けると幸いです

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?