マガジンのカバー画像

コーディング勉強メモ

9
コーディングをしている中で自分で調べたことをまとめています。
運営しているクリエイター

記事一覧

【勉強メモ】jQuery

【勉強メモ】jQuery

jQueryをつける要素はidをつけるのが良い!

クラスでもできなくはないけど、繰り返し使っちゃうから特定の要素にだけつけたいときはid。
https://code-step.com/extra6-code/

attr()メソッド

HTMLの属性を取得したり変更できる!
記述方法:対象要素.attr( 属性, (変更する値))
https://www.sejuku.net/blog/3740

もっとみる

【勉強メモ】 box-sizingと擬似要素

1. box-sizing2.指定できる値content-box : paddingとborderのサイズを含めない ※初期値
border-box  :paddingとborderのサイズを含める
inherit    : 親要素の値を継承する

3.使い方要素に個別に設定すると、逆に「効かない」原因となることも。
記述ミスを減らすためにも、cssの冒頭のユニバーサルセレクタとhtmlセレクタ

もっとみる
【勉強メモ】widthの分割 & 高さを固定した画像の伸縮

【勉強メモ】widthの分割 & 高さを固定した画像の伸縮

widthの分割割り切れる時は%でもいいかも! width: 50%;
同じ大きさで画像を3つ横並べしたい時に便利!
下の画像の伸縮と合わせて使える。

高さを固定した画像の伸縮これを使うと、指定の高さのサイズに合わせて中の画像が伸び縮みする。
フォトショのマスク状態の写真みたいな。

width とheightを逆にする(height:100%、width:指定)とwidthが指定サイズで固定

もっとみる
【勉強メモ】ページ構造を作るタグ

【勉強メモ】ページ構造を作るタグ

アウトラインとセクションページを構成するタグheader

ヘッダーを明示。
アウトラインなし。

nav(ナビ)

ナビゲーションリンクであることを明示。

main

主要コンテンツであることを明示。
HTML内に1つだけしか置けない。
アウトラインに影響なし。

section

文章のまとまりを明示。
子要素に見出し(h1〜h6)を含む。
アウトラインが生まれる。

article(アーテ

もっとみる
コーディングやらかし防止リスト!!

コーディングやらかし防止リスト!!

HTML1.CSSのリンク設定

<link rel="stylesheet" href="css/style.css">
hrefのリンクに「css/」をつけること!!!

2.ヘッダーロゴにはaタグ

ロゴもリンクにしておいたらgood!

3.セクション名は共通仕様

見出し(セクション名)は共通しようとして同じCSSにする。
つまり、クラス名も共通のものをつける。class="sectio

もっとみる
【勉強メモ】HTML  aタグ

【勉強メモ】HTML aタグ

基本aタグはリンクを指定するHTMLタグ。

「a」は船のいかりを意味する「Anchor(アンカー)」の頭文字が由来。

記述 → <a href="(リンク先のURL)">テキストサンプル</a>

アンカーテキストとは、aタグで囲ったテキスト部分のこと

使い方1. 同じタブのリンク先ページへ飛ぶ

<a href="(リンク先のURL)">アンカーテキスト</a>

2. 別タブのリンク先ペ

もっとみる
【勉強メモ】HTML dl dt ddタグ

【勉強メモ】HTML dl dt ddタグ

基本※以前は「定義リスト」だった。

使い方<dl><dt> ソフトドリンク</dt><dd>一般の飲料</dd><dt> お酒</dt><dd>アルコール入り飲料</dd></dl>引用:https://ferret-plus.com/5063

dlが親でdtとddが子。dlで括ってdt(用語)とdd(説明)が交互にくる。

dtとddは必ず一対一でなくて良い。

dlの中にdlを入れられる。

もっとみる
【勉強メモ】CSS 上下左右中央揃え

【勉強メモ】CSS 上下左右中央揃え

基本の3パターン★前提
インライン(コンテンツ)要素=ブロックの中身
ブロックレベル=外枠
フレックスボックス=別の考え方
  →フレックスコンテナ(親)の中にフレックスアイテム(子)がある

インライン要素左右中央 text-align: center;
上下中央 vertical-align: middle;
を中央揃えにしたいインライン要素につける。
ブロックの中でインラインコンテンツが中央

もっとみる