Webクリエイター科 ブログ 個別記事(Webデザイン 専門学校)

デザインで未来を創る。



蒲田 八王子 3年制 プロのWebデザイナーをめざす人の情報ブログ Webクリエイター科ブログ

オープンキャンパス+体験入学 多彩なデザインの仕事を体験しよう!

【八王子校】Webサイト制作の基礎!HTML・CSSとは?【7/27体験入学メニュー】

2019年07月23日 【八王子校】Webサイト制作の基礎!HTML・CSSとは?【7/27体験入学メニュー】


7gatuB

こんにちは!ヤハタです!

最近だんだんと暑くなってきましたね。

水分補給等をお忘れなく!


さて、皆さんはHTML・CSSはご存知ですか?名前だけなら知っているという方や、全く知らないけど少し興味があるという方に是非、読んでいただきたいと思っています。



目次
・HTML+CSSってなに?
・Webサイトを作るために必要なことは?
・ 今から出来るちょっとした小技!




HTML+CSSってなに?


html


HTMLとはHyperText Markup Languageの略で、Webページを作成するための言語です。分かりやすく言うなら、骨格になります。皆さんがいつも見ているWebサイトの殆どはHTMLで作られていて、このブログもHTMLで出来ています!








htmlcss



CSSCascading Style Sheetsの略でHTMLと組み合わせて使う言語です。簡単に言えば、HTML(骨格)に装飾・肉付けをさせる為の指示を出す人の事です!HTMLとCSSが合わさり、初めていつも見ているWebサイトという形になります。







html_css_js
また、JavaScriptと呼ばれるプログラミング言語があります。これの一般的な使い方としてはWebサイトに動きを付ける際に使用します。CSSでも動きを付けることは可能ですが、JavaScriptはより複雑な動きを付けられます。JavaScriptを正しく取り入れることで、Webサイトのクオリティがさらに向上します。







Webサイトを作るために大切なことは?





hikidashi_ooi_businesswoman

もちろん、上記にあるHTML、CSS、jsの知識は必要です。しかし、それ以外に引き出しの数を増やすということが大切になっていきます。




例えば

・他の人のWeb作品を見て刺激を受ける

・人(プロ)からアドバイスを貰う

・街に出てポスター、建物といったデザインを見る

・普段見ない男性、女性雑誌を見てみる 等




引き出しの数を増やしていかないと、いざWebサイトを制作する際に良いアイデアが思い浮かばずに苦戦してしまうんですよね・・・。色々な所にアンテナを張って情報を吸収していきましょう!


また、全てのコードを完璧に覚える必要はなく、「そういえば、あんなことができたな」と頭の片隅にあれば大丈夫!詳しく知りたいときにはインターネットで検索をすれば良いのです。インターネットには欲しい情報の全てが載っています。この時に上記にある引き出しがないと、そもそも何を検索したら良いのかが分からない状況に陥ることがあります。日々、引き出しの数を増やし、更新していきつつ、検索スキルを磨くことがとても大切だと思います!









今から出来るちょっとした小技!



実は簡単にHTML・CSSに触れることができます。Chromeで、好きなWebサイトを開き、以下のキーを入力をすることでデベロッパーツール(別名:検証モード)が起動するので、少し触っていきましょう。



【Ctrl+shift+I】(Macの場合は、Command+Option+I)または【F12】


web_01



このデベロッパーツールを使うことで、HTML・CSSがどのように書かれているのかをチェックしたり、またはテストとしてコードを書き換え、表示を変更させることも出来ます。




実際に触ってみましょう!

※リロード(更新)で元に戻るのでご安心を!




web_02


デベロッパーツールのHTML側で、表示を変えたい場所を選びます。今回はテキストを変更させるので、「▶︎」部分を押し、下層にあるテキスト部分を探します。







web_03

テキスト部分が見つかりました。あとはここを書き換えるだけで表示が変更されます。テキスト部分をダブルクリックし、書き換えてみましょう。








web_04


テキスト部分を書き換えると、このように表示が変更されます。









web_05



今回はテキストを変更させましたが、他にも画像を変えたり、レイアウトそのものを変えたりなど、色々なことができます。もし、Webに興味がある方は色々と試してみるのも良いと思います。Webサイトの構造について知れて良い勉強になりますよ!






ーーーーーーーーーーーーーーーーーーーーーーーーー







今週の体験入学のメニューは・・・

HTML+CSS入門です。


blog_OC_gif4

学科の説明や、学生作品もたくさんお見せします!
進路のお悩みについても、ご相談にのりますのでお気軽にいらしてください。

お待ちしております!

n-70077798 at 16:22 | この記事のURL | |