Adsense)CSSCSS毎にブラウザ表示の差異を解消する方法。上達しない理由とは?(実録)Allレスポンシブデザインを作らないといけない訳。2019.10.01スポンサーリンクドットインストールのCSS入門(全17回)の講座内容のポイントをまとめてみました。これは前回作っていたプロフィールサイトの続きです。プロフィールサイトを完成させよう・出来上がったソースコードの公開このCSS入門ではホームページのスタイルを整えていくレッスンです。href=”cssあるルートを指定”>タグを使い別シートとして抜き出す方法について説明しています。デベロッパーツールを使ってみようここでは、デベロッパーツールの使い方について説明しています。右クリックし、検証を押すとデベロッパーツールが開きます。Elementsを見ると書いたindex.htmlの中身、Stylesでstyle.cssの中身が確認できます。簡単に開くことができます。色の表現方法を学ぼうここでは、色の表現方法について説明しています。color:色名;、color:rgb(赤,緑,青)、color:#16進数。いうような表現方法があります。rgb(0,255,0)で色を表現した時、緑しかはいっていないため「山田太郎」が緑になっていると思います。CSSのBoxモデルを確認してみようここでは、CSSのBoxモデルについて確認していきます。HTML一つ一つの要素は箱の中に入っている感じになっています。margin、border、padding、<タグ>というふうな構成になっており、幅の調整はこのmarginやpaddingを使います。Boxをわかりやすくするために色をつけます。-colorは省略しても構いません。45px(↑、→、↓、←);という指定のやり方、また全体のmarginの設定はmargin:◯px;で指定できます。いうものを使用することがわかりました。文字の距離をあけていることがわかります。marginと変わりません。⇄);の指定をしてあげることができます。タグにこれを効かせてください。いうコードになります。背景画像の設定をしようここでは、背景画像の設定のやり方について説明しています。この際、CSSファイルの直下にstyle.cssがありその上にimgファイルがありその中に、使いたい画像ファイルがあるのでその絶対パスを指定します。やり方について学ぶことができました。marginの相殺について理解しようここでは、marginの相殺について説明されているのですが、<h1>タグの下の余白と<p>タグの上の余白がかぶっていることがわかるかと思います。この場合、幅の広いほうを残すという仕様になっていてこの現象をmarginの相殺とよぶみたいです。学ぶことができました。border-radiusを使ってみようここでは、border-radiusの使用方法を説明しています。border-radiusを指定してあげることにより要素の角を丸くすることができます。これは、50%で角を丸くしたものです。HTMLのタグに名前を(class=””)をつけることでcssをいじることができるようになる!ということがわかりました。border-radiusは細かく角を丸めることもできます。box-shadowで影をつけようここでは、box-shadowで影をつけるということで影の付け方と要素に線を引く方法について説明してありました。幅、線、色;で指定することができます。;で指定することができます。marginにautoを指定してみようここでは、marginにautoを指定し余白を均等にわりふる設定をしていきました。フッターのリンクを完成させようここでは、フッターのリンクを完成させていきました。使用してアイコン画像にマウスが乗ったらアイコン画像の透明度を変化させるというものでした。以下の画像にマウスをあわせてみてください。floatで要素の位置を変えてみようここでは、floatで要素の位置を変えるということをしていきました。プロフィールサイトを完成させようここでは、プロフィールサイトの完成をさせていきました。前回のHTML入門(全15回)と今回のCSS入門(全17回)でようやく1つのプロフィールサイトが仕上がりました。なんとなく、ホームページの作り方がわかったかと思います。今回作ったプロフィールサイトの完成版は以下からダウンロードできるので、ダウンロードして中身を確認してみてください。