Web Design

【10の質問】Webデザインを勉強して、IT系の友人へ聞いてみた

2021年6月22日

Webデザイン
  • 「Webデザインを勉強するようになって、IT業界に興味が出てきた」
  • 「IT系の友人がいれば質問してみたいことがあるけれど、いないしな……」
  • 「IT業界への質問と回答があれば、参考にしたい

この記事はそんな方へ向けて書いています。

 この記事でわかること

IT系の友人への10の質問と回答
Webデザイン職業訓練10日目の勉強内容

 本記事の信頼性

2019年1月からWordPressで当ブログ開設(最高で月間62,000PV)
2021年6月から職業訓練のWebデザイン6ヶ月コースに通っています。
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん

Webデザインの勉強を始めて、IT業界の職場や仕組みに興味を持つようになりました。
友人がソフトウェア開発に携わっているので、Webデザインとは違いますが質問してみることに。

本記事では、IT系の友人に質問したことと回答を書いています。

記事後半では、Webデザイン職業訓練10日目の勉強内容についてまとめました。

ちなみに、職業訓練9日目の勉強内容は下記にまとめています。
»【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

実際にIT業界で働いているので、説得力がありました。

【10の質問】Webデザインを勉強して、IT系の友人に聞いてみた

Webデザイン

IT系の友人に実際に会い、15以上の質問をしてみました。
厳選の質問10個&回答をまとめています。

質問その1:入社1年目に仕事内容は?

1年目はプログラムは一切書かなかった。
内訳は、最初の3ヶ月はC言語の講習、9ヶ月は新しい規格の解読。

質問その2:未経験の中途採用はいるか?

30歳くらいで未経験の採用あり。
いまだに活躍している。

質問その3:Webデザイン部署はあるの?

ソフトウェア開発だからWebデザイン部署はない。
Webデザイン系の仕事が来たらすべて外注している。

質問その4:HTML、CSSはやったことある?

HTML、CSSは勉強したことがない。
なぜなら、ソフト開発では必要ないから。

基本はC言語。
他言語はC言語からの派生、応用みたいなもの。

質問その5:何年目にフリーでいけると思ったか?

10年目。

ソフトウェア開発で5年くらいでは、フリーはまだムリ。
Webデザインはわからないが。

「5年くらい(10,000時間の法則)でフリーランスになれるかな?」と思っていました。

質問その6:プログラミングのコードは暗記している?

暗記していない。
なぜなら、覚えられないから。

むしろ、プログラミングコードは覚えてはいけない。

プログラミングの書き方、仕組みを理解して、あとはひたすらググる。

質問その7:誰に向けてコードを書いているか?

常駐先の顧客に向けて。
誰がコードを見ても、わかるのが理想。

質問その8:英語の勉強をした理由は?

プログラミングのため。
外国人と仕事をする機会があったため。

友人に『世界一わかりやすいやりなおし中学英語』関正夫【著】を紹介したら、即購入していました。

質問その9:進行管理のディレクターの肩書きは?

プロジェクトリーダー。
顧客とプログラマーの間に挟まれて、大変そう。

質問その10:プログラミングのミスをしたときの損金はあるか?

基本的になし。
バグを発見する専門の人たちもいる。

始末書レベルで、遅刻やその他なら書く機会はあり。

以上、10の質問でした。

Webデザイン職業訓練10日目の勉強内容

Webデザイン

CSSを整える【フッター】

フッターのCSS

/*例外的な処理*/

style.css

footer{
 margin-top: 150px;
 background-color: #f77237;
   color: #fff;
 padding-top: 30px;
}

footer a{
 color: #fff;
}

footer .fotter_logo{
 margin-bottom: 30px ;
}

footer .footer_wrap{
 display: flex;
 justify-content: space-between;
 margin-bottom: 30px;
}

