編集履歴

質問編集履歴

説明が重複した為、不要文を削除しました。

2021/03/06 08:55

投稿

JAQKxsuke

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -283,579 +283,3 @@
 ■使用ツール
 ・Terapad
-### 前提・実現したいこと
-【ヘッダーの完成html及びcss】
-蒼乃建設のコーポレートサイトを作成しています。
-自力で解決できなかった問題は下記3点です。
-①タイトルの中央に持ってくる。
-②重要なロゴ画像の画質が荒くなってしまっている。
-③リストを一番右に寄せる。余白スペースをなくすには？
-ヘッダー作成だけで悪戦苦闘しています、
-どなたかご教授の程、宜しくお願い致します。
-■作成中のホームページURL（コーポレートサイト）
-作成中→[蒼乃建設：コーポレートサイト](http://jaqkxsuke.sakura.ne.jp/corporate/index.html)
-完成版→[見本](https://danblog.tokyo/#)
-■使用言語
-・HTML
-・CSS
-■レンタルサーバー
-・さくらインターネット（ライト）
-■プログラミング経験
-・経験年数：4か月
-・学習方法：Progate歴3ヶ月（HTML,CSS）
-・コードを見た時に何が書いてあるか理解できますが、
-私自身で記述できるレベルには到達していません。
-↓
-2021年3月4日
-自力での模写に挑戦中
-※ルール：ググるorTeratailで教えて頂き完成を目指す
-### 発生している問題・エラーメッセージ
-### ■エラーページ↓↓
-![イメージ説明](425e96f7f4e6e76b36f4b4b803871435.jpeg)
-### ■見本ページ↓↓
-![イメージ説明](5b32550bb147fe6ab207ddc1db4de0cc.jpeg)
-### 該当のソースコード
-```ここに言語名を入力
-ソースコード：
-■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
-<!DOCTYPE html>
-<html lang="ja">
-<meta charset="UTF-8">
- <head>
-  <title>corporate-site</title>
-  <link rel="stylesheet" href="style.css">
- </head>
- <body>
-  <header>
-   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="111px" height="48px"></a></h1>
-   <ul class="sec-navi">
-    <li class="header-list"><a href="#">企業理念</a></li>
-    <li class="header-list"><a href="#">施工事例</a>
-    <li class="header-list"><a href="#">採用情報</a>
-    <li class="header-list"><a href="#">お問い合わせ</a>
-   </ul>
-   <p class="mainvisual-text">街を作る。未来を作る。
-</header>
- </body>
-</html>
-■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
-@charset "UTF-8";
-.html {
- font: 100%;
-}
-.mainvisual {
- position: relative;
- width: 500px;
-}
-header {
- background-image: url(img/main.png);
- background-repeat: no-repeat;
- background-position: center;
- height: 700px;
-}
-.sec-navi {
- margin-right: 0px;
-}
-a {
- color: gray;
-}
-a:hover {
- opacity: 0.5;
-}
-.header-list {
- display: inline-block;
- list-style: none;
- vertical-align: middle;
- float: right;
- margin-right: 55px;
- margin-top: 55px;
- justify-content: space-between;
-}
-.header-list a {
- text-decoration: none;
-}
-.logo {
- float: left;
- margin-top: 30px;
-}
-.mainvisual-text {
- text-align: center;
- display: inline-block;
-}
-```
-### 試したこと
-＞①タイトルの中央に持ってくる。
-display: inline-block;を試しましたが、文字は少し移動したものの中央には行きませんでした。
-＞②重要なロゴ画像の画質が荒くなってしまっている。
-   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" __width="111px" height="48px"__></a></h1>
-斜体の部分「width="111px" height="48px"」を加えてから、画質が荒くなりました。
-別の方法でサイズ指定した方が良いのでしょうか？
-＞③リストを一番右に寄せる。余白スペースをなくすには？
-すいません、これは考えても分かりませんでした。
-### 補足情報（FW/ツールのバージョンなど）
-■使用ツール
-・Terapad
-### 前提・実現したいこと
-【ヘッダーの完成html及びcss】
-蒼乃建設のコーポレートサイトを作成しています。
-自力で解決できなかった問題は下記3点です。
-①タイトルの中央に持ってくる。
-②重要なロゴ画像の画質が荒くなってしまっている。
-③リストを一番右に寄せる。余白スペースをなくすには？
-ヘッダー作成だけで悪戦苦闘しています、
-どなたかご教授の程、宜しくお願い致します。
-■作成中のホームページURL（コーポレートサイト）
-作成中→[蒼乃建設：コーポレートサイト](http://jaqkxsuke.sakura.ne.jp/corporate/index.html)
-完成版→[見本](https://danblog.tokyo/#)
-■使用言語
-・HTML
-・CSS
-■レンタルサーバー
-・さくらインターネット（ライト）
-■プログラミング経験
-・経験年数：4か月
-・学習方法：Progate歴3ヶ月（HTML,CSS）
-・コードを見た時に何が書いてあるか理解できますが、
-私自身で記述できるレベルには到達していません。
-↓
-2021年3月4日
-自力での模写に挑戦中
-※ルール：ググるorTeratailで教えて頂き完成を目指す
-### 発生している問題・エラーメッセージ
-### ■エラーページ↓↓
-![イメージ説明](425e96f7f4e6e76b36f4b4b803871435.jpeg)
-### ■見本ページ↓↓
-![イメージ説明](5b32550bb147fe6ab207ddc1db4de0cc.jpeg)
-### 該当のソースコード
-```ここに言語名を入力
-ソースコード：
-■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
-<!DOCTYPE html>
-<html lang="ja">
-<meta charset="UTF-8">
- <head>
-  <title>corporate-site</title>
-  <link rel="stylesheet" href="style.css">
- </head>
- <body>
-  <header>
-   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="111px" height="48px"></a></h1>
-   <ul class="sec-navi">
-    <li class="header-list"><a href="#">企業理念</a></li>
-    <li class="header-list"><a href="#">施工事例</a>
-    <li class="header-list"><a href="#">採用情報</a>
-    <li class="header-list"><a href="#">お問い合わせ</a>
-   </ul>
-   <p class="mainvisual-text">街を作る。未来を作る。
-</header>
- </body>
-</html>
-■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
-@charset "UTF-8";
-.html {
- font: 100%;
-}
-.mainvisual {
- position: relative;
- width: 500px;
-}
-header {
- background-image: url(img/main.png);
- background-repeat: no-repeat;
- background-position: center;
- height: 700px;
-}
-.sec-navi {
- margin-right: 0px;
-}
-a {
- color: gray;
-}
-a:hover {
- opacity: 0.5;
-}
-.header-list {
- display: inline-block;
- list-style: none;
- vertical-align: middle;
- float: right;
- margin-right: 55px;
- margin-top: 55px;
- justify-content: space-between;
-}
-.header-list a {
- text-decoration: none;
-}
-.logo {
- float: left;
- margin-top: 30px;
-}
-.mainvisual-text {
- text-align: center;
- display: inline-block;
-}
-```
-### 試したこと
-＞①タイトルの中央に持ってくる。
-display: inline-block;を試しましたが、文字は少し移動したものの中央には行きませんでした。
-＞②重要なロゴ画像の画質が荒くなってしまっている。
-   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" __width="111px" height="48px"__></a></h1>
-斜体の部分「width="111px" height="48px"」を加えてから、画質が荒くなりました。
-別の方法でサイズ指定した方が良いのでしょうか？
-＞③リストを一番右に寄せる。余白スペースをなくすには？
-すいません、これは考えても分かりませんでした。
-### 補足情報（FW/ツールのバージョンなど）
-■使用ツール
-・Terapad

※見本ページ使用許可の説明追記

2021/03/06 08:55

投稿

JAQKxsuke

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -22,6 +22,14 @@
+■見本と模写サイトのリンク
+・[見本サイト](https://danblog.tokyo/#)　※模写サイトを提供してるサイト主様がこちらポートフォリオに使ってOKと許可を出しております。
+・[模写サイト](http://jaqkxsuke.sakura.ne.jp/corporate/index.html)
 ■使用言語
 ・HTML
@@ -275,3 +283,579 @@
 ■使用ツール
 ・Terapad
+### 前提・実現したいこと
+【ヘッダーの完成html及びcss】
+蒼乃建設のコーポレートサイトを作成しています。
+自力で解決できなかった問題は下記3点です。
+①タイトルの中央に持ってくる。
+②重要なロゴ画像の画質が荒くなってしまっている。
+③リストを一番右に寄せる。余白スペースをなくすには？
+ヘッダー作成だけで悪戦苦闘しています、
+どなたかご教授の程、宜しくお願い致します。
+■作成中のホームページURL（コーポレートサイト）
+作成中→[蒼乃建設：コーポレートサイト](http://jaqkxsuke.sakura.ne.jp/corporate/index.html)
+完成版→[見本](https://danblog.tokyo/#)
+■使用言語
+・HTML
+・CSS
+■レンタルサーバー
+・さくらインターネット（ライト）
+■プログラミング経験
+・経験年数：4か月
+・学習方法：Progate歴3ヶ月（HTML,CSS）
+・コードを見た時に何が書いてあるか理解できますが、
+私自身で記述できるレベルには到達していません。
+↓
+2021年3月4日
+自力での模写に挑戦中
+※ルール：ググるorTeratailで教えて頂き完成を目指す
+### 発生している問題・エラーメッセージ
+### ■エラーページ↓↓
+![イメージ説明](425e96f7f4e6e76b36f4b4b803871435.jpeg)
+### ■見本ページ↓↓
+![イメージ説明](5b32550bb147fe6ab207ddc1db4de0cc.jpeg)
+### 該当のソースコード
+```ここに言語名を入力
+ソースコード：
+■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+ <head>
+  <title>corporate-site</title>
+  <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+  <header>
+   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="111px" height="48px"></a></h1>
+   <ul class="sec-navi">
+    <li class="header-list"><a href="#">企業理念</a></li>
+    <li class="header-list"><a href="#">施工事例</a>
+    <li class="header-list"><a href="#">採用情報</a>
+    <li class="header-list"><a href="#">お問い合わせ</a>
+   </ul>
+   <p class="mainvisual-text">街を作る。未来を作る。
+</header>
+ </body>
+</html>
+■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+@charset "UTF-8";
+.html {
+ font: 100%;
+}
+.mainvisual {
+ position: relative;
+ width: 500px;
+}
+header {
+ background-image: url(img/main.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 700px;
+}
+.sec-navi {
+ margin-right: 0px;
+}
+a {
+ color: gray;
+}
+a:hover {
+ opacity: 0.5;
+}
+.header-list {
+ display: inline-block;
+ list-style: none;
+ vertical-align: middle;
+ float: right;
+ margin-right: 55px;
+ margin-top: 55px;
+ justify-content: space-between;
+}
+.header-list a {
+ text-decoration: none;
+}
+.logo {
+ float: left;
+ margin-top: 30px;
+}
+.mainvisual-text {
+ text-align: center;
+ display: inline-block;
+}
+```
+### 試したこと
+＞①タイトルの中央に持ってくる。
+display: inline-block;を試しましたが、文字は少し移動したものの中央には行きませんでした。
+＞②重要なロゴ画像の画質が荒くなってしまっている。
+   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" __width="111px" height="48px"__></a></h1>
+斜体の部分「width="111px" height="48px"」を加えてから、画質が荒くなりました。
+別の方法でサイズ指定した方が良いのでしょうか？
+＞③リストを一番右に寄せる。余白スペースをなくすには？
+すいません、これは考えても分かりませんでした。
+### 補足情報（FW/ツールのバージョンなど）
+■使用ツール
+・Terapad
+### 前提・実現したいこと
+【ヘッダーの完成html及びcss】
+蒼乃建設のコーポレートサイトを作成しています。
+自力で解決できなかった問題は下記3点です。
+①タイトルの中央に持ってくる。
+②重要なロゴ画像の画質が荒くなってしまっている。
+③リストを一番右に寄せる。余白スペースをなくすには？
+ヘッダー作成だけで悪戦苦闘しています、
+どなたかご教授の程、宜しくお願い致します。
+■作成中のホームページURL（コーポレートサイト）
+作成中→[蒼乃建設：コーポレートサイト](http://jaqkxsuke.sakura.ne.jp/corporate/index.html)
+完成版→[見本](https://danblog.tokyo/#)
+■使用言語
+・HTML
+・CSS
+■レンタルサーバー
+・さくらインターネット（ライト）
+■プログラミング経験
+・経験年数：4か月
+・学習方法：Progate歴3ヶ月（HTML,CSS）
+・コードを見た時に何が書いてあるか理解できますが、
+私自身で記述できるレベルには到達していません。
+↓
+2021年3月4日
+自力での模写に挑戦中
+※ルール：ググるorTeratailで教えて頂き完成を目指す
+### 発生している問題・エラーメッセージ
+### ■エラーページ↓↓
+![イメージ説明](425e96f7f4e6e76b36f4b4b803871435.jpeg)
+### ■見本ページ↓↓
+![イメージ説明](5b32550bb147fe6ab207ddc1db4de0cc.jpeg)
+### 該当のソースコード
+```ここに言語名を入力
+ソースコード：
+■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+ <head>
+  <title>corporate-site</title>
+  <link rel="stylesheet" href="style.css">
+ </head>
+ <body>
+  <header>
+   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="111px" height="48px"></a></h1>
+   <ul class="sec-navi">
+    <li class="header-list"><a href="#">企業理念</a></li>
+    <li class="header-list"><a href="#">施工事例</a>
+    <li class="header-list"><a href="#">採用情報</a>
+    <li class="header-list"><a href="#">お問い合わせ</a>
+   </ul>
+   <p class="mainvisual-text">街を作る。未来を作る。
+</header>
+ </body>
+</html>
+■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+@charset "UTF-8";
+.html {
+ font: 100%;
+}
+.mainvisual {
+ position: relative;
+ width: 500px;
+}
+header {
+ background-image: url(img/main.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 700px;
+}
+.sec-navi {
+ margin-right: 0px;
+}
+a {
+ color: gray;
+}
+a:hover {
+ opacity: 0.5;
+}
+.header-list {
+ display: inline-block;
+ list-style: none;
+ vertical-align: middle;
+ float: right;
+ margin-right: 55px;
+ margin-top: 55px;
+ justify-content: space-between;
+}
+.header-list a {
+ text-decoration: none;
+}
+.logo {
+ float: left;
+ margin-top: 30px;
+}
+.mainvisual-text {
+ text-align: center;
+ display: inline-block;
+}
+```
+### 試したこと
+＞①タイトルの中央に持ってくる。
+display: inline-block;を試しましたが、文字は少し移動したものの中央には行きませんでした。
+＞②重要なロゴ画像の画質が荒くなってしまっている。
+   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" __width="111px" height="48px"__></a></h1>
+斜体の部分「width="111px" height="48px"」を加えてから、画質が荒くなりました。
+別の方法でサイズ指定した方が良いのでしょうか？
+＞③リストを一番右に寄せる。余白スペースをなくすには？
+すいません、これは考えても分かりませんでした。
+### 補足情報（FW/ツールのバージョンなど）
+■使用ツール
+・Terapad

タイトル変更、質問の内容文修正、サイトURL削除、

2021/03/06 08:53

投稿

JAQKxsuke

スコア11

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~蒼乃建設の~~ヘッダー完成させたい
1	+ 【模写】ヘッダー完成させたい

test CHANGED Viewed

@@ -4,9 +4,9 @@
 【ヘッダーの完成html及びcss】
-蒼乃建設のコーポレートサイトを作成しています。
+練習のためコーポレートサイトの模写をしています。
-自力で解決できなかった問題は下記3点です。
+自力で解決できなかった問題点3点です。
 ①タイトルの中央に持ってくる。
@@ -22,14 +22,6 @@
-■作成中のホームページURL（コーポレートサイト）
-作成中→[蒼乃建設：コーポレートサイト](http://jaqkxsuke.sakura.ne.jp/corporate/index.html)
-完成版→[見本](https://danblog.tokyo/#)
 ■使用言語
 ・HTML