【30代からのプログラミング】ProgateでHTML／CSSを全クリしたのでとりあえず自分でサイトを作る。－その2－

ProgateでHTML／CSSを全クリしたのでとりあえず自分でサイトを作る。ーその１ーまで出来たら、あとはコードをどんどん書いていくだけです。色々デザインをいじってカッコいいものを作りたかったですが、とりあえずはProgateで作ったサイトのコピーみたいなものを作り上げるのでやっとのことでした。

Githubで無料で公開できるよ

Progateで公開の仕方が説明されています。こちら　ファイルを上げるまでちょっと作業がありますが、無料だし、まあ何とかできます。私はアトムエディターで一つのプロジェクトのフォルダーのなかに、さらにフォルダーを作って、CSS、HTML、IMAGEと分けましたが、それぞれのファイルは一つのフォルダー内で作ったほうがよいです。

ちなみに今回の成果物は、こちらになります。https://ponsmama.github.io/orange_pom/

出来なくて悩んだことメモ

まず、Stylesheetのコーディングですが、習ったとおりに全然動いてくれない。
Wrapでくるんでコンテイナーにぶち込んでいるのに、別々のはずのブロックがなぜか連動し、Floatであっちへ飛んで行ってしまったり。あーー！ってなった後にProgateの上級編道場にいてじっくりコードを見てみる、というのを繰り返しました。もちろんグーグル神にもかなり聞きました。

しょっぱなから！　CSSが思ったとおりにならない！！！

しょぱなから、text-align:center; も　margin:0 auto;　も全然なにもおこりませんけど？！
と悩みました。そのときはこのコードをぶち込んでみることで解決したです。
  1. *{ box-sizing: border-box } 
  2. html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } 
  3. body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; }
  4. div{ display:block; } 
  5. li { list-style: none; } 
  6. a { text-decoration: none; }

このコードを入れ込むだけで、ずいぶんCSSが素直になってくれました。なぜなのかは、わからない。でも、色々サイト検証してみると、似たようなコードが書かれているように思いました。ので、悩んだらこのコードをぶち込んでみてもいいかもです。

後で分かったのですが、これはCSSリセットという作業みたいですね。ブラウザごとに色々設定が異なっているのでそれをまずすべてクリアにするみたいです。調べてみると色々ありますよ。

【Float：】の気まぐれに振り回される

プロゲートのレッスンセクションのように、イメージを一つのブロックとして、横並びにする。というのがやりたかったのですが、まあ、「君よ、どうしてそんなところにいるんだい？」と、発狂してしまいたくなるくらい動いてくれない。

だいたいにして、ProgateのHTML／CSSの上級編で出てくる、［Floatの解除］らへんがイマイチ理解できていないのが、問題の根源なのでしょう。

あと、Wrapperで巻いて、コンテイナーで仕切りを作り、Divでさらに細かく分ける。みたいな感じかと思っているのですが、Float：left;を入れると、Float：Leftかけた要素のその下にあるブロックもすべてが、左並びになりやがってくれまして、頭が痛かったですね。


こんな感じで解決したのですが、、、いまだに色々霧がかかったような理解です。

レスポンシブもいまだによくわからない

今回作ったデザインはレスポンシブ対応できている、と思うのですがどうなのでしょうか。一応Chromeの検証機能で試してみて、そこまでめちゃくちゃにはなっていないと思います。が、どうしてできたのかがイマイチわかっていない状態です。

今後の課題

デザインですが、まあ、へたくそなのでもうちょっと頑張りたいですね。
ロゴ：もっとシンプルでわかりやすいものに。
背景：どうも使った写真のサイズがデカすぎる？
カラー：配色を研究
メニュー：もっとカッコいいものにしたい

とこんな感じです。

次回はJSとjQueryの学習を終わらせてからまた自作ものを作って見ようと思います。

ではでは、またね







コメント

コメントを投稿

このブログの人気の投稿

素人でもAdobe Stockでの副業で売り上げを出す方法を考察