footer .footer_left ul{
 list-style-position: inside; /*マーカーの位置*/
 list-style: disc; /*丸ポッチをの点にする*/
}
/*list-style: disc inside; ショートハンドプロパティ*/

footer .footer_left ul ul{
 padding-left: 1em; /*1emは1文字分*/
}

footer .footer_right ul{
 list-style: none; /*点はいらない*/
 /*display: flex; これでもOK*/
 margin-bottom: 30px;
font-size: 0; /*<li>のあとの改行消せる*/
}

footer .footer_right ul li{
 display: inline; 
 font-size: 16px;
 margin-right: 10px;
}
/*liはブロック要素のため縦並び → inlineでライン要素に変えてもOK、方法論のひとつ。display: flexでもOK*/
/*inlineは変な隙間ができる*/

footer .footer_right dt{
 border-bottom: 1px solid #fff;
 margin-bottom: 10px;
}

footer .footer_right dt{
 line-height: 1.5;
}

footer .copy{
 text-align: center;
}

List-style-positionについて理解できなかったので、下記記事を参考にしました。
» 参考:list-style-position: <li>のマーカーの位置

ポイントは「<li>タグがブロック要素」です。

トップページが完成しました。

下層ページ作成手順【トップページを使い回す】

トップページができたので、次は下層ページの作成です(お菓子教室のページ)。

 下層ページの作成手順

index.htmlファイルを作成
トップページのhtmlをすべてコピー → 下層ページに貼り付け
トップページのhtmlファイルは、紛らわしいので×ボタンで落とす
いらないHTMLコードを消す(開始タグ、閉じタグを意識しながら川下から)

htmlファイルは基本的に「index.html」という名前だけ使います。

なぜなら、index.htmlを省略することができるから。

たとえば、ファイスパス「 lesson/index.html 」は「lessonフォルダのindex.htmlを見ろ」という意味。
ただ、index.htmlは省略できるためは「 lesson/ 」で書くことができる。

ゆえに、htmlファイルをIndex以外の名前にすることはあまりない。
基本的にはindex.htmlのファイルがたくさんできることになります。

ヘッダー、フッターは使いまわせるのでコピーして活用すること。
わからなくなったら全部落として、また開いたほうが早いです。

トップページのお菓子教室に飛べそうなところのリンク3つを書き換える

index.html

<header>
 <div class="inner">
  <h1><a href="./"><img src="img/logo02.png" alt="ケーキ屋"></a></h1>
   <nav> <!-- ナビはulとliで作ることが多い -->
    <ul>
     <li><a href="#">ケーキ屋について</a></li>
     <li><a href="#">ケーキメニュー</a></li>
     <li><a href="lesson/">お菓子教室</a></li> <!--/後のindex.htmlは省略できる-->
    </ul>
   </nav>
 </div>
</header>

要注意:lessonの前に/をつけないこと。
ファイルパスで/から始まることないです。

ルートディレクトリとは?

ルートディレクトリとは最上階層のディレクトリ(フォルダ)。

ルート → 分岐点の根っこになるところ
ディレクトリ → 簡単に言えばフォルダ

keyビジュアル(ファストビューの大きめの画像)が必要な理由

ブランディングや印象づけのため。
ただ、下層のページには不要なので、早めに文字で情報を見せることが大事。

 大まかな構造は以下のとおり。

 

under title
パンくずリスト
2column(2カラム)→Innerの中に左と右
左をmainタグにして、右をdivタグで名前sideにする
無関係ではないがなくても良い項目には<aside>タグでくくる(ブログなど)
Sectionでimg(pタグ)と文字(h2)をつくる(1個作ってコピペするのがラク、速い)
教室概要はtableで作成(trで行、th、td)
ヘッダー、フッターはトップページ共通のため使い回し

background-size、background-position、下層ページ共通

mainの中に違和感を感じました。

h1 → cssが干渉し合う(トップページにも反映)

bodyのところにclassをつけて解決。
<body class="lesson">

style.css

