PC用グローバルナビゲーション

HTML5＆CSS3 html nav css CSS3

PC用グローバルナビゲーション　ver1　Global Navigation forPC ver1

HTML

<div class="gnav">
<ul id="g-nav" class="clear">
<li><a href="/" class="on">ホーム</a></li>
<li class="li-long"><a href="/aaa.html">aaa<a></li>
<li><a href="/bbb.html">bbb</a><li>
<li><a href="/ccc.html">ccc</a><li>
<li><a href="/ddd.html">ddd</a><li>
</ul>
</div><!-- /.gnav -->

CSS

#g-nav {
  width: 1020px;
  height: 60px;
  list-style-type: none;
  }
  
#g-nav li {
  width: 16%;　/*文字数によりwidthの％を設定*/
  height: 60px;
  float: left;
  text-align: center;
  }

#g-nav .li-long {
  width: 20%; /*文字数が多いときに使用*/
  }

#g-nav li a {
  width: auto;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  font-weight: bold;
  display: block;
  text-decoration: none;
  background: #93afcc;
  color: #fff;
  }

#g-nav li a:hover {
  color: #478acb;
  border-bottom: 5px solid #478acb;
  }

ルート相対パスが便利

HTML5＆CSS3 ルートパス 相対パス

f:id:webdesign-css-html-koyaman:20200524012947j:plain


ルート相対パスについて

ルート相対パスは、とても便利。デメリットはほとんどなく、メリットだらけ。
ルート相対パス使用したら、やめられない。

ルート相対パスを使うメリットとデメリット

f:id:webdesign-css-html-koyaman:20200521220818j:plain

ルート相対パスを使うメリット

  • どこにあるのかわかりやすい！
  • 誰が見てもわかる！
  • どの階層から呼び出ししても、同じパスでOK！
  • 大規模サイト・階層が深いサイトでルートを示しやすい！
  • 時間短縮！
  • パスの書き間違えがしにくい！

ルート相対パスを使うデメリット

  • ローカル環境では製作しにくい部分があること。

ルート相対パスはどんな時に使う？

  • サイト全体で使うもの【共通のheader、nav、sidebarなど】

ルート相対パスと相対パスの書き方の違いについて

f:id:webdesign-css-html-koyaman:20200524012855j:plain

ルート相対パスの書き方

どこのページでも（ルートディレクトリ ）最上層から書く

一番前に  /  スラッシュ！

