What's New Qiita

20200110のCSSに関する記事は3件です。

  • 投稿日：2020-01-10T16:57:10+09:00

CSS 重ねかた

以下、箇条書き。
・padding-topで上に延びる。(left, right, bottomも同じ)
・margin-leftで左に余白が延びる。(topとかも同じ)(余白なので延びた左側白くなる)
・position: ¥;
　¥の中身はabsolute(絶対座標), fixed(画面からの位置),relative(相対座標)
簡単に説明。(top: 0;などを下に記述)
absoluteは左上を(0, 0)を基準とした時の位置。
fixedは左上を(0, 0)を基準とした時の位置だが画面に固定される。ずっと見えてて欲しい広告やHeaderなど便利なものを固定することが多い。
relativeは、ホラ、HTMLって積み木のように重なっていくじゃん？そうなった時の表示される場所って(0, 0)じゃない事が多い事が多い。横にずらしたいだけって時などには便利かも。
・z-index: ¥;
　¥には数字(大抵1,2くらい)が入る。数字が大きいほど前に出る。表示だけじゃなく、作業中この要素隠れてるけどどんなふうに配置されてんのかなーって思う時にも便利。とてつもなくでかい値を入れると確かめられる。
・width calc(100% - 300px)など
　calcで計算できる。％とかpxとかvhとか入れても単位も勝手に揃えてくれる。
・height: 100vh;
100％と間違えるとハマる。ハマるな危険。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-01-10T01:02:59+09:00

[未経験] ProgateのHTML＆CSSレッスン受けたからポートフォリオサイト作ってみた。

自己紹介

  • 文理系（？）の４年制大卒

  • 新卒未経験でSES＋受託開発の中小企業に入社

  • 入社後、３ヶ月間の社内研修を受講（C,Java,HTML,CSS,PostgreSQL,Linux..)

  • 現在は大手保険会社のWindowsアプリ開発プロジェクト（C#.Net,SQLite使用）に参画中

  • Web系に転職を検討中。。

Progateについて

  • Progateとは・・・

    　HTML、CSS、Java、Ruby、SQL etc..様々なプログラミング言語をWebまたはスマホで学習できるオンラインプログラミング学習サービスです。
    　➡︎　https://prog-8.com/


  • 今回は『HTML＆CSS』の全７レッスンを受講した後、簡単に自作のポートフォリオサイトを作ってみました!

ポートフォリオサイトについて

FireShot Capture 002 - Sakutomo Studio. - sakutomo07.github.io.png

  • シンプルなデザインで、内容も軽めのTopページのみ作成しました！ （Simpler is usually better...笑)

  • HTML&CSSのみの実装ですので、コンタクトフォームやリンク、ボタンなどありますが、見た目だけになっています。

  • ProgateのHTML＆CSSのレッスン受講〜制作完了までにかかった時間は約５０時間くらいです（ちょっと時間かかりすぎたかもです笑）

  • 制作〜公開までに参考にさせていただいた文献、使用したソフトや開発環境は後述

  • 制作したWebページはGitHubPageにて公開いたしました！

　➡︎ 　https://sakutomo07.github.io/sakutomo_portfolio_ver1.0./

開発環境・使用ソフト・参考サイト

  • 開発環境

    　MacBookAir(macOS Catalina 10.15.2)

  • 使用ソフト

    Visual Studio Code　➡︎　コーディングに使用

    GitHub Desktop　➡︎　ソースファイル、画像ファイルをGitHubにプッシュ（Upload）するために使用

    Numbers　➡︎　主にWebページのイメージを設計するために使用
    　

  • 参考サイト

    ① HTML&CSS学習
    　Progate
    　MDN web docs
    　qiAz web tech blog


    ② 画像データ取得
    　Font Awesome
    　SVG PORN
    　pixaboy
    　Online Logo Maker


    ③ GitHubについて
    　ferret
    　

制作開始〜完成までにやったこと

　1. 目標設定・計画

