ポートフォリオ：5月27日の復習
こんにちは、asuperuです。
ポートフォリオの制作真っ只中です。プロのサイトをはじめ、卒業生のみなさんのサイトがどれだけの工夫で作られているかを、ほとほと痛感しています。みんな、すごいです。圧倒的です。
自分にどれほどのものが作れるのかわかりませんが、できることをがんばってみようと思います。
しばらくポートフォリオ関連の作業が続くので、その日の復習だったり、いただいたコメントなりを少しまとめていきたいと思います。
Contents
サイトvol.1
基本的な手直しの考え方
・スマホ使用の上から順に直していく
・何か問題が起きたときは、そのときに対処しないと、問題の場所を探すところから始めないといけないから、とても大変
・問題の場所を探すときは、コメントアウトの範囲を変えながら、徐々に突き止めていくと、不要なプロセスを踏まなくて良い
・「もっと見る→」は、基本一番小さい文字サイズにする
HTML/CSS
要素の中央寄せ
・inline要素の中央寄せは、text-align:center。
・block要素の中央寄せは、
（１）左右のmargin: auto
（２）display: flex;
justify-content: center
display: flexの大前提
・２つ以上の子要素の配置を指定したいときに使用する。子要素が１つしかいないのに、display: flexを設定しても意味がない。
ハンバーガーメニュー
・基本的には、position: absolute で位置を固定
・SNSのアイコンを設定したい場合は、イラストレーターでアイコンのpngを作成する
・その際、図形要素をガイドとしてpngを配置することで、サイト上のサイズを揃えることができる
class名の付け方
・flexや書式の設定などを、そのままclass名に指定するのも一つの方法。そうすることで、なんの指示をしたのかが一目瞭然。ただ、たくさん指示をしたいものは、class名が長くなってしまうことと、コードと混在してしまうと見にくくなるので、程度や使い方に注意が必要。
imgの上に文字を載せたいとき
・imgと文字の親をposition: relativeに指定
・imgと文字をposition: absoluteにして、z-indexで何を上に表示させるかを指示する（上にしたい要素ほど数字を大きくする）
・このとき、もしheaderを固定にしてz-indexを使っている場合は、その数字より小さくする
mainの画像比率指定
・画像に指定するコードを記述する
width: 100vw; /*view port（画面はば）を100％とする*/
aspect-ratio: 5 / 3; /* 5:3に指定する*/
Illustrator
図形や直線のラインを途中で切る
・図形や直線のラインを途中で切りたい場合は、
アンカーポイントの追加 ＞ 線の上をクリックして、アンカーポイントを増やす ＞ ダイレクト選択 ＞ 選択部分を消す
サーバーとドメイン
サーバー契約内容の確認
ポートフォリオサイトを作成するにあたり、まずは現状のサーバー契約状況の確認。先生曰く、一旦開設した自分のサイトは、目的（転職や就職など）の後も、消さずに残しておいた方がいいとのこと。確かに、多少お金はかかるけど、自分のスキル証明になります。
私の場合、契約のサーバー容量は300GB。それに対してこのドメインのみの使用。ということは、それだけ持て余しているということです。なんてもったいない使い方をしていたのでしょう。
でも、プランを安くしすぎてしまうと、WordPressの読み込みができないなど、使い勝手が悪くなる場合があるから、気をつけること。それを思うと、結果オーライということで、今回追加契約や契約変更はせずに、サーバーを利用できることができることがわかりました。
当時は、本当に見ようみまねで設定したこのWordPress。契約内容を理解しようにも、インドネシアにいたため気軽に電話もできず、メールで問い合わせができるほど理解もしておらず。それでも果敢に設定までこぎつけられた自分を褒めてあげたい。
サブドメイン
ずっと疑問だった「サブドメイン」の存在。
例えば、yahoo.jpの場合、ショッピングサイトはshopping.yahoo.jpになります。このドメインはサブドメインということ。なるほど！
どのドメインに紐づけるかで、関連性があることをアピールできるから、必要に応じて使うことができる。
ロリポップとムームードメインの関係
運営会社が同じで、業務内容が違うだけとのこと。だから、ロリポップはドメイン取得先として、ムームードメインとの連携が強いのです。なるほど！
コメントを残す