今夜作業記録 メインビュー コーディング

アフターコロナに向けて、自粛から少しずつ生活が動き出してきましたね。

子供たちも週3で保育園に行けるようになり、いつも通り『いきたくない』とぐずられ、『ベビーカーなんかのらねぇ』と泣きさけぶのをなだめながら、説得しながら、時には怒ってしまいながら・・・の生活が戻ってきました。

会社にもいくようになり、昼間にまとめてお仕事ができるようになった分、深夜の「自分時間」も戻りつつあります。

コーディングはスポーツ

monitor showing C++

コーダーをメインにしているかたとお話をする機会があり、コーディングのあれこれやお仕事についてを伺いました。

その中で、「コーディングを早く習得するには?」という質問をさせていただきました。

お答えは

「トレーニングあるのみ!コーディングはスポーツと一緒です!」

おぉ!わかりやすい!😳

中高とテニス部だった私は、「お!部活と一緒ってことね!」と十数年前・・・いや20年近く前のことを思い出し、なんだかすっと自分の中で納得がいくお言葉をいただいたのでした。

せっかく自分時間ができてきたので、今後のSampleにもなるような物をつくりながら、コーディングをしていこうと思いたち、今夜はメインビュー:ヒーローイメージと呼ばれる部分のコーディングと、少しメニューバーを復習がてらやりました。

憧れの画像からはみ出た部分の文字色の切り替え

ヒーローイメージサンプル

例えばこのサイトのような“画像からはみ出している文字と画像内の色を変えて表示”

ちょっと憧れてた表示方法に挑戦してみました♡

参考サイト

今回はこちらのサイトを参考に挑戦してみます。

CSSだけで「画像に重ねた文字のはみ出し部分」のテキスト色を変える方法

他CSSに関して

https://developer.mozilla.org/ja/docs/Web/CSS/white-space

 

完成イメージ

コーディング練習完成イメージ

今回のコーディングの完成イメージはこちらです。

  • 画像内と画像外の文字色の切り替え
  • メニューバーの固定

久しぶりのコーディングにかなりてこづってしまいました・・

HTML

<body>
※まずはメニューバーです♡
リンク先ページがないので、#で代用しています。

<header class=”header”>
 <nav class=”gnav”>
  <ul class=”inner”>
   <li class=”nav”><a href=”#”>home</a></li>
   <li class=”nav”><a href=”#”>concept</a></li>
   <li class=”nav”><a href=”#”>price</a></li>
   <li class=”nav”><a href=”#”>neilists</a></li>
   <li class=”nav”><a href=”#”>contact</a></li>
  </ul> 
 </nav>
</header>
※画像と文字の部分です♡
<div class=”outer”>
  <h1 class=”black”>
   大人ハワイ Luxury Hawaii
   <br/> Welcome to nail salon
   <br/> be yourself, be beautiful
  </h1>
  <div class=”white”></div>
<div>
</body>

CSS

こちらは、過去に作ったメニューバーのCSSをひぱって来たのと、先ほどの参考サイトから、写真を背景にしたりとアレンジしています。

.inner{
display: flex;    まずメニュー項目を横並びにする
list-style: none; liタグを使用しているのでデフォルトは文字の左横に・が入るため、・を非表示に
justify-content: center; 左右真ん中にする
align-items: center; 上下真ん中にする
height: 100px; メニューバーの高さを決める
width: 100%; メニューバーの幅の大きさを決める
position: fixed; メニューバーが常に表示されるように固定する
z-index: 50; スクロールした時にメニューバーが常に一番上に来るようにする 数字は大きければOK
margin: 0 auto; マージンの設定
background-color: rgb(253,253,253,0.8); 背景色の設定(今回は白背景を透明度80%で再現)
}
.nav{
padding:02%; 項目間の余白の設定
}
/**********
画像からはみ出した文字色を変える
***********/
.outer {
position:relative; 背景画像の位置を固定
background-image: url(img2.png); 背景画像を選択
background-repeat: no-repeat; 背景画像繰り返しをしない
background-size: cover;  縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
height:700px;  背景要素の高さの指定
width: 70%; 背景要素の幅の指定
top: 100px; 背景画像のtopからの位置を指定
}
.black{
position:absolute; 表示位置の指定
right: -350px; テキストの表示位置の指定
top: 150px; テキストの表示位置の指定
font-size: 50px; フォントサイズの指定
color:#000; 文字色の指定
z-index:-1; 要素が一番下になるように位置の指定
margin: 0;
}
.white{
position:relative; 表示位置の指定
width:100%; 背景要素の幅の指定
height:800px; 背景要素の高さの指定
overflow:hidden;  ボックスからはみ出した内容を非表示
}
.white::after{
position:absolute; 表示位置の指定
right: -350px; テキストの表示位置の指定
top: 150px; テキストの表示位置の指定
font-size: 50px; 文字の大きさ
content:”大人ハワイ Luxury Hawaii\A Welcome to nail salon\A be yourself, be beautiful“;
white-space: pre; 連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。
font-weight:bold; 文字の太さの指定
color:white; 文字色の指定
z-index:1; 背景画像・テキスト黒より上に表示されるように位置を指定する
}

今回の反省点

body of water near mountain during sunrise

今回てこづったところは・・・
  • スタイルシートの読み込みを忘れる
  • 文字の表示位置がずれる
  • position:fixed; を書くとメニューバーが消える・・・

なんで〜と言いながら、グーグル先生を頼りにコツコツ頑張った自分を褒めたい・・・

ふりかえりの解決策は・・・

 

  • スタイルシートの読み込み

HTMLに <link rel=”stylesheet”href=”style.css”> とかく。Linkっていうのを忘れてました・・・

  • 文字の表示位置がずれる

色々とCSSをいじってみたら治った!が、正直な感想なのですが・・・

HTMLに入力したテキストとCSSに入力したContentのテキストの文章が違う(大文字小文字など)ことに気づくのが遅かったような・・・

  • position:fixed; を書くとメニューバーが消える・・・

ヒーローイメージがメニューバーの下に入り込んでしまうので、ヒーローイメージの位置を固定。

メニューバーの要素の大きさを指定したところ解消しました。

 

\ ←このバックスラッシュを出すのにもかなり四苦八苦しました・・・w
macなら『option+¥』

わからないことたくさん!

quetionsだらけなシャニー

参考サイトをみていただければより詳しいことがわかります!笑
って、私は、いまだに雰囲気でコーディングをしております。
position relative, abusolute, 擬似要素に関してはまだまだ理解不足です。
トレーニングだと思って続けていくうちに慣れ?ていくのかなぁと。自分に期待しています。
今は、思った通り表示されることがうれしく・たのしく、ブツブツ言いながらコーディングしています 笑
もっとスマートなCSS HTMLの書き方はあると思うので、日々鍛錬していきます!