・目的の明確化　➡︎　ProgateのHTML&CSSのレッスンの復習&実践 　
　
・目標の設定　➡︎　ポートフォリオサイトのTOPページ１枚の作成 　
　
・設計　➡︎　他の方のポートフォリオサイトを参考にどんなデザインにするのか、サイトに入れる内容などを考える。 　
　
　2. コーディング

・設計を基にProgateを復習しながらコーディングを進めていきました。 　
　
・わからない＆Progateで学習した範囲外のことはググって調べながら進めていきました。 　
　
　3. Webページの公開

・ローカルリポジトリ＆GitHubにリモートリポジトリを作成後、ソースファイル・画像ファイルなどをPush（Upload）してGitHubページに公開しました。

所感

　
・良かった点

　
1.　コーディングに入る前に目標設定や簡単な設計によって完成のイメージが固まっていたことで、
　割とスムーズに完成までコーディングすることができました。

　
2.　コーディングで詰まった時など、どうすれば上手くいくか考えたり自分で試してみたりする時間が
　長くなりすぎないように意識し、わからないことはどんどんググっていち早く解決に辿り着けるようにできました。

　
3.　Progateで学んだこと以外に、自分で調べて発見した新しい技術・知識
　（例：CSSだけでWebページをフェードインで表示させる）を取り入れたりして、楽しみながら制作することができました。

　
・反省点

　
1.　目標設定した際に、期限（納期）を定めていなかったことで、少しズルズルと制作をしていました。

　➡︎　今後は制作期間・時間の目標設定を実施
　
2.　まだまだHTML&CSSについての知識、コーディング経験の不足しているため、
　 ソースコードが雑であることが否めない・・

　➡︎　基礎がまだまだ身についていないので、MDN Web Docsなどを読んで知識をinputしつつ、継続的にコーディングしていきます。

今後の目標

　・HTML&CSSだけでなく、JavaScriptやBootstrapなどを学んで、動的機能を持つWebサイトを作成する

　・Ruby,railsを学んでSNSサービス（twitter,instagram)などのコピーサイトを作成する

最後に

最後までご覧いただきありがとうございます。

宜しければ、こちらの記事やソースについて、ご指摘・アドバイス・感想など頂けると幸いです。

まだまだ未経験新卒新人のヒヨコですので、お手柔らかに、、笑

今後ともよろしくお願いいたします！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-01-10T00:11:40+09:00

HTML・CSS

HTML・CSSのまとめ

HTMLとCSSと勉強していて、基本的な事と分かり難かったところ、注意すべき点をまとめました。
（間違いがあった場合は、ご指摘いただけると幸いです。）

HTML

タグ

開始タグ<h1>と終了タグ</h1>に挟まれている『こんにちは』これがコンテンツ。実際の画面に表示されるもの。

h1.png

属性・属性値

タグに追加的な情報を付け加えてくれるのが属性
属性には値を設定しなければならない。それが属性値
上記の例でいうとlinkの属性がrel
＝”stylesheet”のstylesheetが属性値
属性値は必ず””で囲む

zokusei.png

要素の構造

個人的に一番面白かったのがこの要素の構造
親要素、子要素、祖先要素、子孫要素
開始タグと終了タグが同じ位置にくるので、必ずキレイなカーブになります。
綺麗に並べると間違いも見つけやすい。

irekokouzou.png

全てのHTMLに共通するタグ

qiita-html.png

<!DOCTYPE html>

DOCTYPE宣言と言います。
このHTMLは『HTML5』の使用に準拠して書かれていることを示しています。

<html></html>

ルート要素と呼ばれDOCTYPE宣言を除く他の全てのHTMLタグの親要素。子要素として必ずheadタグとbodyタグの２つがこの順番で含まれます。

<head></head>

headタグはメタデータと呼ばれるHTMLのドキュメント自身の情報を記述します。

主に3つの大切な役割。

