🔥The 9th Round of Easy Loan, Earn $40 Reward is in progress❗️ ⏰ Promotion Period: January 15th - Feburary 15th, 2025 👉 Register now and check more details at gate.io/campaigns/358

レスポンシブデザインは、レイアウトが変わると共に見た目は変化していきますが、どのようなサイズでも同じ物が同じように伝わるように、デザインを作っていく必要があります。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

width:fit-content;と指定すると、要素の横幅が中の要素に沿うように変化します。 margin:auto;と併用すると、１行未満の文字は中央に揃うようになります。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

複雑な表組み等、無理やりtableで作成するよりも表をそのままpdfでダウンロードさせたほうが伝わる場合もあります。 見る人が一番見やすい方法であればダウンロードさせたほうが良い場合もあります。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

line-heightは文字の上下に適用されます。 画像等と横のラインを綺麗に合わせたい場合は、テキストをline-heightの高さの半分だけ上に移動させます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

margin:10px 0 0 10px等の指定方法は上から時計回りと覚えておくと何処に適用されているのかわかりやすくなります。 borderも同じです。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

<header>や<footer>は全体のヘッダやフッタのためだけではなく、 各要素のヘッダやフッタとして<article>や<section>の中でも使用することが出来ます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

<section>は基本的なセクションの区切り、<article>はそれ自体が単体の記事として成立する要素です。 <section>や<article>には必ず<h1>～<h6>の見出しが入ります。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

visibility:hiddenは、見えなくなるだけで要素自体は存在しています。 display:noneは、要素の存在自体も消えてしまいます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

htmlのタグにlang属性を使用すると、その要素だけ別の言語設定を設定することが出来ます。 翻訳の原文等に<div lang="en">等と使用するとその部分だけ英語と認識されます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

HTMLをシンプルな作りにするとCSSのほうが忙しくなります。 CSSをシンプルな作りにするとHTML側に大量のclassを書き込むことになります。 どの様なバランスにするのかは一番最初に決めておくことが重要です。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

tableのセルとセルの間を線1本で表示したい場合は　border-collapse:collapse　と設定します。 基本状態のborder-collapse: separateではセルとセルの間に隙間が空いたままになります。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

現在でもfloatは文章に画像を回り込ませる用途に使用します。 ただし、昔のように要素を並べる用途では使うことはありません。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

before要素にmargin-left:-2rem等のcssを入れた場合本体側の要素も左に2rem移動しますが、<br>等で改行すると元の位置に戻ります。 before要素だけ左に動かしたい場合は、position:absoluteなどを使用します。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

<div>自体はHTML構造に対して何の意味も持ちません。単純に装飾を行うためだけの要素です。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

htmlのタグにlang属性を使用すると、その要素だけ別の言語設定を設定することが出来ます。 翻訳の原文等に<div lang="en">等と使用するとその部分だけ英語と認識されます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

fixedで固定された要素でページ内リンクの飛び先が隠れてしまう場合、margin-top:-○○px、padding-top:○○pxと 打ち消し合うように指定する事で、ページ内リンクの飛ぶ位置を変更することが出来ます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

<b>はただの太字ですが、<strong>要素は文章の強調として使用します。 font-weight:bold等の太字は見た目だけの話で、文章の強調として単語を強調する時は<strong>を使います。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

<aside>は現在のページにおける補足や補助のような、メインと間接的に関連しているサブ要素として使用します。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

subやsup、ruby等を文章中に使用すると、通常の行よりも行間が広がってしまう場合があります。 場合によっては、テキスト全体のレイアウト調整が必要になるかもしれません。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ

nth-childやnth-of-typeはodd、evenでの指定が可能です。 縞模様のように色を繰り返したりする用途に使えます。 #Webデザイン #ホームページ制作 #Webデザイナー #WEB一言メモ