20210509のHTMLに関する記事は13件です。

【初投稿】HTML, CSS, JavaScriptで掲示板システムを作ってみた

はじめに 普段は競技プログラミングやアルゴリズムを勉強しているのですが、今回はWebプログラミングに挑戦してみました!今回はその成果として、作ったシステムとJavaScriptフロントエンドについて紹介させていただきます! 5月11日追記:書き込みすると500エラーが出ることがある不具合があったので修正しました 掲示板の概略 【今回作った掲示板】 まずトピック画面からトピック選択 次にトークに参加または自分でトークを開始 メッセージを送信して会話します フロントエンドの紹介 フロントエンドはJavaScriptを使っています。今回は当掲示板で使用されているアンカーシステムについて紹介します。基本的には正規表現で>>1などの列を置き換えてリンクにして、そこにマウスが乗るとポップが表示されます。再帰することでポップ上のアンカーでも作用するようになっています。現在、新しいポップが下に表示されてしまっているのでそのうち頑張って直そうと思います。 PS:5月11日現在ではアンカーはクリックして作動するようにアップデートしました anc.js (function ($) { $("#comment").html($("#comment").html().replace(/&gt;&gt;(\d)/g,"<a href=id$1 class='anc'>" + "&gt;&gt;$1" + "</a>")); console.log(document); func(0); function func(n) { var l = 0; $(".anc").on("mouseenter", function (e) { if (l == 0) {//ポップは一つだけ l += 1; $(".container").prepend("<div class='pop" + n + "'>"); $(".pop" + n).css({//ポップの修飾 position: 'absolute', border: '1px solid #ccc', 'background-color': 'white', top: '0', left: '0', 'z-index': 1, width:'50%', }) var anc = $(this).attr("href"),//アンカーのhref取得 res = "<table class='table'> <tr><th>番号</th><th class='mes'>メッセージ</th></tr><tr>" + $("#" + anc).html() + "</tr></table>",//id検索 x = e.pageX, y = e.pageY; $(".pop" + n) .append(res) .css({ transform: "translate3d(" + x + "px," + y + "px,0)" }) .show(); $(".pop" + n).on("mouseleave", function () { $(this).remove(); }) func(n + 1); } }); } })(jQuery); 参考リンク Simplicity Simplicity 1 「某スレッド掲示板風」にレスアンカー機能を付けたい https://wp-simplicity.com/suport/topic/simplicity-1-「某スレッド掲示板風」にレスアンカー機能/ (2016年4月25日) 次の記事へ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【備忘録】HTML&CSS 中級編

はじめに HTML&CSS初級編の続きになります。 勉強ついでに、学習したことを備忘録としてまとめようと思います。 環境 OS:macOS エディタ:VSCode ブラウザ:Google Chrome 受講コース:HTML & CSS 中級編 2021/05/11 追記 CSSで使用したプロパティに記入漏れがありましたので、追記しました。 1 本コース中に使用したHTMLのタグとCSSのプロパティ コース学習中に登場したHTMLタグとCSSのプロパティ、それらの使用用途を簡単にまとめました。 学習中にMDNを確認しているので、コース中では使われていない用途が書かれているかもしれません。 興味がある方は、調べてみてください。 https://developer.mozilla.org/ja/docs/Web/HTML/Element HTMLで使用したタグ タグ(要素) 使用用途 header ページのヘッダーを表す要素 footer ページのフッターを表す要素 CSSで使用したプロパティ プロパティ 使用用途 text-decoration テキストに装飾を指定するアンダーラインを引いたり、訂正の線を引いたりできる(2021/05/11 追記) background-image 背景画像を指定する指定方法 background-image: url(画像のURL); background-size 背景画像の寸法を指定する「cover」を指定すると、1枚の画像で表示範囲を埋め尽くす opacity 要素の透明度を指定する0.0~1.0(0.0で完全に透明、1.0で完全に不透明)で値を指定する letter-spacing 文字の間隔を指定する display 要素をブロック要素、インラインブロック要素、インライン要素いずれかに変更できる border-radius 要素の角を丸める数字が大きいほど角が丸くなる text-align インライン要素やインラインブロック要素の配置を指定するleftで左寄せ、centerで中央揃え、rightで右寄せになる rgba 要素の色と透明度を指定するr,g,b(各0~255の256段階),透明度で色を指定する transition アニメーションをつける変化の対象(プロパティ名)、時間を指定する line-height 行の高さを指定する要素の高さと同じ値を指定すると、文字が縦方向の中央に配置される font-weight 文字の太さを変更するnormalまたはboldを指定する position 要素の位置を指定する基準位置からの位置をtopやleftなどを用いて指定する box-shadow ボックスに影をつける影をつけたい水平方向、垂直方向、影の色を指定する cursor 要素にカーソルが乗った時のカーソルの形を指定する z-index 要素の重なり順序を指定する値が大きいほど、重なったときに上部に表示される CSSの類似クラス 類似クラス 使用用途 hover 要素にカーソルが乗った時のCSSを指定する active 要素をクリックしているときのCSSを指定する 2 ブロック要素とインライン要素 ブロック要素の中には、他のブロック要素やインライン要素を配置できる。一方、インライン要素の中には、テキストデータや他のインライン要素を配置できるが、ブロック要素を配置することはできない。 また、ブロック要素とインライン要素の両方の特徴を持つインラインブロック要素というものもある。displayプロパティで指定することができる。 ・ブロック要素:前後で改行が入り、親要素の幅一杯に広がる要素(例:div、h1、pなど) ・インラインブロック要素:ブロック要素とインライン要素の両方の特徴を併せ持った要素 ・インライン要素:改行されない要素(例:span、aなど) ブロック要素 インラインブロック要素 インライン要素 width,height 指定できる 指定できる 指定できない margin,padding 指定できる 指定できる 左右のみ指定できる 配置 縦並び 横並び 横並び 3 Font Awesomeについて webページにアイコンを表示させたい場合、「Font Awesome」を使用すると良い。 ほとんどのサービスを無料で使用できる。 アイコンの一覧や詳しい使用方法については、下記ページに記載されています。 https://fontawesome.com/ Font Awesomeの導入 head要素内でCSSを読み込みます。読み込みたいバージョンを指定します。 (注:ver5.9以降を利用するには、メールアドレスを登録してアカウントを作成する必要があるようです) *省略 <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v○.○.○/css/all.css"> <!--v○.○.○には使用したいバージョンの情報を入力する --> </head> *省略 アイコンを表示させる方法 spanタグにfaクラスとfa-アイコン名クラスを指定する。 (表示させたいアイコンを公式ページで検索すると、指定すべきクラス名が出てきます) test.html *省略 <div class="test1"> <h3>ハート<span class="fa fa-heart"></span></h3> <h3>スター<span class="fa fa-star"></span></h3> <h3>amazon<span class="fab fa-amazon"></span></h3> </div> *省略 4 その他の学びや注意点について ・文字や要素の中央寄せについて  ブロック要素:marginの左右をautoに指定する(必ずwidthを併せて指定する)  インライン要素、インラインブロック要素:text-alignをcenterに指定する ・class名は1つのタグに対して複数指定でき、半角スペースでclass名を区切る 例:(class="a b") ・ボックス要素のwidthやheightをpxではなく%で指定すると、 親要素に対しての幅や大きさを指定できる。 ・positionによる基準位置の指定について  absolute:サイト全体の左上部分が基準位置となる。  relative:その要素の左上部分が基準位置となる。基準としたい親要素に指定すると、親要素の位置に対する子要素の位置を指定できる。  fixed:常に要素を画面上の指定の位置に固定させる。 最後に 続いて、上級編を学習していきます。 内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

カレンダー一覧表示

仕様と完成イメージ 画像のように更新日以降のみがカレンダーの一覧票として表示されます。また,土曜日と日曜日は色が変わります。 先月または来月のボタンを押すことで表示される月が変更されます。更新日より前の月は何も表示されなくなります。 HTML main.html <main> <h4>カレンダー</h4> <dl> <div class="innerDate"> <button class="beforemonth" id="beforemonth" type="submit" onclick="beforemonth()">先月</button> <div class="sectionDate"> <span id="year"></span> 年 <span id="month"></span> 月 </div> <button class="nextmonth" id="nextmonth" type="submit" onclick="nextmonth()">来月</button> </div> <dt id = "date0"></dt> <dt id = "date1"></dt> <dt id = "date2"></dt> <dt id = "date3"></dt> <dt id = "date4"></dt> <dt id = "date5"></dt> <dt id = "date6"></dt> <dt id = "date7"></dt> <dt id = "date8"></dt> <dt id = "date9"></dt> <dt id = "date10"></dt> <dt id = "date11"></dt> <dt id = "date12"></dt> <dt id = "date13"></dt> <dt id = "date14"></dt> <dt id = "date15"></dt> <dt id = "date16"></dt> <dt id = "date17"></dt> <dt id = "date18"></dt> <dt id = "date19"></dt> <dt id = "date20"></dt> <dt id = "date21"></dt> <dt id = "date22"></dt> <dt id = "date23"></dt> <dt id = "date24"></dt> <dt id = "date25"></dt> <dt id = "date26"></dt> <dt id = "date27"></dt> <dt id = "date28"></dt> <dt id = "date29"></dt> <dt id = "date30"></dt> </dl> <script> printDate(); for(i = 0; i <= 30; i++){ printDatenew(i); } </script> </main> CSS sample.css h4 { margin: 0; text-align: center; } dl { width: auto; height: auto; margin: 0; padding: 2px; background-color: white; border: 2px solid rgb(19, 141, 211); } dt { float:bottom; width: 100%; margin-top: 2px; background-color: rgb(223, 223, 223); } .innerDate { width: auto; margin-top: 0px; margin-right: 5%; margin-bottom: 0%; margin-left: 5%; text-align: center; } .beforemonth { width: 60px; height: auto; } .sectionDate { margin: 0, 10%, 0, 10%; width: 60%; height: auto; margin-left: 5%; margin-right: 5%; display: inline-block; display: inline; text-align: center; } .nextmonth { width: 60px; height: auto; } JavaScript script.js var today=new Date(); var mon = today.getMonth()+1; var year= today.getFullYear(); var stateMonth;//現在表示されている月 var stateYear;//現在表示されている年 var setday = new Date(stateYear, stateMonth, 0); /*今日の日付を表示*/ function printDate(){ document.getElementById("month").innerHTML=mon; stateMonth = mon; document.getElementById("year").innerHTML=year; stateYear = year; } /*来月ボタンの定義*/ function nextmonth(){ var nextMonth = stateMonth % 12 + 1; if(nextMonth == 1){ var nextYear = stateYear + 1; document.getElementById("year").innerHTML = nextYear; stateYear = nextYear; document.getElementById("month").innerHTML = nextMonth; stateMonth = nextMonth; }else{ document.getElementById("month").innerHTML = nextMonth; stateMonth = nextMonth; } for(i = 0; i <= 30; i++){ printDatenew(i); } } /*先月ボタンの定義*/ function beforemonth(){ var beforeMonth = stateMonth % 12 - 1; if(beforeMonth <= 0){ beforeMonth = beforeMonth + 12; } if(beforeMonth == 12){ var beforeYear = stateYear - 1; document.getElementById("year").innerHTML = beforeYear; stateYear = beforeYear; } document.getElementById("month").innerHTML = beforeMonth; stateMonth = beforeMonth; for(i = 0; i <= 30; i++){ printDatenew(i); } } /*有効な日付と曜日を返す*/ function getDate(i) { var er3 = 999; var lastday1 = new Date(today.getFullYear(), today.getMonth()+1, 0); var lastday2 = new Date(stateYear, stateMonth, 0); var day1 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+i); var day2 = new Date(stateYear, stateMonth-1, i+1); var you1 = day1.getDay(); var you2 = day2.getDay(); var s = day1.getDate() var d = day2.getDate() if(stateYear < year){ return [er3, 0]; }else if(stateYear == year){ if(stateMonth < mon){ return [er3, 0]; }else if(stateMonth == mon){ if(day1 > lastday1){ return [er3, 0]; }else{ return [s, you1]; } }else{ if(day2 > lastday2){ return [er3, 0]; }else{ return [d, you2]; } } }else{ if(day2 > lastday2){ return [er3, 0]; }else{ return [d, you2]; } } } /*日付を表示する*/ function printDatenew(i) { var youbi = new Array("日","月","火","水","木","金","土"); var idlist = new Array("date0", "date1", "date2", "date3", "date4", "date5", "date6", "date7", "date8", "date9", "date10", "date11", "date12", "date13", "date14", "date15", "date16", "date17", "date18", "date19", "date20", "date21", "date22", "date23", "date24", "date25", "date26", "date27", "date28", "date29", "date30"); var [date, you] = getDate(i); const dateset = document.getElementById(idlist[i]); if(date == 999){ dateset.style.display = "none"; }else{ if(you == 0){ dateset.style.backgroundColor = 'rgb(255, 163, 163)'; dateset.innerHTML = date+"日("+youbi[you]+")"; dateset.style.display = ""; }else if(you == 6){ dateset.style.backgroundColor = 'rgb(163, 221, 255)'; dateset.innerHTML = date+"日("+youbi[you]+")"; dateset.style.display = ""; }else{ dateset.innerHTML = date+"日("+youbi[you]+")"; dateset.style.backgroundColor = 'rgb(223, 223, 223)'; dateset.style.display = ""; } } }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSで途中線が切れているボックスを描く

友人から初めてサイトのコーディング依頼を受けて喜んでいたら 凄く悩むところがあったので、友人への恨みとスキルアップの喜びを 込めて記事に残しておきます。 友人から届いたサイトデザインの一部 なんだ普通のボックスやん!簡単、簡単 、、、、 なんか途中で切れてるんですけど そこから半日格闘!! 正しいやり方かどうかはわかりませんが、以下のような方法でできました。 index.html <div class="contact-form-box contact-form-centerbox"> <div class="flex contact-form-address"> <p> 500 Terry Francois St.<br /> San Francisco<br />CA 94158 </p> </div> </div> style.css .flex { display: flex; justify-content: center; align-items: center; } .contact-form-box{ max-width: 320px; width: calc(100%/3); height: 300px; } .contact-form-address{ /* ここで枠線の高さを変えている */ height: 90%; width: 100%; box-sizing: border-box; border-right: 1px solid; border-left: 1px solid; } .contact-form-address{ height: 90%; width: 100%; box-sizing: border-box; border-right: 1px solid; border-left: 1px solid; } 結果 (SNSのアイコンが違うのは見なかった事に) positin:absolute; top:-10px; とか色々試したんですがうまくいかず、この方法でなんとかできました。 他に何か良い方法があればご教授いただきたいです。 ここまで読んでいただきありがとうございました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初学者向けエラーとの戦い方

はじめに ここ最近、何度もエラーと遭遇するうちにエラーとの向き合い方が非常に良くなってきたなと感じることが多くなってきました。エラーとの向き合い方を改めて自分の中で整理したくこの記事をまとめました。 エラーとの向き合い方(気持ち面) エラーがでたとき、皆さんはどう思いますか? 「げっ、エラーだ」、「は〜まじか」、そんなふうに声が出てしまうかもしれません。 私も学生時代に始めてプログラミングを学んだときは、発狂しそうな場面に何度も遭遇しました。(笑)でも、社会人になって、転職目的でまた勉強しはじめてわかったことがあります。 それは、、、、、 「エラーは失敗する方法が判明した成功」であるということです。 まず大前提にエラーは実はとてもありがたい存在であることを認識すべきです。もしエラーなき不具合があったとして、気付けずにリリースすれば、お客様に損害を与えてしまうことだってありえます。エラーが発生することは、そうしたさらなる事故を防ぐという超ありがたい存在なのです。 とはいえ、初学者さんでリリースを想定してアプリを作られる方はあまりいないかと思います。なのでなかなか想像しづらいですよね、、(私もそうです)。でも、エラーって初学者の方が成長するための、とても優秀な教材なんです!!!! エラーが発生したら、まずその原因を調べますよね?その過程で、今まで書いた文法が正しいかどうか再復習できますし、自分のエラーパターンを把握することができますし、もしかしするとエラーによって新しい知識を得ることができるかもしれません。 結局のところ、エラーは実は敵ではない!って言うことなんです! でもいくら敵ではなくともエラーは解消したい、そんな気持ちはきっとあるはず。 そこに関しては次の章で解説します。 エラーの倒し方(気持ち+技術編) 気持ち編 エラーの倒すにあたって、絶対に必要なマインドがあります。それは、、、、 「俺なら絶対にできる」と考えることです!!! うさんくせ〜〜〜〜と思うかもしれません。でも、恐ろしいまでにこの気持ちの有無で結果は大きく変わるのです。私の場合、よくぶつぶつと「できる、絶対できる、どうだ!(エンターポチっ、エラー)」を繰り返し作業すると、だいたいエラーを倒せます。 なぜこの気持ちを持つとエラーを倒せるのか、それはナチュラルに「できるはずのことができない」と脳が錯覚し、「ということは、できるまでやるか」となるからです。最初からできないと思うと、脳が効率を求めて「できないならやっても無駄!」と考え、結局挫折するか、サボってしまいます。 けれど、「できるはず」と錯覚した脳は、できるまであらゆる仮説を立てて、実行に移そうとします。 ちなみに科学的根拠は全然知りませんが、効果は抜群です(笑) 技術編 技術については、私もプロではないゆえ、偉そうなことは言えませんが私なりの考えをまとめていきます まず、エラー原因は全てログの中に答えがあるということです。 これはおそらく真理だと思います(笑)絶対にログをみれば答えは書いてあるはずです。(あるいはまんま、画面にエラーがでているかもしれませんが) わかりませんと言う前にログを見て、怪しい部分をググって、情報を追っていくだけで、8割のことはわかります。もちろん、残りの2割のどうしても分からない部分は、プロのエンジニアに聞くなり頼ってもいいかもしれませんね。でも、まずはログを見て、情報を集めて、なんとなくあたりをつける、、、とやっていくだけでだいぶ違うかな〜と思います。 ちなみに、分からないままずーーと作業するのも効率悪いので、完全に手が止まって15分したら、誰かに聞くといいかもしれません! おわりに 初心者が偉そうにエラーについて語りました。ただ上記のことを実践した結果、プロエンジニアの方にも自走力が高いですねとお褒めの言葉も頂けたりしたので、決して間違ってはいないかな〜なんて思います! 是非試してみてください 皆さんのエラー向き合い論もぜひ知りたいのでどしどしコメントください!!!!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者向け】id名・class名で使えない文字

どうも7noteです。id名・class名で使えない文字について HTMLを書く際にidとclassはほぼ必須といっても過言ではありません。 しかし、idやclass名を書く際に使えない文字があることを覚えておく必要があります。 id名、class名で使えない文字 数字から始まるもの 数字から始まるid名やclass名は使えません <div class="123">これはダメ</div> <div class="abc123">これはOK</div> 調べたところ、どうしても数字から始まるid名やclass名を使いたい場合の方法もあるようです。 https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1 ハイフン(-)、アンダースコア(_)以外の記号 使える記号はこの2つだけです。それ以外の#だったり&を入れてしまうと効かなくなってしまいます。 エラーの原因になる可能性があるので、記号はこの2つのどちらかのみを以外使用します。 ただし、ハイフン(-)1つだけのクラス名はNGです。 <div class="-">これはダメ</div> <div class="--">これはOK</div> 半角スペース これも、使えません。 半角スペースについては、入れてしまうと半角スペースの前と後で別々のクラス名と認識されてしまいます。 <div class="hello world">helloとworldの2つのクラス名扱いになる</div> 改行 これも半角スペース同様に2つのクラス名扱いになります。 <div class="hello world">helloとworldの2つのクラス名扱いになる</div> 同一ページで複数の同じid名 要検証 同一ページ内で、同じid名を複数使うことはできません。 エラーの原因になるので必ずid名は同一ページ内では固有のものにしましょう。 使えなさそうで実は使えるもの 日本語(全角文字)・全角スペース これ、実は使えます。しかし一般的に使ってるサイトはほぼありません。 HTML5・CSS3から使えるようになっていますが、それまでは基本英語で指定していたこともありますし、ソースを見るのが日本人とは限らないこともあるので、現状英語を使うのが無難でしょう。 全角スペースだけでもクラスとして使用は可能だが、だれもこんな指定はしない。 <div class=" ">一応OK。でもだれも使わない。</div> まとめ 細かいルールの通りでいくと以下の記事でまとめられていたとおりになります。 引用: 1. 文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン(-)およびアンダースコア(_)のみを含むことができる 2. 数字([0-9])、2つのハイフン(--)、ハイフンの直後の数字(-[0-9])で開始できない 3. バックスラッシュ()で文字をエスケープできる(例: - は - を表す) 4. Unicodeエスケープシーケンスを利用できる(例: \0030 は 0 を表す) 物によって、またブラウザによってここで書かれているものでもちゃんと認識して動くものがあるかもしれません。 しかし、一般的に使えないものであり、全てのブラウザで対応していないため、この記事で紹介したものをid名・class名として使用することはおすすめしません。 【フロントエンド強化月間に参加中↓↓】 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

<button>でhref=が使えない!??【解決】

はじめに こんにちは、超初学者のなかむーです。 スクールで学んだ知識や経験などを記事を通してアウトプットしています。 今回は「buttonタグにリンク移動できるのか?」というタイトルですが、 結論から言うとYesです! < a > と href="#" a タグでは以下のようにすることで遷移できる。 <a href="signup">新規登録</a> "/signup"でも遷移できます。 < button > と href="#" buttonタグでは以下のようにすることで遷移できる。 <button onclick=location.href="signup">新規登録</button> onclick=location.を後ろに合体させるだけですね! そして、これはJavaScriptで使われているものらしいですね。 aタグでは href属性(HTML) buttonタグでは onclick属性(JavaScript) フォームの中でリンク移動が可能になるので、便利だなぁと感じました。? 引用 : HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】 ちなみに href は「エイチレフ」と読むみたいです。 恥ずかしながら、この課題に出会うまで知りませんでした...笑 至って簡単で単純ですぐ終わってしまいますが、実際に使用したところです!何かの参考になれば幸いです。?‍♂️ <div class="row justify-content-center mt-5"> <div class="col-4 text-center"> <h3>まだアカウントを<br>お持ちでない方はこちら</h3> <button type="button" class="btn btn-primary mt-5" onclick=location.href="signup" style="width:120px;height:50px">新規登録</button> </div> <div class="col-4 text-center"> <h3>すでにアカウントを<br>お持ちの方はこちら</h3> <button type="button" class="btn btn-primary mt-5" onclick=location.href="login" style="width:120px;height:50px">ログイン</button> </div> </div> 参考文献 •  HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

transition と transformの関係を理解してみる

transition と transform の関係性を理解するのに苦労したので 理解の仕方を投稿します。 アニメーションを勉強したとき、 animation @keyframes そして、transition と transform の4個の言葉が出てきました 今回は、transition と transform はどんな役割なのか?を書いていきます transition と transform transition と transform はセットで覚えた方が良い。 役割としては、『変更前』と『変更後』の中間を補完する役割があります transitionの種類 ・transition-duration 変化が始まって終わるまでの時間を指定 ・transition-property 変化が適用されるcssのプロパティを指定 ・transition-timing-function 変化の度合いを指定 ・transition-delay 変化が始まる時間を指定 ・transition 上記4つのプロパティを一括で指定 transitionで、アニメーション時間、開始前後の時間、アニメーション回数などを決めるプロパティ transformの種類 translate() 移動 rotate() 回転 scale() 移動 skew() 傾斜 perspective() 遠近感 transform-origin変形する基点を設定するプロパティ transform-style2D・3Dの表示を設定するプロパティ perspective遠近感を設定するプロパティ perspective-origin遠近感の基点を設定するプロパティ transform で、変形を設定する役割を決めるプロパティ ボタンをアニメーション ボタンをhoverしたとき、アニメーションするcodeを書いてみます。 <button class="button">button</button> .button { cursor: pointer; outline: none; font-size: 30px; width: 200px; height: 100px; background: pink; color: white; border-radius: 10px/10px; box-shadow: 10px 10px 10px #706b6b; transition-property: transform, background, box-shadow, color; ※ transition-duration: 2s; ※ } .button:hover { box-shadow: 3px 3px 3px #8a7070; transform: scale(.5); ※ background: red; ※ color: #8a7070; ※ } codepenでの記述↓↓↓ See the Pen ExWjgwz by トモゑ☛Web作成の37? (@swan2pink) on CodePen. 変更前にtransition を設定する 変更後にtransform を設定する まとめ transition は変更前に設定する transform 変更後を設定する 紛らわしいプロパティですが、引き続き理解していきたいと思います 今回は以上です ありがとうございます!!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者Webエンジニア備忘録

Qiitaはじめました こんにちは。 グチコと申します。 自分のインプットした情報をアウトプットし、身に付けるためにQiitaを始めました。 勉強した内容をアウトプットの場としてブログのような形で発信していきたいと思います! 自己紹介 2021年4月からWeb言語の勉強を始めました。 文系の大学卒でITとは関係ない仕事をしておりましたが、 Webエンジニアに興味を持ち独学で勉強を始めました。 現在、24歳で販売業からWebエンジニアを目指し独学で勉強中です。 趣味 セルフでジェルネイルをすること NETFLIX・youtubeを見ること おいしいものを食べること 性格 最後まであきらめずやり抜く 相手を理解しようとする 誰かのためにという強い気持ちを持っている 自己紹介は以上になります♪ 仕事終わりや、休日に勉強する時間を設け少しずつ進めています。 わからないことも多いですが、自分のスキルアップのためにコツコツ頑張ります! 現在学んでいること HTML CSS Java 学んでいるツール Progate udemy 2のサイトを活用し、3言語を学んでいます。 これからやっていくこと 学んだ言語を基にホームページを作っていきたいと思います。 経過をQiitaに更新していこうと思います。 最後に はじめての投稿は以上で終わります。 これから勉強を進めて、スキルアップに努めていきます! 不定期の更新になりますが、よろしくお願いします。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者Webエンジニアの自己紹介

Qiitaはじめました こんにちは。 グチコと申します。 自分のインプットした情報をアウトプットし、身に付けるためにQiitaを始めました。 勉強した内容をアウトプットの場としてブログのような形で発信していきたいと思います! 自己紹介 2021年4月からWeb言語の勉強を始めました。 文系の大学卒でITとは関係ない仕事をしておりましたが、 Webエンジニアに興味を持ち独学で勉強を始めました。 現在、24歳で販売業からWebエンジニアを目指し独学で勉強中です。 趣味 セルフでジェルネイルをすること NETFLIX・youtubeを見ること おいしいものを食べること 性格 最後まであきらめずやり抜く 相手を理解しようとする 誰かのためにという強い気持ちを持っている 自己紹介は以上になります♪ 仕事終わりや、休日に勉強する時間を設け少しずつ進めています。 わからないことも多いですが、自分のスキルアップのためにコツコツ頑張ります! 現在学んでいること HTML CSS Java 学んでいるツール Progate udemy 2のサイトを活用し、3言語を学んでいます。 これからやっていくこと 学んだ言語を基にホームページを作っていきたいと思います。 経過をQiitaに更新していこうと思います。 最後に はじめての投稿は以上で終わります。 これから勉強を進めて、スキルアップに努めていきます! 不定期の更新になりますが、よろしくお願いします。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ウェブデベロッパーのためのリソースn選的なもの20+選 2021年5月

以下イラストはDownloaded from: https://karthiksrinivas.in/ フロントエンド強化月間 に乗じるのもなかなか恐縮なのだが「ウェブデベロッパーに便利な〇〇!」「フロントエンド開発者が知っておくべきサイト!」という記事たちを内外、見かけるたびにヘエェ~と思ってただひたすら溜め込んでいたらこうなったというリスト。前置きは控え、以下。 全リスト DEV.TO 15+ Awesome Color Resources For Your Next Web Project Awesome 40+ SVG Resources For Your Next Web Project 10 Awesome CSS Resources Awesome CSS Layout Resources For Beginners 15+ Awesome CSS Animation Resources 24+ Awesome CSS Pattern Background Generators 40+ Awesome Illustrations Resources For Your Web Projects The Ultimate Web Developer Resources List ?Awesome 200+ Resources 20 useful free resources for Web Developers 40+ Useful Resources for Mastering Web Downloaded from: https://undraw.co/illustrations hashnode 200+ Ultimate Resources for Front-End Development in 2021 Downloaded from: https://unsplash.com/ GitHub Frontend Development Awesome - Manually curated collection of resources for frontend web developers. Design Resources - A curated list of design resources from design templates, stock photos, icons, colors, and much more Design-resources-for-developers Web Developer Roadmap CSS: https://uigradients.com/#GreenBeach background: #02AAB0; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #00CDAC, #02AAB0); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #00CDAC, #02AAB0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ Qiita 知っていると役に立つ!Web系エンジニア向けサービス 11選 Web制作するならブックマークしておきたいサイト色々 【2021 最新版】ノンデザイナーだからこそ知っておきたかった10のイラストサイト 非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 【本当は教えたくない…】ノンデザイナーだからこそ知っておきたかった7のサイト その他 Webデザイン制作をもっと楽に!便利な最新オンラインツール45個まとめ Downloaded from: https://www.wowpatterns.com/ まとめると 表題の n の数は700以上に達した。 だったりがちょっとした時に楽しい。やはり 記事は溜め込むだけでなく手を動かして使え というのが冒頭のフロントエンド強化月間における教訓だと考える(伏線回収)。 筆者は本業はしがないバックエンド保守担当である。こんなに普段から盛り上がる界隈がいつもすこしだけうらやましいので、懲りずまた見つけたら書き足していこうと思う。各記事執筆各位に改めて尊敬の念を込めて、なにがしか、参考になればさいわいです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

wordpressの公開URLを変更したい方、ご注意!巷の誤情報に惑わされないでください。

結論 wordpressの公開URLを変更したいと思い、ググって色々実施したものの、どうも上手くいかない。。。 そんなあなた、もしまだ以下を試していなければ、試してください。 以下の通りに設定する。(URLご自身のものに変えてくださいね) define( 'WP_SITEURL', 'http://example.com/wordpress/wp' ); →こっちが、管理ファイルのアドレス。 define( 'WP_HOME', 'http://example.com/wordpress' ); →こっちが、公開URL …僕はこれで解決しました。 本当にコンテンツSEOの弊害だと思うのですが、巷に流れている解説記事には、殆どが(僕が確認した限りではすべてが) 上記について逆で書かれています。 まぁ、公式の詳細まで確認しない僕も行けないのですが、、、。 詳細(公式から引用。) 日本語的に、SITEURLとHOMEって、意味合いが逆のように思ってしまうんですよね。 しかもどの記事もそういうふうに記載しているから、そりゃそう思い込んでしまう。 でも、逆でした。 WP_SITEURL #WP_SITEURL WP_SITEURL は WordPress アドレス (URL) を定義します。 ここで定義する値は、WordPress のコアファイルが存在する URL です。 http:// の部分は含める必要があります。最後のスラッシュ “/” は含めないでください。 wp-config.php でこの値を設定すると、 wp-options テーブルの値よりも優先されます。これを追加することで、サイトを読み込む時のデータベースの呼び出し回数を減らすことができます。 ドメイン名 example.com の wordpress ディレクトリに WordPress がインストールされている場合、 WP_SITEURL を次のように指定します。 define( 'WP_SITEURL', 'http://example.com/wordpress' ); ブログのアドレス (URL) #ブログのアドレス (URL) WP_HOME は WP_SITEURL と同様に wp_opsions テーブルの値よりも優先されますが、データベースの値は変更されません。 home は WordPress にアクセスするためにユーザーがブラウザに入力するアドレスです。 http:// の部分は含める必要があります。最後のスラッシュ “/” は含めないでください。 これを追加することで、サイトを読み込む時のデータベースの呼び出し回数を減らすことができます。 define( 'WP_HOME', 'http://example.com/wordpress' ); 公式
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Pythonで特定の国を特定の色で分類したインタラクティブな世界地図を作る (folium)

はじめに Pythonで地図の描画によく使われるであるfoliumで、グループAの国は赤色でグルーブBの国は青色で塗り分けたみたいな地図を作るのはどうしたらいいんだろう...となったのでまとめさせていただきます ちなみに以下の図のような地図にしてHTMLに出力することができます スクリーンショット 出力されたHTML (ちなみにこの記事書くのに使いました) foliumで作れる地図 依存ライブラリ folium==0.11.0 geopandas==0.9.0 以下の記事のようにコロプレス図と呼ばれる大小関係(eg: 都道府県別の新規コロナウイルス感染者数の日本地図)を表す地図はChoroplethというメソッドでmapオブジェクトに表示できるようです。この場合、どの国がどの色になるのかは連続的な(シーケンシャルな)カラーマップと対応する値で自動で決まります。しかしこれではカテゴリごとの色分けは不可能です そこでたどり着いたのが次の記事で、この実装の国を各カテゴリに色分けしている部分のみを取り出して紹介したいと思います geopandasから国境のJSONを読んでfoliumで表示 import folium import geopandas as gpd gdf = gpd.read_file('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json') # ローカルに落としてからでもよい このgdfには各国の国境を描く緯度・経度のセットが入っています これらの国を何らかの基準でカテゴリ分けします 今回はAから始まる国とBから始まる国の2カテゴリにしてみます gdf['Group'] = '' gdf.loc[gdf.name.str.startswith("A"), 'Group'] = 'A' gdf.loc[gdf.name.str.startswith("B"), 'Group'] = 'B' folium.GeoJsonにこのdataFrameの該当行を渡し、描画の設定をすることで好きな色で国に色をつけられます m = folium.Map(location=[0, 0], zoom_start=2) folium.GeoJson(gdf[gdf['Group']=='A'], # レンダリングする表示の線や色の設定ができます style_function=lambda x: {'fillColor': 'red', 'color': 'red'}, # マウスホバー時のツールチップの設定ができます tooltip=folium.features.GeoJsonTooltip(fields=['name', 'Group'],labels=True, sticky=True) ).add_to(m) folium.GeoJson(gdf[gdf['Group']=='B'], style_function=lambda x: {'fillColor': 'blue', 'color': 'blue'}, tooltip=folium.features.GeoJsonTooltip(fields=['name', 'Group'],labels=True, sticky=True) ).add_to(m)m これによりできたmapオブジェクトmは次のような表示になります。ホバーした国には指定したカラムの情報が表示されます
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む