ページの特定の場所にリンクする | Link to a specific location on the page
<a>タグのリンクは、移動先のHTMLファイルだけでなく、そのHTML内の特定の場所を指定することもできます。リンク先に指定できるのは、リンク先のHTML内にあるid属性が付いたタグです。<a>タグのhref属性には、パスに続けて「シャープ記号(#)+id属性の値」という内容で記述します。 | The link in the tag can specify a specific location in the HTML as well as the destination HTML file. You can specify a tag with the id attribute in the HTML of the link destination. In the href attribute of the tag, describe the path followed by the content "sharp sign (#) + id attribute value".
試しに自身のブログのtweet、その2021年4月22日の場所に行くようにしてみますね。| I'll try to go to the tweet on my blog, the place on April 22, 2021.
こちらからどうぞ
上記のリンクには<a href="リンクしたいファイルのパス#link">としており、リンク先には<li id="link">としております。
CSS、主なセレクタと書き方 | CSS, main selectors and how to write
セレクタの種類
HTML内の、同じタグ名の要素をすべて選択する。| Select all elements with the same tag name in HTML.
P {スタイル}
<p>コミュニケーション</p>
全ての要素を選択してスタイルを適用する。ページ全体のおおまかな設定をするのに使われます。| Select all the elements and apply the style. It is used to make rough settings for the entire page.
*{スタイル｝
「クラス名」と同じclass属性を持つ要素をすべて選択します。| Select all elements that have the same class attribute as Class Name.
.forever {スタイル}
<p class="forever">永遠に</p>
セレクタで指定した「id名」と同じid属性を持つ要素を選択します。id属性に付けるid名は１つのHTML内で一度しか使えないことから、結果的にid セレクタで選択できる要素は1つだけになります。| Select the element that has the same id attribute as the "id name" specified in the selector. Since the id name given to the id attribute can be used only once in one HTML, as a result id Only one element can be selected with the selector.
#running {スタイル}
<h1 id="running">ウオーキング</h1>
ある要素が特定の状態にあるときだけ選択する特殊なセレクタです。たとえばリンクの<a>要素には、そのリンクにマウスポインタが「乗っている状態」、マウスポインタが「押された状態」などがあります。疑似クラスを使うと、ある要素がこうした特定の状態のときだけ、スタイルを適用することができるようになります。| A special selector that selects only when an element is in a particular state. For example, the <a> element of a link may have the mouse pointer "over" on the link, the mouse pointer "pressed", and so on. Pseudo-classes allow styles to be applied only when an element is in these particular states.
マウスポインタが載っているときだけスタイルを適用。| Apply style only when the mouse pointer is over it.
a:hover {スタイル}
マウスボタンが押されているときだけ | Only when the mouse button is pressed
a:active {スタイル}
特定の親要素に含まれる子要素、および子孫要素を選択するのが子孫セレクタです。複数のセレクタを組み合わせて、１つの子孫セレクタを作ります。組み合わせる個々のセレクタとセレクタの間は半角スペースで区切ります。| The descendant selector selects the child elements and descendant elements contained in a specific parent element. Combine multiple selectors to create one descendant selector. Separate the individual selectors to be combined with a single-byte space.
.nav li {スタイル}
<nav class="nav">
<ul>
<li>パソコン</li>
<li>テレビ</li>
<li>音楽</li>
</ul>
</nav>
<ul>
<li>パソコン</li>
<li>テレビ</li>
<li>音楽</li>
</ul>
</nav>
一つ一つのセレクタをカンマ(,)で区切ります。
th, td {スタイル}
<table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</table>
この本を参考に学びました。HTML,CSSの基本を学びながらサイトを作っていきます。 この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが1,000円程ならコスパよく、買っておいてよかったと満足してます。
もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.
-->
キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.
オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.
ぺージの先頭に戻る(Return to top of page)
©2020年9月 Challenge programming