そよ風情報局 -初心者プログラマが独学で試行錯誤-

Webエンジニア目指して勉強中の初心者が、苦労したことや学んだ言語について書いてます。たまにゲームのことも。

Webサイト作成

新ホームページ作成中

更新日:



正確には今のホームページ(https://wynn-eng.sakura.ne.jp/)をもっとよくしようと頑張ってるって感じです。
今はほんと最低限のものしかなく、デザインもないようなものなので、もう少しまともなものにしようかなと。

Webエンジニア目指していろいろやってますけど、今までってSQL使ったりのサーバエンドをメインにしてました。
なので、今度はフロントエンドの方を頑張ろうかなと思いまして。
フロントエンド頑張ればそこから仕事獲得できたりするんじゃないかって思惑もあったりなかったり

今のページはBootstrap使って頑張ってみましたけど、なんか聞くところによるとJQueryだけでも結構いろいろとできるみたいで、素人があちこち手を出すのもよくないと思って今はJQueryを中心に頑張ってます。

Web制作会社の作ったホームページいろいろと見て、それを真似してそれっぽいもの作ってる最中です。
デザインも基本に忠実に(?)2カラムのページを作ってます。

1からカラムで分けて作ってると理解が深まって、少しはWordpressのテーマをカスタマイズできたりするんじゃないかなーと期待してますw

あと、見栄えのいいホームページにしようとするとやっぱり写真などの画像が必要になってくるんですよね。
何も持ってないんで、今はフリー素材を貼っつけてそれっぽくしてますけど、公開する際にはちゃんと意味ある画像を貼りたいなーと思ってはいます。

フォトショップとかそれ系のソフト持ってないけど、調べてみると無料でそれっぽいことできたりするソフト等あるみたいなんで、それ使ってとりあえず何か作ってみようかな。。。

今使ってる機能は、動くバナーとアコーディオンメニュー?です。

よくあるくるくると動くバナーはSlickというプラグイン?を使いました。
ぐぐったらすぐ出てくるんですけど、BootstrapやJQueryみたいに読み込めばすぐに使えて、とても簡単に実装できます。
解説サイトもいっぱいあるので、誰でも簡単にわかると思います。
ただ、説明されてる通りに実装しても動作が変になるってこともあります。
(私の場合はそうでした。)

下にサムネイルが表示されていて、それと共にスライドするタイプのものを実装するとき、解説サイトに書かれているコードをコピペするだけだとサムネイル画像が変な表示になります。
そういうときは、サムネイル用の画像をCSSでリサイズすれば解決します!

アコーディオンメニューも解説サイトがいっぱいあって、そこに書いてある通りにすれば多分簡単に実装できます。
実際コードも2~3行書くくらいでいいです。

でもだいたいのサイトに書かれている通りに書くとデフォルトで展開された状態になっちゃうんですよね。
そういうときは、これもまたCSSで対処するんですけど、display:noneをリストに付けてやるとうまくいくかと思います。
特に説明もなしにいっぱい書かれているCSSに含まれてるとかなので、私みたいな初心者は戸惑うと思いますw
ただコードをコピペするだけだとこういうことになるので、なかなか難しいですね。。。
行数多いとそれ1行ずつ解読するのも慣れてないと厳しいですし。
とにかく数こなして慣れていくしかないとは思いますが(´・ω・`)







-Webサイト作成
-,

Copyright© そよ風情報局 -初心者プログラマが独学で試行錯誤- , 2018 All Rights Reserved Powered by STINGER.