セブ島語学学校 NILS ITインターンのりょーでっす

最近はと言いますと・・・いろんな苦楽を共にしてきたインターン仲間とのお別れがたくさんあってなんだか置いてけぼりになっちゃうような寂しさを感じている所存ではあります…。

そんくらい職場、学び場、生活が一緒というのはデカイ話で、仲間というよりも家族の近いかもしれないですね!!!!

さてさてそんなんでも、私、りょーのインターンとITのお勉強と毎日はまっだまだ折り返し地点(3ヶ月目)な訳で、、、

今回お伝えしていきたいのは、私が学ばせて頂いてるIT関連でっす!!( ゚Д゚ノノ”☆パチパチパチパチ

今回はCSSについて書きます

今回共有していきたいのはWebサイトのデザインに欠かせないCSSでっす!!!
ITに触れ、Webデザインを始めた人が、ぶち当たる高っかーーーーーーーーーい壁という読みです。

ジョーダンですが、、、
Cascading Style Sheets、カスケーディング・スタイル・シートの略なんです。んがぁ〜

私自身、この3ヶ月で初めて習ったことばかり、聞いたことも見たこともない内容ばかり…
なので、初心者がお送りしていくわけなので、言い回しなど、よくわからん言語とかはほとんど抜きでかいていこうとおもいま〜す!

Webサイトの構築するために必要な言語

このCSSHTMLと組み合わせて使われる言語なんですが、、、デザインと一口に言いましたが、要するに、ウェブページが画面に表示されす時の色、サイズ、全体のレイアウト、音声読み上げソフトや、プリンタなどを使用する際に出力スタイルとか、、、ウェブページをどのようなスタイルで表示・出力・再生するか、を指定するものなんぞ!

え?ちょっと何言ってるかわかんない???
んーーーーー、もっとひらたーーーくいうと何かにたとえていうと、

 

 

 

 

 

 

 

これ、どっちがいい??ってはなしなわけですっ!!
(語彙力ないんで・・・百聞は一見に如かずっていうでしょ??・・・ね?)
ってなわけで、右がHTMLだけで書かれたもの、左が、HTMLCSSをつかってデザインしたもの!!

で?どっちがいい???とーぜんデザインされた方だよね??m9っ`Д´)
っという訳でサクッと書き方にはいっていこうと思うよ〜〜
(百聞は一見に如かずっていうでしょ??・・・ね?)

ブラウザでの表示方法は上のリンクの内容とおなじなーのーで!
今回はざっくりと
書き方とそれになぞらえてそれぞれの大まかな意味みたいなものを
もーほんとざっくりとお伝えしていきます!!!
はいっ!!!そんじゃ、HTMLよーーーーい!!

HTML

表示結果

保存

これを書いたら”名前を付けて保存” をして名前を ”test.html” にして保存先をデスクトップ!!
ブラウザで表示すると…

まぁまぁ、これだけでも、なんか、意外と、、、ね。
でもでも黒だけ、いろんな意味で殺風景な感じでさみしーでしょ??・・・うん。

<head>内に注目!!<link>タグで囲まれている部分!!これを書くことによって、このHTMLにhref=”test.css”を適用(読み込み)ますという意味になるのです!
よって、これを書かなけれ今回はCSSが適用されないという意味です!!

ここからCSSの解説

ここでやっと登場 ”CSS” この文章にCSSを適用していく訳なんだけども、まずCSSを書くときの原則として、
セレクタ {プロパティ名:値;}こういったルールがあります!!

でも、この書き方だと、見ずらいから改行を入れて見やすくした形にする!ってのも基本!!!
まぁまぁここもおきまりの???

(n‘∀‘)η 百聞は一見に如かず〜〜〜〜〜〜〜!!!!

もー・・・なーーーーーんのこちゃ!?!?!?!日本語で説明してくんね??とりあえずこう書いたら”名前を付けて保存”をして名前を”test.css”にして 保存先をデスクトップ!!

ってなるのもすごくわかる!
んじゃあ、これを説明していくねっ♪

@charset=”utf-8″;

h1{  ←h1がセレクタだよ!セレクタに関してはデザインしたい場所によって変わるよ!!
文字の色を変えたい!:赤色にして!! ;  ←:;(コロン)の左に書かれているのが”プロパティ”で、右が”値” になるよ!!
 文字サイズを変えたい!: 30ピクセルにして!!;  ←ピクセルとは・・・ウェブ上の大きさの単位で上で書いたように言うと値ってことになるよ!

文字の太さを変えたい!: 太くして!!;
}

ol{
背景色を変えたい!: 黄色にして!!;
要素の横幅を変えたい!(指定したい!): 500ピクセルにして!!;  ←ここでいう要素の横幅とは、”ol”の外側にある見えない余白のことだと思ってね
}

ol  li{  ←この書き方をすることによってセレクタの指定の仕方を”ol”の中の”li”を指定するってことになるよ!!
文字の色を変えたい!: 青色にして!!;
文字サイズを変えたい!: 20ピクセルにして!!;
要素の内側に余白をいれたい!: 10ピクセル分余白を空けて!!; ←ここでいう要素の内側の余白とは”li”の内側にある見えない余白だと思ってね
}

p{
文字サイズを変えたい!: 10ピクセルにして!!;
文字の色を変えたい!: 赤色にして!!;
要素の横幅を指定したい!: 250ピクセルにして!!;
文字に枠線をつけたい!:太さ2ピクセルの 実線を 黒色で表示して!!;  ←枠線の指定の仕方は順番はバラバラでも構わないんだけど、:太さ 線の種類 線の色;となります!! }

これをブラウザで表示すると・・・

まとめ

っと、こんな具合になるんでっせ!!プロパティの意味や、種類もすっとばしたけど、
ここで感じて欲しいのは、こういう感じで文字に起こされたものをデザインしてるんだなぁ〜ってなって少しでも興味を持ってくれてもっと知りたくなってくれたらいいなぁなんて思います♪

自分自身、本当の本当の0からスタートだったしなんもわからなくても全然心配はないから新しい技術を身につけたいと思ったら即行動が大事!!
もっともっともっともっと奥が深いから、私もまだまだ勉強することは山積みだしねぇ〜〜・・・笑

IT留学に関するお問い合わせ
no image

この記事が気に入ったら
いいね!をお願いします(^^)