新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【CSS】CSSに関しての基本的なこととプログラミング言語で共通すること

 

■CSSの存在意義

「目的」

 以下の目的のため

 ・HTMLファイルの可読性をあげるため

 ・保守性のため。デザインの変更時、変更箇所をCSSファイルのみにする

 

 

■HTMLファイルの外部ファイルとしてCSSを利用する

 

 「記述する個所」

 <head>ここに以下のソースを記述</head>

  <link rel="stylesheet" type="text/css" href="ファイルの格納先"/>

 

 

■タイプセレクタを変更する

 →タイプセレクタとは既存の要素のこと

  つまり、要素のプロパティ(色・文字の大きさなど)をいじること

  例)h1,h2,p,ul

       p{変更したいプロパティを記述}

       h1{color: #fff000;}

 

■子要素のみを変更する

親要素子要素の子要素のみのプロパティを変更する

 例)リスト。

ul(親)とli(子)

 

 親要素 子要素{}

 ul li{ color: #fff000;}

 

 

 【所感】

 

自分はたいしたPGの経験ないんだけど、

Javaみたいなオブジェクト指向言語にしても、

Javascriptみたいなスクリプト言語にしても、

cssにしても

プログラムとして共通することがあるなと思います、

 

それは、

 

【共通するものは部品化して外出し】

 

 共通して使うメソッドやデザインは外出しすることで、以下のメリットがあると思われます。

 

 ・再利用可能

 ・変更部分を少なくなる

 ・可読性を高める

 

で、特に自分で学習していて特に痛感したのがこの「変更部分を少なくなる」こと。

 

今日学習したCSSでいえば、ヘッダのデザインなどをCSSで共通化していなければ、ヘッダに修正が入った際、画面分修正を行うことになる。

 

共通化を行っていれば、一か所ですむ。

 

 

これは他の言語でも同じようなことがいえる。

 

 

自分でその失敗(共通化を怠り非効率な作業を行う)をすると、

一番良いかも。

 

 

【参考】

いくつかCSSについて体系的にまとめられているサイトを見たけど、

 

個々が一番わかりやすかったです。

参考:http://www.webword.jp/

 

 

 

 

 

 

 

 

 

 

 

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }