TomoyukiProgate(プロゲート)でHTML&CSSの学習メモこんにちは。Tomoyuki(@tomoyuki65)です。2019年からまたプログラミングにも力を入れようと決めたので、Progate(プロゲート)でRubyプログラミングやってみた!で書いた通り、Progateという学習サイトで勉強しています。その中で、HTMLとCSSの部分において、忘れがちだけど覚えておきたいことを、この記事に記録として残していきます。</footer></body>ヘッダーとフッターのみよく使われるため、専用のタグがある。ブロック要素は改行される例えばタグ「div」はブロック要素のため改行されて縦に並ぶが、タグ「a」はブロック要素ではないので改行されない。ブロック要素を横並びにするには?ブロック要素を横並びにするには、CSSで「float」プロパティを設定する。通常、リストでは以下のように左にマークが表示される。none;」を設定する。文字の下に線を引くには、CSSで「border」プロパティを設定する。背景画像を設定するには、CSSで「background-image」プロパティを設定する。cover;」プロパティを設定する。auto;」プロパティを設定する。要素を透過させるには、CSSで「opacity」プロパティを設定する。透過度は「0〜1」の範囲で指定可能。「opacity」は要素全体を透過してしまう。背景画像だけ透過したい場合、CSSで「background-color」プロパティを設定する。文字の間隔を指定するには、CSSで「letter-spacing」プロパティを設定する。要素の種類にはブロック、インラインブロック、インラインがあるが、要素の種類を変更するには、CSSで「display」プロパティを設定する。種類は、「block」、「inline-block」、「inline」で指定する。クラス名は複数指定可能divタグなどでクラス名を付ける場合があるが、クラス名は半角スペースで区切れば複数指定可能。blue”」カーソルが乗った時の状態をCSSで設定する方法カーソルが乗った時の状態をCSSで設定するには、「セレクタ:hover」を使う。要素の角を丸めるには、CSSで「border-radius」プロパティを設定する。10px」インライン要素、インラインブロック要素の中央配置インライン要素などを中央配置するには、CSSで「text-align」プロパティを設定する。Awesome」というサイトを利用する。Awesome」のCSSファイルを読み込む。fa-twitter”></span>」のようにしてアイコンを表示。カーソルを乗せた時にアニメーションを使いたい場合カーソルを乗せた時にアニメーションを使うには、「transition」プロパティを使う。1s;」この時、hoverと一緒に使うこと。行間の指定や、要素を縦方向に中央配置するには、CSSで「line-height」プロパティを設定する。要素のクリック範囲を広げる例えばaタグでボタンを作った場合はクリック範囲が狭いが、ブロック要素に変更すれば範囲が広がる。文字の太さを設定する文字の太さを設定するには、CSSで「font-weight」プロパティを設定する。normal;」を設定する。親要素内の子要素を均等に横に並べるには、「width」プロパティで%を使う。要素同士を重ねるには、CSSで「position」プロパティを使う。1px;「position」プロパティでは、基準位置(通常は画面左上)から、レイアウトを指定して重ねることが可能。relative;」プロパティを使う。absolute;」で位置を指定すれば重ねることが可能。要素に影をつけるには、CSSで「box-shadow」プロパティを使う。red;」カーソルの種類を変更する方法カーソルの種類を変更するには、CSSで「cursor」プロパティを設定する。pointer;」クリック時の状態を変化させる方法ボタンを作る場合など、クリック時の状態を変化させたい場合は、「セレクタ:active」を使う。fixed;」プロパティを使う。要素を固定した場合、要素の重なり順に注意が必要。要素の重なり順を変更するには、「z-index」プロパティを使う。数値が大きいほど前面に表示される。レスポンシブデザインにするには?最近はタブレットやスマホの画面サイズに対応するため、レスポンシブデザインは必須。そんなレスポンシブデザインにするには、CSSでメディアクエリを設定する。最大幅が1000px以下の時にCSSを適用するには次の通り。*/}メディアクエリの条件は、ブレイクポイントと呼び、スマホは670px以下、タブレットは670px〜1000pxを想定する。border-box;」を設定する。border」だが、border-boxなら要素の幅はwidthになる。以下のように、要素全体に設定する。}vewportを設定するタブレットやスマホでメディアクエリを有効にするには、<head>タグ内にvewportの設定が必要。initial-scale=1.0′′>」レスポンシブデザイン用のCSSは分けるレスポンシブデザイン用のCSS「responsive.css」とし、通常のCSSとは分けて記述する。レスポンシブデザイン用のCSS「responsive.css」をHTMLで読み込む際には、vewportより後に記述すること。floatと親要素の高さ通常は親要素の高さは子要素を含む高さになるが、子要素が全てfloatの時に親要素の高さが0になる性質があるのに注意。left;」でfloatを解除するのがよく使うテクニック。画面サイズが大きい場合は?CSSで「max-width」プロパティを設定し、画面幅の上限を指定する。例としては以下の通り。*/}スマホの場合のヘッダーメニュースマホの場合、ヘッダーメニューが表示しきれないため、アイコン「三のようなやつ」に変更する。block;」させる。menu-icon”></span>」を設定し、CSSでレイアウトを整える。最後にプログラミングは暗記する必要はありませんが、引き出しを増やす必要はあります。「そういえばこのやり方前に勉強したな・・」と思った時に、どこを調べればその情報が載っているかを知っていることが大事です。この記事も、そんな使い方をする時に参考になれば幸いです。最新の記事Tomoyuki元SE。30歳を目前に仕事や将来に悩み、Web業界へ転職を目指すも失敗。ブログでは大好きなパソコン情報をはじめ、様々な役立つ情報を発信中。次はプロゲーマーとしても活動するため、ゲーム練習と合わせて攻略記事を書いたり、YouTubeでも活動中。2020年2月5日プログラミングシェアはこちらからツイートシェアはてブLINEPocketfeedlyゲーミングPCならBTO最近はゲーミングPCを購入する人も増えましたが、「どう選べばいいの?」という人も多いですよね。初心者が失敗しない選び方はこちら資産運用始めなくて大丈夫ですか?日本ではお金の教育が一切無いので、資産運用している人はまだ少ないです。資産運用で結果を出すには膨大な時間が必要で、早く始めないと損なんです。ウェルスナビなら誰でも簡単に資産運用が始められるので、一度検討してみてはいかがでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Chrome検証ツールの学習メモ【お得】ファミマでPayPay(ペイペイ)使ってみた!RECOMMENDこちらの記事も人気です。Flowとは?GitHubを利用した開発フローを覚えよう!管理人:Tomoyukiこんにちは。Tomoyukiです。当ブログはプログラミングやパソコン関連情報をはじめ、自分の好きなことや、得意なことを仕事にして生きていくための方法に関する情報を発信していきます。