21.07.16

学習内容

1.helbakサイトの真似

210716 helbak実習コード
https://helbak.com/
リンクサイトのレイアウトを真似た実習をしました.実際に使用した画像をインポートすると著作権の問題が発生するので注意してください.
このサイトは、まずモバイル画面を作成し、メディア検索でPCバージョンを作成するサイトです.

かつては適応型だった子どもgaoとは異なり、反応型サイトです.

メディアクエリーを使用する場合は、headタグにそのタグ

を記入する必要があります.

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

画像にはjpg,pngのほかにsvgがある.開発者ツールでは、svgラベルのコードをコピーした後、私の実験画面に入れることもできますが、著作権の問題

に注意してください.
▶cssからdepartに持ち込まなければならないコード

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	overflow-x: hidden;
	font-family: sans-serif;
	color: #585858;
}

li	{
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	vertical-align: middle;
}

画像では、vertical-align: middle;は、底部の空白を除去するために使用される.

aタグは行内特性を有し、nav,ulはブロック特性を有する(divなどのブロック特性のデフォルト値はwidth 100%).

子供にfloatを書いてもらう場合、親のラベルに子供の高さを認識させたい場合は、overflow: hidden;->は、対応する実践では、header空間を移動する高さ値で使用されます.

text-alignは、行内または行内ブロックにのみ適用されます.imgタグはinline blockの性質を有し、使用可能である.

▶y軸中央揃え方法(実際の作業でよく使われる)

position: relative;

top: 50%;
transform: translateY(-50%);

- top을 사용하기 위해 position: relative;를 사용.

1em = 16px

モバイル画面では、指のクリック範囲が不足しているため、ロゴaタグのクリック範囲を拡大する必要があります.PCでは、対応するロゴだけをクリックしたほうがいいです.他の場所をクリックすると思いがけないことが起こるからです.

position: absolute;を使用すると幅値が正しく認識されません.したがってwidth 100%またはpxを用いて空間サイズを明確に規定しなければならない.

レイアウトで左右に配置するときにfloatやflexなどのcss属性を使うことを学びましたが、他のアイデアで左右に配置してソートすることもできます.

mainラベルはrole="main"と一緒に書きます.

articleラベルは、この分野を表すタイトルが必要です!

挿入された画像サイズに空間サイズを近似します.

複数のクラスを作成し、ロールを区別

クラスパス選択方法

例

1.例2
例1の例2

例

1.例2
例1から例1を選択します.例1には例2というクラスがあります.
->私個人の考えですが、1では例1に例2が含まれていますが、2では例1と例2が並んでいる感じです.
->スペースが重要です.

の練習では、高さ値が明確に表示されている場合にのみ、デプロイ時に混同されません.スペースの大きさをよくしなければなりません.

2.業務テクニック

idフィーチャー

の複数の属性値を入れることができるクラスとは異なり、1つの属性値のみを含む必要があります.

のドキュメントに同じidを持つことはできません.

idは

linkのhrefプロパティに入れることができます.(hrefにurlアドレス、ドキュメントファイル名+idを書くこともできますが、クラスは不可能です)、クリックしてどこに行くか分からない場合は、id記号#をhref属性値として入力します.

略語

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

この3つのコードを覚えておけばいいです.
▶授業中の実務ヒント!
まずcssで特定のロールを担当するクラスを設定し、htmlに追加します.コードが少ないため、導入が簡単で、メンテナンスも容易です.

자주 쓰이는 코드들

.m-b-10 {
	margin-bottom: 10px;
} 

.p-b-100 {
	padding-bottom: 100px;
}

<어떤 css 쓰는지 축약어 - 각각의 방향 – 해당 수치> 순서로 적기

안의 숫자와 위치만 변경해서 쓰면 된다.
해당 코드들은 딱 적혀있는 역할만 한다.
해당 클래스 명을 html에서 작성해서 사용하면 된다.

難点

初めて受講した時は、ずっと階層や高さについての部分が出ていて、少し混乱していましたが、理解できました.

解決策

先に外に出て進度を聞いて、最初は少し混乱していましたが、大体理解して通り過ぎて、2回講座を聞いて、2回目は完全に理解しました.これらを見ているだけで、勉強を繰り返すことが大切だということがわかります.

に感銘を与える

今日は2回レッスンを受けて、位置・縦横関係の内容を理解しましたが、実務でこれらの内容を調整する方法を身につけておくと気持ちがいいです.今よく理解していなければ、一人でコードを書くときにコードを書くことはできません.
そして、前回は上端部分のみフォローしていたhelbakサイトが、今日で全部できて、いい感じです.今日学んだことの中で、講師も独特の頭部右側領域にfloatを使わないと言っていましたが、左:50%;とtop:0;特に『聖書』を利用してアップしたものが印象的でした.