私は就職活動で内定をもらうためにhtmlとcss、jQueryによってポートフォリオを制作しています。内定をもらえる確率が100%に近くなるように色や文字の編集、付け加えた方が良いjQueryの書き足しをよろしくお願いします。
[https://takumi212.github.io/myprofile/]
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>MyProfile</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="scripts.js"></script> <body id="jbody"> <!-- <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script><script>bubbly();</script> --> <header> <h2 class="outline3">このポートフォリオについての解説</h2> <p class="outline1">クリックすると表示されます。</p> <p class="outline2"> 私は現在、就職活動をしています。このポートフォリオはhtmlとcss、javascript（jQuery）を使用しながら制作しました。私はプログラミングを、おおよそ８００時間の経験を積み重ねています。Progateという練習サイトにて、一つのコースにつき１０周以上の訓練をしたり、ドットインストール、CODEPREPを訓練したり、オリジナルサイトを５枚以上作ったりして現在の実力まで定着させました。また、私はタッチタイプが速いです。高校生時代と大学生時代にWordとExcel、Powerpointの訓練をしています。こうした実力を駆使して社会に貢献したいです。よろしくお願いします。</p><br> <h5>※このポートフォリオはMacbookPro13とiphoneXRの画面に対応しています。</h5> </header> <div class="main"> <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script> <script>bubbly();</script> <div class="left-box"> <img src="sakura.jpg" width="288" hight="225"> </div> <div class="right-box"> <!-- １番目 --> <h1>プロフィール</h1> <hr size="10" style="background-color: black;"> <p>名前：河合拓海<br>住所：静岡県磐田市👉静岡県静岡市👉神奈川県横浜市<br>学歴：静岡英和学院大学<br>趣味：トレーニング、人との会話、食事、読書</p> <br> <!-- ２番目 --> <h2>Skill</h2> <hr size="10" style="background-color: black;"> <div class="html" data-text="私はhtmlを使いながらWebサイト上に文字や画像、リンクを表示させることができます。">html</div> <div class="css" data-text="私はhtmlによって表示させたモノの色や大きさを自在に変えることができます。また、完成させたWebサイトをパソコンとタブレット、スマホなどの画面の大きさに変えられます。">css</div> <div class="JavaScript" data-text="私は、Javascriptを使用する中で、webページに変化やjQueryによるアニメーションを加えられます。">JavaScript</div> <div class="Python" data-text="Pythonは、私がProgateにて10周以上の訓練をしていますが、実はProgate以外の場所で扱えた経験はありません。">Python</div> <!-- Javaについて書いている途中 --> <div class="Java" data-text="Javaは、私が現在学習をしています。">Java</div> <div class="Word" data-text="私はWordにて、社内文書や案内状などの長い文章を作成することができます。">Word</div> <div class="Excel" data-text="私はExcelにて、文字の入力をしたり関数を扱ったりしながら、グラフや表を作成することができます。">Excel</div> <div class="PowerPoint" data-text="私はPowerPointにより複数回、プレゼンテーションをするための資料を作成しました。">PowerPoint</div> <br><br><br> <!-- ３番目 --> <h3>MySite</h3> <hr size="10" style="background-color: black;"> <a id="instagram" href="https://www.instagram.com/p/CYp4MeQPhaOjWvFLWO-9-SWRezI9nVFRUl6nuk0/?utm_medium=copy_link" >Instagram</a> <a id="facebook" href="https://ja-jp.facebook.com/people/河合拓海/100034091897785/" >Facebook</a> </div> </div> <p><a href=""></a></p> <footer> <!-- <p><input type="date"></p> --> <h3>＠Takumi.profile</h3> <!-- <p class="one-more">ここをクリックするともう一枚のWebサイトに変わります。<a href="https://takumi212.github.io/achievements/" alt="ここをクリックするともう一枚のWebサイトに変わります。"></a></p> --> </footer> </body> </html>
cssはこちらです。
style.css html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } html { /*height: 100%;*/ /*width: 100%;*/ } body { font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; background-color: #C0C0C0; /* height: 100%; width: 100%; */ } .li { list-style: square inside; } /*PCの場合*/ @media screen and (min-width: 950px) { body { font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; background-color: #C0C0C0; height: 100%; width: 100%; } header { /* padding-top: 10px; */ display: grid; justify-content: start; grid-template-columns: auto,auto; opacity: 0.5; background-color: rgb(255, 0, 183); cursor: text; display: block; } header .outline1 { font-size: 60px; color: yellow; display: flex; text-align: center; margin-left: 330px; font-family: "Arial Black"; font-weight: bold; } header .outline2 { } header .outline3 { text-align: center; display: block; } header h4 { writing-mode: vertical-rl; color: yellow; grid-column: 1; grid-row: 1 / span 2; background: black; } header h2 { text-align: center; /*grid-column: 2;*/ /*grid-row: 1;*/ overflow: hidden; } header p { font-family: sans-serif; /*grid-column: 2;*/ /*grid-row: 2;*/ overflow: hidden; } header h5 { display: flex; align-items: flex-end; } .left-box { width: 100%; /*height: 300px;*/ position: relative; /*background: darkred;*/ /*width: 80%;*/ height: 50px; text-align: center; /*margin-left: 10%;*/ } .left-box:before { top: 0; left: 50%; width: 50%; height: 100%; content: ''; position: absolute; /*background: #e3d7a3;*/ } .left-box img { /*margin-left: 25%;*/ margin-right: 750px; vertical-align: middle; margin-top: 125px; border-radius: 10px; border-image: linear-gradient(#f6b73c, #4d9f0c) 30;; color: #474747; background: whitesmoke;/*背景色*/ border-top: double 7px #4ec4d3; border-bottom: double 7px #4ec4d3; border-left: double 7px #4ec4d3; border-right: double 7px #4ec4d3; } .right-box { float: right; width: 50%; background-color: #FAB1AF; z-index: 1; padding-bottom: 20px; } .html { border-radius: 5px; background-color: yellowgreen; display: inline-block; padding: 3px 4px; margin-left: 5px; } .css { border-radius: 5px; background-color: lightyellow; display: inline-block; padding: 3px 4px; } .JavaScript { border-radius: 5px; background-color: lightblue; display: inline-block; padding: 3px 4px; } .Python { border-radius: 5px; background-color: skyblue; display: inline-block; padding: 3px 4px; } .Java { border-radius: 5px; background-color: rgb(170, 119, 68); display: inline-block; padding: 3px 4px; } .Word { border-radius: 5px; background-color: lightblue; display: inline-block; padding: 3px 4px; } .Excel { background-color: darkturquoise; border-radius: 5px; display: inline-block; padding: 3px 4px; } .PowerPoint { background-color: orange; border-radius: 5px; display: inline-block; padding: 3px 4px; } .html,.css,.JavaScript,.Python,.Java,.Word,.Excel,.PowerPoint { position: relative; cursor: pointer; border-radius: 5px; padding: 3px 4px; margin-bottom: 5px; display: inline-block; } .html:hover::after, .css:hover::after, .JavaScript:hover::after, .Python:hover::after, .Java:hover::after, .Word:hover::after, .Excel:hover::after, .PowerPoint:hover::after { content: attr(data-text); left: 50%; top: -2.5rem; transform: translateX(-50%); display: inline-block; white-space: nowrap; position: absolute; z-index: 2; border-radius: 5px; padding: .5em .6em; color: black; background: white; box-sizing: border-box; } /* 飛び出している部分1 */ .html:hover::before, .css:hover::before, .JavaScript:hover::before, .Python:hover::before, .Java:hover::before, .Word:hover::before, .Excel:hover::before, .PowerPoint:hover::before { content: ""; display: block; position: absolute; z-index: 2; bottom: 12px; left: 50%; transform: translateX(-50%); border: 12px solid transparent; border-top: 12px solid white; box-sizing: border-box; } a#instagram { background: linear-gradient(135deg, #427EFF 0%, #F13F79 70%) no-repeat; overflow: hidden; font-size: 20px; font-weight: bold; letter-spacing: 0; position: relative; border-radius: 4px; margin-left: 15px; margin-right: 10px; text-decoration: none; margin-bottom: 5px; } a#facebook { background: #3B5998; overflow: hidden; font-weight: bold; font-family:'Courier',sans-serif; border-radius: 4px; font-size: 20px; color: white; text-decoration: none; } footer { /*position: absolute;*/ /* position: fixed; width: 100%; */ margin-bottom: 130px; text-align: center; } footer h3 { padding-top: 20px; background-color: darkorange; height: 40px; } }
こちらはjQueryです。
// 現在書いている途中。 'use strict'; // ここから切る。 // [scripts.js]を使用している。 // headerにクリックすると3か4行の文章が表示されるようにする。 $(function() { $("header").children(".outline2,h5").hide(); $("header").children(".outline1").show(); $("header").click(function() { // $("header,p").hide(2000); $("header").children(".outline2,h5").show(500); $("header").children(".outline1").hide(2000); } ); }); // 背景に泡が流れているようにしている。 bubbly({ gradientStart: '#fff4e6', gradientStop: '#ffe9e4', shadowBlur: 1, compose: 'source-over', fillFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`, });
0 コメント