1.<meta charset>文字コード方式の宣言で必ず<head>のすぐ後ろに記述します。新規のHTML文字コード設定をUFT-8に設定。

2.<title></title>HTML自身の『タイトル』を意味します。
<meta>タグのすぐ後ろに記述します。

3.<link rel="stylesheet" href="●●●●.css">
これはCSSと結び付けるもので必ず必要。

:hand_splayed:<meta>タグの補足
metaタグには覚えておかないといけない重要なタグがあと2つあります。

:star:<meta name="viewport" content="width=device-width,intial-scale-1">
<meta name="viewport">タグは
レスポンシブデザインのページならどんな場合でもこの記述。

:star:<meta name="description" content="●●●●●●●●●●">
<meta name="description">タグの
content属性に概要のテキスト（７０文字程度）を含めます。
SEOでとても重要。

<body></body>

そのページの内容（コンテンツ）を表す要素です。
画面に表示したいコンテンツ全て<body>要素内に配置します。

body要素でよく使われるタグ

<header></header> ヘッダーの部分をまとめるタグ
<main></main>ページの中心となる内容をまとめるタグ
<footer></footer>フッターの部分をまとめるタグ
<h1>~<h6>見出しのタグ
<nav></nav>そのページの主要なナビゲーション　　　　
<div>要素をまとめてグループ化する
<ol>番号付きリスト
<ul>番号なしリスト
<il>ol,ulの子要素
<table>表
<a>リンクの出発点と到達点を指定する
<p>段落
<img src>画像
etc...

:star2:SEOについて

『検索エンジン最適化』のことで検索エンジンからの成果を最大化することです。
検索エンジンとは日本においてはGoogleのこと。

:star2:SEO対策はキーワード順位を上げる意味でもとても重要。
現在はh1,h2タグ。現在、Googleもメタディスクリプションの有無が検索順位に影響を与えることは無いと明言していますが適切なメタディスクリプションを設定すれば、確実にメリットが得られます。

:star2:HPを作る際

いかに多くの人の目に触れるか。という事がとても重要。
そのためにSEO対策だけではなく、レイアウトや内容、出来上がってからのマメな更新がとても大切だと思いました。

CSS

・CSSは、HTMLを装飾して見やすくスタイリングするもので、セレクタ、プロパティ、値で表記されます。
・たくさんの種類のプロパティがあります。
・今回は大まかな説明とfloatを使った配置について記述していこうと思います。

セレクタ　{ プロパティ : 値 ; }
セレクタ.png

リセットCSS

ブラウザによって決められた設定があるため、そのままCSSの入力をするデザインが崩れてしまうことがあります。
そのために一度デフォルトに戻す作業が必要。
決められた記述ではなく、その都度自分でカスタマイズすることができます。

ブロック要素のデフォルトの大きさ

横幅(width)親要素の横幅と同じ
高さ(height)子要素の高さの合計

例

qiita.css
body, html {
  height: 100%;
  background-color: white;
}

h1, h2, h3, h4, h5, h6, p, body {
  font-size: 18px;
  color: #4a4a4a;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

左上に重力があるHTMLの特徴を理解する

HTMLとは左上に重力がある箱のような物でCSSで配置を設定する。

floatでの回り込みとその解除。

左右にボックスを配置し、その下にもう一つのボックスを配置したい時。

floatで左右に配置する（HTML）

qiita.html
      <div class="left-content">
      </div>
      <div class="right-content">
      </div>

(CSS)

qiita.css
    .left-content{
  width: 700px;
  float:left;
  }
.right-content{
  width: 260px;
  float: right;
  }

floatの解除をして下にもう一つのボックスを配置(HTML)

qiita.html
       <div class="bottom-content">
      </div>

CSS clear:both; の設定をする。

qiita.css
   .bottom-content{
  background-color: green;
  clear: both;

:sunny:CSSでclear:both;の設定をすると、入力したセレクタからfloatが解除されます。
その結果、

.bottom-contentのボックスは下に配置されます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