質問: ![![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/48bf71f99079b730441e35c169d3fd82.png)](ecb630dfc640d62b774e618a29b35f07.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/37ecc35fcd084e59fb57dde8f936306c.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/fc2dbb43da504f3bb8d02f49de0e21e0.png) プログラミングを初めて数日です。 htmlとcssで簡単なホームページを作成しています。 以下の2つのことが調べてもわからず、質問させて頂きました。 1 AboutからContactを中央揃えにしたいです。 2 About Work Blog Twitter Instagram Contact のように、twitterから行を変えて、2行にしたいです。
回答: 先の回答者には申し訳ないが、私は回答を元に勉強した方が良いと思ってる派なのでコードを直接記載します。 ``` INFORMATION 名前 ダミーテキスト About ... ... ... ... ... ``` ``` /* 見出し */ .heading { text-align: center; color: #000; } /* プロフィール */ .porofile { text-align: center; } .porofile-name { font-size: 130px; } .porofile-img { width: 100px; margin-left: auto; margin-right: auto; } .porofile-img img { width: 100%; /* height: auto;はデフォルト値なので書きません */ } .porofile-body { font-size: 24px; } /* ナビゲーション */ .nav { } .nav-list { overflow: hidden; /* 子のfloatの回り込み対策として(clearfixと呼ばれるもの) */ list-style: none; /* の装飾を削除 */ width: 600px; /* .nav-item * 3 なので600px */ margin-left: auto; margin-right: auto; padding-left: 0; /* の装飾を削除 */ } .nav-item { float: left; text-align: center; width: 200px; } .nav-link { display: block; font-size: 30px; color: #000; /* blackなど名称ではなく数値で記述するのが一般的 */ padding: 10px; } ``` 間違っている点。 * コンテンツが``から出てしまっている。 * HTML5で廃止されている``を使用している。(cssの`text-align: center;`で対応しましょう) * imgの画像名が日本語である。(「illust/icon.jpg」などにフォルダ名とファイル名を修正しましょう。そのままだと自分のPCで見れてもサーバーにアップロードすると見れなくなります。) * imgの`src`が自身のPCから見た絶対パスになっている。(「相対パス」について勉強しましょう) 私が書いたコードの変更点 * 間違っている点の修正(画像はダミーを利用しているので用修正) * セクショニングを行っている(「HTML5セクショニング」などで検索) * `float`で横並びにしていたので、それをもとにセンタリング センタリングの仕方については沢山方法があり、デザインによっては対応出来ない方法もあります。 センタリングの種類は、数をこなし適宜覚えるしか無いと思います。 以上。お役に立てれば幸いです。