webデザイン

昨日、ブログのデザイン設定をしたときにいじったCSSに興味が出たので、少し勉強してみました。

HTMLとCSSが合わさってWebページが出来ている事すら知らなかったので、基本のキから調べていたらブログを書く時間がなくなってしまいました笑

デザインを指示するのがCSS

文字に色を付けたり、配置を指定したり、そういうプログラムをつづってあるのがCSSだそうです。

この太字斜体も、CSSが指定してくれてる…んでしょうね。マークダウンで書いてるので、イメージしづらいですが…。

コードの書き方を学ぶ

専門的なことはちんぷんかんですが、初歩の初歩くらい知っておこうかなと、プログラミングが学べるアプリをダウンロードしてみました。

小学生の学習用にもおすすめされてたので、これなら私でも理解できそうと思いトライしました!

まだHTMLとCSSのレッスンしかやってないのですが、なんと1時間くらいで仕組みはざっと理解できました!

しかもやってみると、なかなか楽しい。

演習もして覚える

Progateだけだと、演習が少なかったので、レッスンで学んだ事を応用できるように、開発ツールアプリもダウンロードしました。

iPhoneからHTML,CSSが書けて、なおかつプレビューが出来る無料アプリを探したら、こちらが見つかりました。

JavaScript Anywhere JSAnywhere

JavaScript Anywhere JSAnywhere

  • Tatsuya Tobioka
  • ユーティリティ
  • 無料

シンプルで使いやすいアプリでした。

今日の成果

今日はレッスンに沿ってWebページを作る(その1)を課題にしてみました。

HTMLがこちら↓

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>thePassenger</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="header">
   <div class="header-logo">The Passenger</div>
    <div class="header-list">
     <ul>
     <li>アクセス</li>
     <li>会社概要</li>
     <li>お問い合わせ</li>
     </ul>
    </div>
  </div>
 <div class="main">
   <div class="copy-container">
    <h1>The<span>passenger</span></h1>
    <h2>htmlとcssの練習</h2>
   </div>
   <div class="contents">
   </div>
   <div class="contact-form">
   </div>
  </div>
  <div class="footer">
    <div class="footer-logo">The Passenger</div>
    <div class="footer-list">
     <ul>
     <li>ブログについて</li>
     <li>コンテンツ</li>
     <li>お問い合わせ</li>
     </ul>
    </div>
  </div>
</html>

そして、CSSがこちら↓

body {
  font-family:"Avenir Next";
}
li{
  list-style:none;
}
.header {
  color: #fff;
  background-color:#26d0c9;
  height:90px;
}
.header-logo {
 color: #f10390;
 font-size:36px;
 float:left;
 padding:20px 40px;
}
.header-list {
 color: gray;
 float:left;
}
.header-list li{
 float:left;
 padding:33px 20px;
}
.main {
 padding:100px 80px;
}
 .copy-container h1{
 font-size:120px;
}
.copy-container h2{
 font-size:60px;
}
.cooy-container span{
 color: green;
}
.footer {
  color: #fff;
  background-color:#2f5167;
  height:120px;
  padding:40px;
}
.footer-logo {
 font-size:32px;
 float:left;
}
.footer-list {
 float:right;
}
.footer-list li{
 padding-bottom:20px;
}

これを先程のアプリ、JSAnywhereで実行すると…

じゃじゃん!こんな感じになります! f:id:the_passenger:20210503185907j:plain

初歩の初歩でも自分で出来ると感動

アプリのレッスン見ながら作ったので、間違いもあるかもしれませんし、プログラミングを学んだ事がある人ならお茶の子さいさいな事なのだとは思います。

が、私、凄い感動してます!笑 初心者の私が1時間でこんなもの作れるなんて…画期的なシステムですね!

なにより、Progateの説明がわかりやすかったです!もっと色々出来るように勉強します!