JOB CHANGE DIARY ~OLしながらWebデザイナーへ~ 

ただのOLから在宅Webデザイナーを夢見て日々勉強中。

擬似要素を活用するための最低限のルール

 

えびこです!🍤

 

今日苦戦したこと、擬似要素です!

 

 

擬似要素とは

CSSでHTMLもどきを作れる要素。

SEO対策の為に、関係ない要素をHTMLに書いて汚したくない時に有効。

 

よく出てくる要素は以下4つ?

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

 

使い方

1. CSSスタイルシートにてタグ名、id名、class名の直後に書く。

#ebiko:after {}

 

2. contentを指定する。

#ebiko:after {

     content: "ちゃん";

}

contentを空欄でもいいから指定してあげないと、表示されない。

幅や高さを調整したい時

幅や高さをいじりたい時、このまま入力してもインライン要素だから効果がない。

display: blockやinline-blockの指定が必須。

 

位置を調整したい時

やったことないけど、タグをposition: relative;指定して、擬似要素にposition: absolute;を指定すれば自由に調整できる。

 

:(コロン)の数

CSS2ではコロン1個、CSS3ではコロン2個が決まり。

CSS3未対応のブラウザのためにコロン1個にしておくのが無難。ゆくゆくはCSS3対応ブラウザが増えていき、コロン2個になる。

 

有効な活用方法

saruwakakun.com

このページ、Tech Academy最終課題制作中にも非常にお世話になったので引用!(ハショリ)

 

今模写しているサイトは、ロゴや、メッセージを書いた画像はHTMLに書いていて、各セクションのアイコン(画像)挿入には擬似要素が使われています。

 

background-image、すごく苦手意識を持っているんですが、頻繁に使われているので我慢して勉強しないとですね。

 

まとめ(個人的に今後活用していきたい場面)

HTMLに書くべきことを擬似要素で書かない、ということを心がけていればよさそう。

 

1文字目の色を変えたり、大きくしたりするのにわざわざspanタグで挟んでCSSでデザイン指定していたんですが、擬似要素を積極的に使っていけばもっとスッキリしたコーディングができるようになるのかな?

 

見出しのアイコンにも積極的に活用して、慣れたいですね。

 

 

 

今日もまたひとつ勉強になりました〜〜

 

 

参考にさせていただいた記事:

【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 & 確認方法 - Qiita

CSSの疑似要素とは?beforeとafterの使い方まとめ

text-align: center; を設定しても視覚的にセンターじゃない時の微調整

どうも!えびこです! 

現在、せっせとあるランディングページの模写を行っています!なるべくデベロッパツールを使わずに模写することを心がけていますが、どうしても分からない時にカンニングしています😂

 

今日出会ったプロパティは"text-indent"です。

 

出会ったとか言ってますが、検索した時の↓の画面を見て記事にしようと心に決めました

Image from Gyazo

🍤「めっちゃ調べてるゥ〜〜!!全く覚えていない!!」

・・・そんなことの繰り返しです。

ちょっとサボっていたんですが本来考えていた学びメモを積極的に残していきます・・・!

 

 

ぶち当たった問題

 まず、お手本

Image from Gyazo

 

 

ぶち当たった問題はずばり、「左端の"1"という文字の配置」です。

 

お手本を見て、親要素に text-align: center; があるから子要素は配置気にせんでええや〜♪と呑気にコーディング。

<HTML>

<span class="number">1</span>