1番上(トップページ）　/
/aaa/index.html
/image/sp/headerImg.png
/css/sp.css

相対パスとの違いは、どのパスにも一番前に  /  スラッシュ！

相対パスの書き方

下記の4つ。

  •  ../（上の階層）
  • ./aaa.html（同じ階層へのパス）

　　　↕どちらでもよい。

  • aaa.html（同じ階層へのパス→スラッシュから始まらない）
  • bbb/index.html（下の階層へのパス→スラッシュから始まらない）

私の相対パス～失敗談～

上司に相対パスで記述してと言われので、../../、aaa/bbb/などで記述していたが・・・

ルート相対パスのことを指して、「相対パス相対パス」って言っていたのだ。気づいたときは、全ページ相対パスで書いたあとだった。

navをコピペした後、毎回階層の確認をして、階層が違かったら書き換えをしていたのに・・・
っていうことにならないように、一応ルート相対パスか確認しよう。
相対パスでなく、ルート相対パスでいいなら、階層を気にすることなくどのページでも使えて、ほんとに楽ちん。

CSS疑似要素で文字や画像を挿入「before」と「after」

HTML5＆CSS3

f:id:webdesign-css-html-koyaman:20200524012936j:plain

CSS疑似要素のbeforeとafterで画像や文字を挿入する

SEOに関係ない文字や画像の挿入、PCサイトをスマホ対応させるときにhtmlを変更したくない時に。

beforeとafterで出来ること

  1. 指定した場所の前後に文字・画像を挿入できる。
  2. 挿入した文字を装飾！
  3. iconなど、見やすくするための画像挿入。
  4. id、class、pなど、ほとんどのhtmlタグに使用できる。

beforeとafterで出来ないこと

  1. 文字として認識されないのでSEOに必要な文字には、使用してはいけない。
  2. 出現させた文字や画像にリンクを張ることが出来ない。
  3. 画像の大きさを変更できない。

css疑似要素beforeとafter-参考サイト1

css疑似要素beforeとafterの基本の使い方をマスターできるWebサイト

yossense.com

CSSセレクタでスタイル適応　「nth-child」と「nth-of-type」

HTML5＆CSS3 CSS3

CSSセレクタをうまく使ってスタイルを適応させる

n(5)番目の要素のみ、tableで奇数行のみスタイルを適応させたい時、ある要素のここだけスタイルを適応させたいときに参考になった参考サイトを紹介いたします。

CSSセレクタ-参考サイト1

実用的なCSSセレクタが20個解りやすく解説されている
cssとsample付き

weboook.blog22.fc2.com

CSSセレクタ-参考サイト2

CSS３で増えたセレクタをまとめてある

weboook.blog22.fc2.com

CSSセレクタ-参考サイト3

CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違いを意味を理解して使えるようになりたい時

  1. n(5)番目の要素にスタイルを適応させるCSS３セレクタ（「nth-child」と「nth-of-type」）ややこしい「nth-child」と「nth-of-type」の両者の違いを解りやすく説明
  2. 上記以外「nth-child（odd）」「nth-child（2n+1）」などの入力方法が表にしてあり便利！
  3. 具体的な使用例あり
  • 表の色付け
  • floatを3つごとにclearする
  • リストの一番上の線を消す

weboook.blog22.fc2.com

 

 

 

CSSで文字装飾01

HTML5＆CSS3

CSSを使って文字を装飾の仕方

CSSでの文字装飾で参考になった参考サイトを紹介いたします。

CSSで文字装飾-参考サイト1

text-shadowで文字装飾の基本

raining.bear-life.com

CSSで文字装飾-参考サイト2

CSSとjsでできる文字装飾や文章を読みやすくする方法

commte.net

CSSで文字装飾-参考サイト3

使えるかっこいい　text-shadow sample サイト

kachibito.net

CSSで文字装飾-参考サイト４

シンプルでおしゃれな見出しに使えるCSSの文字装飾-sample50

www.nxworld.net

CSSで文字装飾-参考サイト5

先頭の文字を装飾するCSS　:first-letter

allabout.co.jp

CSSで文字装飾-参考サイト6

先頭文字装飾:first-letter でできること

http://zero.css-happylife.com/selectors/first-letter.shtml

CSSで文字装飾-参考サイト7

文字単位で別々に装飾するCSS

allabout.co.jp

CSSで文字装飾-参考サイト8

文字サイズの指定　どれにするか迷った時
px、em、%、remの違い

blog.karasuneko.com

CSSで文字装飾-参考サイト9

解りやすい2行目以降のCSSでの字下げ

www.nemuizo.com

CSSで文字装飾-参考サイト10

a要素の文字色指定方法

http://www.tagindex.com/stylesheet/link/color.html

 

 

 

 

 

 

 

プライバシーポリシー

プライバシーポリシーと免責事項

「web制作の時短メモ こやまん」の個人情報の利用目的

「web制作の時短メモ こやまん」では、お問い合わせ等、場合によってはお名前、メールアドレスをいただいております。

これらの個人情報は、メールで質問に回答する場合のみ利用させていただきます。それ以外の目的では使用いたしません。

「web制作の時短メモ こやまん」の個人情報の収集について

利用者は匿名のままで、「web制作の時短メモ こやまん」を自由に閲覧することが可能です。

利用者の個人情報を利用者の許可なく、「web制作の時短メモ こやまん」から第三者へ開示・共有することはありませんのでご安心ください。

「web制作の時短メモ こやまん」に掲載されている広告について

「web制作の時短メモ こやまん」では、第三者配信の広告サービス（Googleアドセンス、Amazonアソシエイトを利用しています。
このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、「web制作の時短メモ こやまん」や他サイトへのアクセスに関する情報『Cookie』(氏名、住所、メールアドレス、電話番号は含まれません)を使用することがあります。
またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、コチラをクリックしてご確認ください。

「web制作の時短メモ こやまん」が使用しているアクセス解析ツールについて

「web制作の時短メモ こやまん」では、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
このGoogleアナリティクスは、トラフィックデータの収集のためにCookieを使用しています。
このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ます。お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはコチラ、またはコチラをクリックしてください。

「web制作の時短メモ こやまん」へのコメントについて

「web制作の時短メモ こやまん」では、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。
また、メールアドレスとURLの入力に関しては、任意となっています。
全てのコメントは「web制作の時短メモ こやまん」の管理者が事前にその内容を確認し、承認した上での掲載となります。あらかじめご了承下さい。
加えて、次の各号に掲げる内容を含むコメントは「web制作の時短メモ こやまん」の管理人の裁量によって承認せず、削除する事があります。

  • 特定の自然人または法人を誹謗し、中傷するもの。
  • 極度にわいせつな内容を含むもの。
  • 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
  • その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

「web制作の時短メモ こやまん」の免責事項

「web制作の時短メモ こやまん」に掲載されている情報の正確さについて可能な限り努力をしていますが、その正確性や適切性に問題がある場合、告知無しに情報を変更・削除する事があります。

利用者は、「web制作の時短メモ こやまん」を閲覧し、その内容を参照したことによって何かしらの損害を被った場合でも、「web制作の時短メモ こやまん」の管理者は責任を負いません。

「web制作の時短メモ こやまん」からリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービスなどについて一切の責任を負いません。

「web制作の時短メモ こやまん」以外のウェブサイトの内容および、個人情報の保護に関しても、「web制作の時短メモ こやまん」の管理者は責任を負いません。

制定日：2020年4月25日