プログラミング

プログラミングノート no.1

縁あってAdobeのDreamWeaverを使ってプログラミング&Web制作をやることになったので、毎日勉強したことをノート代わりにまとめてブログを更新することをここに宣言しますッ!

というわけで、しばらくはプログラミングの記事が続くと思いますが、全ては自分のためにッ!笑

あわよくば同じようにプログラミングを独学する誰かのためにッ!

がんばりまーす!

今回参考にする本は、服部雄樹さんの『HTML&CSSとWebデザインが1冊できちんと身に付く本』です。きちんと身に付けたいと思います!

HTML…CSS…PHP…なにそれヤダ分かんない怖い…

嫌ですよね〜アルファベットの羅列。笑

なので日本語に直します。(体の部位で例えるのは風早オリジナル)

HTML(ファイル)…人間で言う素っ裸の状態。身体。文字の情報とかリンクの情報とか。1ページ1HTML

CSS(ファイル)…服や化粧。レイアウトや大きさとかを指示する見た目に関するファイル。

JavaScript…筋肉。文字や画像に動きをつける場合や入力チェックに使われるプログラミング言語。

PHP…ブログでよく使われるプログラミング言語(ちょっと身体の例え思いつかんかった)

HTMLファイル、CSSファイル、画像ファイル…など、フォルダ分けされたフォルダをディレクトリといいます。

このUI分かりやすいしレスポンシブデザインもオシャレ

一瞬オシャレが難しい言語に見えた人ー!笑(はーい)

この文章を訳すと

「このWebサイト操作しやすいしパソコンで見てもスマホで見てもオシャレー!」です。

UI…Webサイトを構成する要素。つまりデザインや使い勝手のこと。

レスポンシブデザイン…コードを変えずに見た目を変化させる手法。はいはい、説明も難しいので言い換えますと、スマートフォン版のページやパソコンページ。同じサイトでも見る端末が違うと画面の雰囲気やデザインが変わりますよね。…それです。

グローバルナビゲーションがスクロールしても付いてくるッ!

グローバルナビゲーション…このサイトで言うと、一番上にあるHOMEとかPROFILEとかどのページを開いても表示されるメニュー、ナビゲーションのこと。

そう、そしてこのサイトを下にスクロールすると、画面上部にグローバルナビゲーションが付いてきてくれるのです!

画面右側とかにある、あるページを開かないと出てこないメニューやナビゲーションはローカルナビゲーションといいます。

そしてそして、ブログ記事の上のほうにある、

HOME/AdobeCC/プログラミングノート始めます。

って表示されてる、今ここの階層にいますよーって表示するのをパンくずリストといいます。

…あれかな?パンくずみたいに履歴がぱらぱら尾をひいてるからかな?(適当)

このページは…ランディングページだな…?

これ言えたらかっこいいね。

健康食品とか美容ジェルとかの広告をクリックすると出てくる、あの1ページに延々と情報が入っててちょっとスクロールするたびに『購入はこちら!』とか『無料体験に申し込む』ってボタンが何回も出てくるページのことです。

ランディングページ…1ページで問い合わせや購入を促すページ。

私はリッチデザインよりフラットデザインの方が好き。

例えばページの中に「お問い合わせ」のアイコンがあるとします。

リッチデザイン…このアイコンに影がついてたりなんか色が何色も使われてたり、文字通りデザインがいろいろ凝っててリッチ

フラットデザイン…シンプルな単色で立体感もない平面的なデザイン。このサイトやロゴはフラットデザインです。

つづくったらつづく…

ABOUT ME
KAZEPA
1994年名古屋生まれ横浜育ち大阪在住。 3歳からダンスと共に育ち、中高バレーボール部、大学は東海大学体育学部で割とアクティブに過ごす。そして現在はエンターテイナー兼クリエイターとして人生を楽しんでいる。