tanuki_designのブログ

主にWebデザインの勉強内容をメモしています

jQueryいくつか書いてみた

お久しぶりです!
最近仕事が忙しかったなど、勉強意欲が遠のいていましたが
ようやく再開しました〜!




HTMLとCSSの今までの勉強内容を復習しつつ、
ついに! jQueryの勉強をはじめてみました〜!





練習でサイトをつくった時に少し使いましたが、
ほぼコピペでしていたので…(汗)

ついに向き合う時がきましたね!


See the Pen
BgadWv
by tanuki_design (@ekocha)
on CodePen.



See the Pen
VJwzvz
by tanuki_design (@ekocha)
on CodePen.



See the Pen
vqYJPV
by tanuki_design (@ekocha)
on CodePen.



たった3つだけど、すごい時間かかった…

でもこれで書き方の基本みたいなのは身についたし、
どんどん勉強すすめていこう!おー!

【CSS】Flexboxを使ったボックス配置

ボックスを並べるということは、

WEBデザインの初心者にとって最初の関門であり、

この基礎ができないと、後々困る(と思っている)。

 

Flexboxを使ったデザインはかなり簡単なうえに、

たくさん種類もあって便利なのでここにメモ。

 

ルールとしては、

①親となるボックスに display: flex; を入力。

②適用したいボックスにFlexboxのコードを入力。

 ここでは justify-content: space-between; を適用。

 


See the Pen
EJZBzW
by tanuki_design (@ekocha)
on CodePen.


すごい便利。すごい簡単。

他の使い方等は、いつも以下のサイトにお世話になっていますので、ご参考までに。

 

coliss.com

 

 

【HTML基礎】ヘッダ内に入力する情報

 

今回は、現時点で知っているHTMLのヘッダ内に入力する情報を整理メモ。

 

f:id:tanuki_design:20190410152850p:plain

今回説明するコード

 

まず、ヘッダを書く前に指定するものたち。

 

<!DOCTYPE html>

 「これはHTMLである。」という宣言。

 まずは、この記述がないと何も始まらない。


<html lang="ja">

 このHTML内の言語を設定するコード。

 この ja は日本語の事を示しており、

 他にも zh(中国語)、en(英語)、fr(仏語)、it(伊語) などがある。

 

ここから、ヘッダ内での情報。


<meta charset="utf-8">

 文字コードの指定。

ぶっちゃけ、ここはあまりよくわかってないけど、とりあえず上記で大丈夫らしい。

勉強次第、追記します。

 
<title>たぬきのブログ</title>

 サイトの名前をここで決める。

 <title>で囲った中が反映される。上記だと、「たぬきのブログ」部分。

 
<meta name="description" content="">

 ここでは、サイトに関連する説明を入力する。

 検索エンジンでサイトが表示された際に、下にでる説明文となる。

 
<meta name="author" content="">

 ここでは、作成者の情報(名前)を入力する。

 
<meta name="viewport" content="width=device-width, initial-scale=1">

 ここではビューポートの設定をしている。

 閲覧するデバイスによって表示サイズがバラバラになってしまうのを防ぐ。

 上記は width=device-width バイスの横幅に対して、

     initial-scale=1 1倍を最大倍率の表示にする、という指定。

     
<link rel="stylesheet" href="css/normalize.css">
 <link rel="stylesheet" href="css/style.css">
 ここでCSSの指定をしている。

 上段のCSSが、ブラウザ特有のデザインを打ち消すCSSで、

 下段がユーザー指定のCSSとなる。

 HTMLの特性で、下段にあるコードの方が優先度が高いため、

 必ずこの順番で記入しないと、いつまでたってもデザインが反映されない。

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 jQueryの使用をする際は必ず使用するjQueryを引用しないと動かない。

 
<link rel="icon" type="image/png" href="images/favicon.png">

 ファビコンの設定。

 ファビコンとはサイトのアイコンみたいなもの。

 無くてもいいが、あると印象が華やかになる。

 

 

現時点ではこんな感じ。

また新しいことを学び次第追記していこうと思います。

 

 

【はてなブログ】CodePenの埋め込み方法


これからWebデザイン勉強用にしようと思って登録してみたけど、

とても見やすいし、ブログデザインもたくさんあって素敵。

これなら3日坊主の私にも続けられるかも…?

 

今回は初回ということで、

HTMLやCSSを説明するのに便利なCodePenの埋め込み方法をメモ。

 

まず、CodePenのサイトにGO。https://codepen.io/

 

Penをクリックし、コードを入力できる画面へ。

 

 

こんな感じで、コードを入力。

OKなら、右下のEmbedをクリックする。

 

 

すると、上記のような埋め込みコードが出現するのでコピーする。

 

これをはてなブログの記事にペーストすると… 

 


See the Pen
bJemrQ
by ekocha (@ekocha)
on CodePen.


ちゃんと記事に反映されましたーーー!やったーーー!

はてなブログの記事設定を「はてな記法」してないとダメみたいなので、そこだけ注意!