プログラミングと旅と映画の日々

普段はスマホ決済サービスの会社でバッグエンドを担当しているエンジニアです。プログラミングと趣味の映画、株、時々うどんに関してブログを書いていこうと思います。海外ドラマ、クロスバイクも好きです。

CSSの基本フォントサイズを相対的に決めるには<文系エンジニアのプログラミング>

フォントサイズを決める方法は大きく分けて2通り。

 

・タグごとにpxでフォントサイズを指定する

・基本のフォントサイズを決めておき、各要素は相対値で指定する

 

まず一つ目の方法は一般的な手法で、要素ごとにフォントサイズが明示されているため、可読性が高いです。

 

二つ目の方法では、すべてのフォントサイズを基本となるサイズに対して相対的に決めることができます。

 

この手法は、以下のようにまずhtmlに対してフォントサイズをpxで指定します。

html{

  font-size: 14px;

}

 

次に各要素に対してフォントサイズを指定します。

 

h1{

  font-size: 1.4rem;

}

h1{

  font-size: 1.2rem;

}

 

rem(ルートエム)はルートに対して(ここではhtmlがルートとなる)指定されているフォントサイズに対する倍率を指定することで、各要素のフォントサイズを指定しています。

上記の例の場合、h1=14*1.4=20pxとなります。

 

このような相対的なフォントサイズの指定方法を取っておけば、htmlのフォントサイズを変更するだけで各要素のサイズも自動で連動するためパソコン向けとスマホ向けでサイズを変更したい場合などに威力を発揮します!

eclipseで複数のsearchウィンドウを表示する方法<文系エンジニアのプログラミング>

仕事で難解なロジックを追っている時、同じような処理を書いているソースがないか

ファイル検索してロジックを探したい時がありました。

 

既存のsearchウィンドウの内容も残しておきたかったので、そういう場合にもう一つウィンドウを表示できないかと思い

eclipse 2 search windows

などとググったところ英語ページに方法が載っていたため備忘として記載。

 

既存のsearchウィンドウでピン留め(アイコン)しておき、eclipseの上のnewウインドウから新しくsearchウィンドウを選択すれば複数windowが表示されます。

 

<保存版>Macデビューした初心者が覚えておくべきショートカット集!

◆全Windowを閉じる

command + option + W。

 

◆アプリケーションを閉じる

command + Q。

MacWindowsと違って、左上の赤い✕ボタンでアプリは実際に消えずにバックグラウンドに残っているのでこまめに消しましょう!

 

スクリーンショットを撮る

command + Shift + 3。

 

chromeディベロッパーツールを起動

command +option+i

 

classListとclassNameを使用してclass属性を操作するには<JavaScript勉強中>

HTML5から利用できるようになったclassList、classNameを利用することで

HTMLのclass属性を操作できます!

 

便利なので使い方を覚えて取り入れましょう!

 

◆classList

element.classListで要素に紐付いたclass属性を取得できます。

主に以下のようなメソッドがあります。

  • add: 要素のクラスリストへのクラスの追加
  • remove: 要素のクラスリストからのクラスの削除
  • toggle: 要素のクラスリスト中の特定のクラスの切替
  • contains: 要素のクラスリストが特定のクラスを含むか否かの確認

では実際にそれぞれ使ってみます。(以下編集中)

CSSの基本を理解しておく:3大セレクタ<文系エンジニアのプログラミング>

 
CSSセレクタ指定方法の自分用メモ
CSSでよく利用される3大セレクタについてまとめる。
この3大セレクタは、可読性が高いことにより推奨利用される。
 
◆タイプセレクタの場合
body(h1,p..etc){
 プロパティ:値
}
 
◆classセレクタの場合
.class名{
 プロパティ:値
}
例えば同じタイプのタグがあった場合など、片方のタグにだけスタイルを適用する際には、タグにclass名を付与しておき、CSSでそのclassのみにスタイルを適用することが可能。
 
◆子孫セレクタの場合
.class名 タイプ名{
 プロパティ:値
}
セレクタで指定した要素の子孫要素に対してスタイルを適用する方法。
 
*参考書籍*

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

新品価格
¥2,678から
(2017/1/31 20:14時点)

CSSの基本を理解しておく<文系エンジニアのプログラミング>

HTMLに加えて、CSSに関してもしっかりゼロから復習しています。

書籍を元に要点を備忘としてまとめます。

 

CSSとは

HTMLに表示のためのスタイル情報を追加するもの。

HTMLは見た目を調整する機構は持っていないため、デザインに関してはCSSで調整します。

 

CSSの基本書式のおさらい

(例)

h1 {

 font-size:18px;

}

************

h1:セレクタ

{}:宣言ブロック

font-size:プロパティ

18px:値

************

CSSは、HTMLのどこにどんなスタイルを適用するのか定義する必要があります。

セレクタは、この「どこに」に当たる部分。

例では、タイプセレクタを用いて、h1タグに対してHTML要素を指定しています。

他にも様々な指定方法があります。

 

宣言ブロックに、「どんな」スタイルを適用するのかを指定します。

{}で囲まれた部分が宣言ブロックです。例ではフォントサイズを指定していますね。

 

プロパティとそのセレクタで指定した要素に適用するスタイルです。コロン区切りで値を指定します。

 

 ◆関連

HTML5の基本を理解しておく<文系エンジニアのプログラミング> - hoz blog

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

新品価格
¥2,678から
(2017/1/31 20:14時点)