CSS

 .number {
color: #f5f1e2;
font-size: 1.4rem;
font-weight: 700;
display: block;
background-image: url(../images/label_point.png);
background-size: cover;
width: 48px;
height: 48px;
line-height: 3;

 

そして、結果は以下。

Image from Gyazo 

※未完成なので、結構お手本とかけ離れていますがスルーしてください

 

確かにデータ上中央寄せになってる!でもちゃう!

ちょっと右に寄ってしもてる😭😭

 

試したこと

1. padding-rightで微調整!!

Image from Gyazo

background-imageで画像を表示しているので画像まで大きくなってしまう。

 

2. スペース(空白)を入れる

やってすぐやめました。ナンセンスでやっちゃいけない気がしました。

 

text-indentの出番

カンニングしたらtext-indentを使っていました。text-indentとは?

 

text-indentプロパティは、文章の1行目の字下げ幅を指定します。

引用:text-indentプロパティの意味と使い方 | CSS | できるネット

 

本来の用途は段落を作るためのプロパティなんかな?

Webデザインによくある、用途がなんであれ見た目がオッケーやったらええやつね。

 

ということで、 以下のようにtext-indentを追加。

 

CSS

 .number {
color: #f5f1e2;
font-size: 1.4rem;
font-weight: 700;
display: block;
background-image: url(../images/label_point.png);
background-size: cover;
width: 48px;
height: 48px;
line-height: 3;
text-indent: -1.5rem;  /*追加*/

 

 結果はこちら。

Image from Gyazo

ちょっとちゃうけど、さっきよりマシ!!

ここから微調整をかけたらここはクリアできそう。

 

スローペースですが、ひとつ勉強になりました。

 

 

【後悔】無計画ポートフォリオ制作の脅威

 

えびこです!🍤🍤


前回のブログで、ついにポートフォリオが完成!と大々的に発表しました。

 

一時的に気持ちがアガりましたが、そんな高揚感も束の間。意気揚々とWebデザイナーの求人を見て、通勤の1時間で面接のシミュレーションをしていると、

 

なんと詰めの甘いポートフォリオを作ってしまったんや!恥ずかしくて見せられへん!ボツ!!

 

となりました。恐らくこのポートフォリオはボツになる運命です😭知り合いにしか見せません。(笑)すんごい時間がかかったので虚しいですが、得るものも大きかったので今回は反省ポイントをまとめます。

 

 

 


無計画となった背景(言い訳)

ボツポートフォリオはTech Acedemyの最終課題

コロナウイルス対策として、待ちに待った在宅勤務がついにGW明けからうちの会社でも解禁されました。普段の仕事はプレゼンや会議資料の作成がメインなので、家での仕事は非常に充実していていつもより早く終わりました。

 

その余った時間を転職に関する情報収集する時間に費やしてWebデザインという仕事を知り、Tech Academyの受講を決めることになります。

 

当時はコロナウイルスの影響がここ数ヶ月続くと思って、それに伴い在宅勤務も数ヶ月続くと踏んで毎日2~3時間学習すれば受講期間内に全セクションを終えられる12週間コースを選択。

 

まさかの在宅勤務が1ヶ月で終了する

ここでまさかの5月から始まった在宅勤務が1ヶ月で終了😭6月から通常勤務スタート。ピンチです。

 

在宅勤務中は通勤時間が省かれる為、朝からヨガと筋トレやっちゃったりと、非常に余裕のある生活を送っていましたが、通常勤務となると、通勤時間2時間という無駄が再発

 

それによってフリータイムが20時〜22時のわずか2時間に激減。就寝時間を遅らせたり早起きしたりして時間を作る、というくらい無理もできましたが、私は睡眠不足によってすぐ体調を崩す体質なので普段通りの睡眠を優先しました。

 

そんなこんなでなんとかついていったTech Academyの最終課題が先日完成したポートフォリオとなるのですが、受講期間が非常に迫っていた為、急いでデザインの大原則を読み直して企画、ワイヤーフレーム、デザイン、全て駆け足でした⛹🏻‍♀️

 

制作が受講期間内に終わる気がしませんでしたが、お金を払っているので出来るだけ進めて質問を考えてメンタリングで質問。慌ただしく受講期間が終わって行きました。

 

 

制作を終えた感想

まずは良かったことから。

 

「Webデザインを勉強している人」から「Webサイト公開まで出来る人」になった

内容がどうであれ、自分でWebサイト構築〜公開まで自力で行ったという経験が人生初!人生初の体験をする、ということは大好物なので公開できた時は興奮しました😆スマホを横向きにしたらデザインが崩壊してすぐに肩を落としましたが笑)

 

今回はさくらレンタルサーバーを使用しましたが、構築、公開までの流れを体験するとなんとなく仕組みが分かってきた気がします。とりあえず浅く理解したので、これから深堀りできる基盤がとりあえずできました。

 

コーディングの問題解決力が向上した

デザインが思い通りにいかないよ〜〜🥺の連続でしたが、これかな?あれかな?でうまくいくこともあれば、何やってもだめだ〜〜🤯いうことも多々あり。というか何やってもだめだ〜〜でしか無かったです。

 

そんな時はひたすらググってググってググりまくる。同じように苦しい道を辿って解決した先人の知恵をひたすら盗みまくります。

 

どうしても適した検索ワードが分からなければteratailで質問をしていました。でも自分で解決できる力をつけたくて、結構粘って粘ってどうしても分からない時だけ利用していました。

 

私だけかもしれませんが、粘って粘って考えて考えてだめだった時に限って、質問文を書いている途中にひらめいて自分で解決することが多くて面白かったです💡この現象なんなんだ?結局2回位しか使ってません。(多いんかな?笑)

 

 

続いては、めちゃくちゃに後悔していることです。

 

架空のサービス内容を考えるのに時間がかかりすぎた

現在の職種がマーケティングということもあり、新しい企画を考える時はすごく没頭してしまいます。さらに架空なので、どんなめちゃくちゃなサービスでもよいという非現実的な状況にテンションが上がってすごく時間がかけてしまいました。笑

 

あの頃の自分に声を大にして、「ただの飲食店とかでもいいんやで〜〜ざっくりでいいんやで〜〜」と言いたい。

 

最終的にはWebデザインを勉強した上で、新たなアプリケーションやサービスの企画・開発に携われたら面白そう〜〜と思うことは多々ありますが、その思いをここに反映することは時間が限られていることもあり、違ったな〜。

 

下層ページはほどほどにしておくべきだった

企画を熱く考え込んだ弊害として、下層ページがめちゃくちゃ多かったです。デザインやページの使い回しを多用していましたが、使いまわしとはいえ、やっぱりページが多いとその分コーディングする量が増えます。

 

その増えたコーディングはなにか勉強になったかな?と振り返ると、手間の割に大した経験ではなかったです・・。

 

デザインの説明ができない

駆け足で行ったこともあり、自分が構築できるレイアウトを優先し、なぜこのデザインにしたか、なぜこのレイアウトにしたのか、なぜこの配色なのかということが十分説明できないサイトになってしまいました。それもあって、CSSを入力している最中に「ちょっとちゃうなあ・・・」と思ってデザインカンプと違う調整を行ったりしてペースダウンをしていた気がします。

 

これが一番の反省しているポイントです。

仕事を得るために、自分をアピールするために制作しているのに、このポートフォリオで挑めば「なーんにも考えず制作しましたぁ🥱」と言っているのと同じで、怖くてこんなものよく出しません。

 

デザインのコンセプトをはじめにドーンと作ってずっしり構えておけばもっと制作がスムーズになりますし、何よりこのサイトのデザインの意図を堂々と語れて、どんな質問にも自然と答えられるようになると思います

 

そうなれば、業務未経験の面接でも多少は怖くなくなりますよね。

 

これからの勉強

今回ポートフォリオを制作して感じた自分の主な弱点は以下と結論づけました。

  • デザインの基礎を知らない(意図をデザインに反映できない)
  • HTMLのタグの特徴を知らない(いわゆるdiv病)
  • スマホ(横)、タブレットになるとデザインが崩れる(ブレイクポイントの詰めが甘かった)

 

これらを克服するためにこれからすることを決めました。

  1. デザインに関する本を読み漁る
  2. ランディングページ模写でお手本のコーディングを見て手で動かして学ぶ

 

十分な時間を確保できませんが、なんとか工夫してデザイン・コーディングどちらも同時進行で勉強して、ある程度できたら渾身のポートフォリオサイトを作って就職活動をする、という流れでやっていこうかなと思っています😉

 

 

やっぱ何事もやってみないと分からない!!今回のポートフォリオはすごく時間をかけたのに失敗に終わりましたが、自分の弱点に気づけたことはとてつもない収穫!不器用にやってますが、必ずやり遂げて見せます😎

 

 

ではでは!