イメージ
お小遣い稼ぎとして目を付けたのがストックフォト販売。クラウドワークスなどで仕事を受注する前に、ストックフォトで実力を磨けるのでは？と考えました。アドビストックでは、写真、イラスト、ベクター、そして映像の作品を売ることができます。販売を開始するのもアカウントをつくる（無料）だけ。しかし問題はそこから先、稼げるかどうかの前に、売れる作品をつくらなければいけません。 そこで今回はアドビストックのコントリビューターで売れる作品は何なのか考えていきたいと思います。 Adobe Stockで作品を売るために知っておくこと プロのイラストレーターや写真家などクリエイティブ界の戦士たち必須アイテムのアドビ。アドビのイラストレーターやフォトショップはあまりにも高額で手を出すことができない存在なのですが、Adobe Stockで作品を販売することは無料でできます。 基準を超えていればAdobeのソフトを使用して作品を作る必要はありません。私が使っているのはクリップスタジオとCoral Proです。 （売れるかどうかは別） では、あなたの作品を買う人はどんな人たちだと思いますか？　Adobe Stockの購入者の側からサイトを見てみればわかることなのですが、質は高いものが多いですね。そして他のストックフォト系のサイトに比べると、購入するためのお値段はかなり高め。つまりあなたの作品を買うお客様はプロフェッショナル界で活躍するデザイナーさんだったり、デザイン会社、あるいは広告主であったりするのではないでしょうか。フリー素材を必要としているブロガーやYouTuberさんなどは恐らく利用しないであろうサービスです。なかなか超えていくべき敷居が高そうです。 フタが付いたままだよ まずは基本を押さえたい どんなに頑張っても基本が抑えられてなかったら結果は伴いませんよね。まず抑えるところをユーザーガイドからリストしてみたいと思います。 写真とイラストのストック必須項目リスト JPEGであること 画素は４MP以上１００MP（メガピクセル）以下であること ファイルサイズは４５MB（メガバイト）以下 ウォーターマークや日付は付けない さて、ピクセルの画素数とファイルサイズに指定があるのはわかったのですが、素人の私はここで引っ掛かります。画素ってど...
続きを読む

プロフィール

イメージ
ファイナルファンタジーシリーズと、愛犬のポメラニアンをを愛してやまないただの主婦、白圭望です。 髪切りました 現在 CLIP STUDIO pro でデジタルアートを勉強中。できた作品オンラインショップで配信しています。もっと画力を上げたいです。 このブログでは、クリップスタジオの使い方、デジタルアートのあれこれと、たまにゲームやアニメそしてファイナルファンタジーについて書いていこうと思います。 ちなみに今現在は夫の仕事の都合でアメリカのロスに住んでおります。日本が恋しいです。
続きを読む

【30代からのプログラミング】Progateでとにかく勉強してみる編

イメージ
こんにちは、結婚して仕事を辞め家でのほほんと過ごしている主婦です。ブログをぼちぼちやってみたり、デジタルアートに手を出してみたり、ワードプレスで自分のウェブサイトを作ってクラッシュしてみたりしながら過ごしております。そんなこんなでふと興味を持ったのがプログラミング。 なんの経験もない主婦がプログラミングなんてできるのでしょうか？ 見つけた！これなら安心して誰でも学べるプログラミング！ プログラミング自体は前から興味はあったのですが、実際何がどうなっているのかがミステリーでした。HTML／CSSはちょっぴり触ったことがあったのですが、JavaとかC+やPythonなどの呪文に聞こえる言語たち。いったい何から学べばいいのかなんかイマイチわからず。とりあえずJavaなのか？JavaとJavaScriptは違うの？同じなの？なんなの？　という状態から抜け出せず・・・。”Glasshopper”というJavaScriptを学べるアプリをやってみたものの早い段階で挫折。 そんななか出会ったのは　 ”Progate” というサイトです。 Progate おすすめの理由 難しい環境設定がいらない、Web上で勉強できる！ 何を勉強すればいいのかわかりやすい”目的別コース” 色々な言語が学べる 実際にコードを打ち込んで勉強できる 説明やキャラがカワイイ ゲーム感覚で進められる 無料コースも充実している ドットインストールも独学者には有名どころですね。３分のビデオ講習なので、ちょっとした空き時間にこちらを利用するのも良いと思います！ 私は、ゲーム感覚でできるProgateがかなり自分に合っていました。基本飽き性なのですが、ゲーム好きが幸いしました。課題をこなすほどにポイントがもらえたりレベルが上がったりすること、かわいいキャラクターが出てきて飽きにくいですね。 ３０代主婦が実際Progateを挑戦してみた感想 一言：面白い！わかる！できる！ です。今現在の私はHTML／CSSの中級編を勉強しています。Lv.87です。 やはり記憶力がだいぶ落ちているのでノートを取りながら、たまにグーグルで調べながらコースを進めています。寝る前のゲームはProgateの携帯アプリに変わりました。ゲーム感覚でスイスイ進められます。 何を勉...
続きを読む