.lesson h1{
 background-image: url(../ 〜);

高さは文章の大きさに依存する。
縮小して表示させるには、backgroundサイズを変える。

style.css

.lesson .under_title{
 background-image: url(../img/lesson_main.jpg);
 height: 180px;
 background-size: cover; /*横もしくは縦を100%表示させる*/
 background-position: center center;  /*background-position; x y;*/
}

下層ページに共通するものを最初に作っておいたほうが良いです。

CSS:下層ページ共通を作る

style.css

.under_title{
 height: 180px;
 background-size: cover;
 background-position: center center;
}
/*トップページ以外はunder_titleが入るから*/

インラインブロック要素、黄金比、box-sizing: border-box

CSS:お菓子教室のロゴ

style.css

h1{
 background-color: rgba(255, 255, 255, 0.5);
 font-size: 26px;
 line-height: 1; /*inlineは上下のpaddingがとれない、使いにくい*/
 display: inline-block; /*インラインブロック要素*/
 padding: 8px 13px; /*上下8px、左右13pxの算出方法*/
}

インラインブロック要素とは、「インライン要素」と「ブロック要素」の両方の特徴を持っています。
» 参考:【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

上記のpaddingの取り方

文字26pxに対して、1.6(黄金比)をかけると約42px。
42px ー 26px=16pxとなるので、上下に8pxずつ取ればいい。
横は8 × 1.6=12.8で約13px。

黄金比については下記記事が参考になります。
» 参考:デザインを美しくする「黄金比」について理解しよう!(身の回りにある黄金比)

box-sizing: border-box

paddingをどれだけ入れようと変わらない → reset.cssに入れる(ここ7、8年)

古いサイトをいじるときは注意です。

なぜなら、高さや横幅を引き算しているはずだから。
box-sizing: border-box;を入れるとレイアウトがくずれます。
» 参考:【CSS】box-sizing:border-boxの使い方|効かない時は?

「widthの考え方」が気になりましたので、下記サイトで復習しました。

» CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう

パンくずリスト、擬似要素

CSS:パンくずリスト

style.css

.bread ul{
 list-style: none;
 display: flex;
 margin-bottom: 20px;
}

.bread ul li::after{
 content: ">";
 padding-left: 7px;
 padding-right: 7px;
}

.bread ul li:last-child::after{
 content:""
}

擬似要素のbefore、afterとは

CSSの「::before、::after」とは疑似要素と呼ばれるものの1つ。
HTMLには書かれていない要素もどきをCSSで作ることができます

擬似要素を使うメリットを引用します。

afterやbeforeがものすごく便利なのは「HTMLコードを汚すことなく様々な表現ができる」ということです。
なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。
そのため、SEOを気にせずにユーザーのための自由な表現ができるのです。

出典:サルワカ

擬似要素については下記記事がわかりやすいです。
» 参考:CSSの疑似要素とは?beforeとafterの使い方まとめ

まとめ:Webデザインを勉強してよかった【質問から世界が変わる】

IT系の友人にWebデザインの質問をしてみた

Webデザインの勉強をしてよかったです。
理由は、IT系の友人の仕事内容に、より興味を持てたから。

Webデザインの勉強をする前にも、色々と興味本位で聞いていました。
ただ、知識不足からあまりピンときてなかったのも事実。

Webデザインの勉強を始めてから、明らかに聞くことが変わりました。
自分ごとに置き換えられるようになったからだと思います。

ちょっぴり世界が変わった印象です。

勉強する

興味が変わる

友人との会話内容も変わる

新しいことがわかり勉強になる

見える世界が変わる

良いループです。

なお、職業訓練11日目については下記記事に書いています。
»【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由

【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由
【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由

すべては勉強から始まります。

こういちより

P.S. IT系の友人に質問してみよう。

関連記事【初心者向け11選】Webデザインギャラリー・参考サイトのまとめ
関連記事【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.