JavaScriptを使って簡単なおみくじ
仕様 今回はドットインストールより、JavaScript使った簡単なおみくじの作成をしました！ Math.randam()を使い０以上１未満で数値を生成しif文を使い条件別に確立を決め、 ボタンを押すと結果が表示されます。 const btn = document.getElementById("btn"); btn.addEventListener("click", ()=> { const...
View ArticleCSSで進捗サークルチャートを描いてJavaScriptで可変
backgroundにradial-gradientとconic-gradientを組み合わせて適用すればできそうな感じだったので試してみました。 <div style=' width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(#fff 80px, transparent 80px),...
View Article「scroll-snap」ちょっとのスクロールで勝手にスクロール位置をコンテンツに合わせてくれるやつ
どうも7noteです。画面スクロールをスライドショーみたいにちょうどいい感じの位置まで勝手にスクロールしてくれるアレ（スクロールスナップ）です。 語彙力なさすぎて悲しいのですが、コンテンツに合わせてスクロール位置を自動調整してくれるプロパティ「scroll-snap」を紹介しようと思います。 日本語でも普通にスクロールスナップと呼ぶのが一般的なんですかね、おそらく。...
View ArticleHTMLとCSSをバカにしたらいかん
経緯 プログラミングを勉強した当初、HTMLとCSSは勉強する必要がないという記事を見かけたこともあり、 HTMLとCSSの勉強をおろそかにしたままPHPやSQLの言語習得を目指しました。 しかし、お仕事の話や就職活動の話の中で最低限のサイトを構築できるくらいのHTMLとCSSは身に着けるほうが良いという話も頂いたのでHTMLとCSSの基礎だけでも身につけたいと考えました。...
View ArticleHTMLタグにdatasetを指定して進捗サークルチャートを表示させるスクリプト
こちらの記事の続きです。 HTMLドキュメント内のタグにdatasetを指定して進捗サークルチャートを表示させるためのスクリプトです。 ユーザー操作や時間経過等で可変させることは想定していません。 スクリプト circle_chart.js 'use strict'; { window.addEventListener('DOMContentLoaded', function() {...
View ArticleVue3 での textareaの高さを自動で設定する方法
結論 Vue props: { text: String, id: String, }, data() { return { txt: this.text, i: this.id, } }, computed:{ rows() { if(this.txt === null) { return 4 } else{ let num = (this.txt.match(/\n/g) ||...
View Article独学でJavascriptを学んだ素人がもう一度1から学びなおす Part1
動機 これまで独学（テキストとweb情報ベース）でHTML/CSS/Javascriptを学習しながら、HTAを個人利用の範疇で作ってきた。 しかし、ツールとして使えはするものの、如何せんコードが煩雑だったり、ページの見栄えも一昔前のデザインにしか見えず、自分のスキルとして出すにはあまりに恥ずかしい出来栄えだ。 一念発起し、有償のオンライン講座を受講することにした。...
View Article【SASS・CSS】nth-of-typeを孫要素など配下の指定した要素のみに適用する簡単な方法
nth-of-typeを使ってネストした深い要素にスタイルを適用する方法について。 ある深い要素にスタイルを適用するには、繰り返す親要素にnth-of-typeを適用し、その配下でタグを絞り込むと簡単に適用できる。 .css 繰り返す親要素のセレクタ:nth-of-type() 対象のセレクタ { 処理 }...
View ArticleHTML・CSSのテンプレート
よく「あ！これHTML/CSSで作ってみたいなー」と思うことがあって、いまだにタグが曖昧なので、「文字コードの指定ってどのタグだっけ？」ってよくなるので、HTMLファイルおよびCSSファイルのテンプレートを投稿しておきます。 HTML index.html <!-- HTMLテンプレート --> <!DOCTYPE html> <html>...
View Article【CSS】寝られないからスラ〇ム動かしてみた
はじめに 寝られないのでコーディング・・・するほど元気もないのでとりあえずスラ〇ム動かしてみた。 動かす画像 権利関係いろいろありそうなので頭のトンガリを少なくして画像作成っと 制作時間1分。やはりスラ〇ムは書きやすい。 動かす ここのサイトからアニメーション用のCSSをコピペ （コピペでOKみたいなサイトは本当にありがたい） 継続して動くように少し修正 animation: infinite...
View ArticleCSS: 無料フォントと縦書きWeb書道入門
Web書道 http://web-shodo.com/ とやらが終了していてかなしかったのでそれに着想を得て遊んだ記録。 CSSで縦書きという知識 端的にはこれ div { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } 結果このように してみた。 Google...
View ArticleHTMLCSSなら3日でできるようになる①
新米UIUXデザイナーがHTMLとCSSを学んで副業でサイトを作ったりできるようになったので、勉強するプロセスをまとめました。 勉強する順番 [1]エディタのインストール [2]基本的なCSSの記述を学ぶ [3]HTMLでよく使うタグを学ぶ [4]レイアウトを学ぶ [5]とりあえず簡単なページを作ってみる [6]ちょっと本格的なページを作ってみる [1]エディタのインストール...
View ArticleCSSのradial-gradient、conic-gradientで描いた円グラフをJavaScriptで可変
今回もこちらの続きのような感じですが、単項目の進捗度ではなく複数アイテムの円グラフを描いてみました。 JavaScript circle_graph.js 'use strict'; function drawGraph(obj) { const baseElement = document.getElementById(obj.targetId); if(baseElement === null)...
View Articlebox-shadowを用いてクリックするとボタンが凹むようにする
実現したいこと 動画見たく、クリックするとボタンが凹むような挙動にしたい。 結論 以下の2つをやります hover要素でbox-shadowを付与 active要素でbox-shadowを削除。margin-topを付与 コード こんな感じになります。 a { display: inline-block; text-decoration: none; background-color:...
View Article背景の画像や色によって文字色のテイストが変わる文字加工
はじめに 背景の色や写真の輪郭に合わせて文字のテイストが変わる、ファーストビューで文字をアニメーションでスライドさせたい時といったインパクトを持たせたい箇所に使えそうな、簡単で面白い合成加工方法があったのでメモ。 コード <div class="background"> <div class="blend-txt">blend-txt</div>...
View Article[web制作] 痒いところに手が届くカード実装 ①
皆さんはこのデザインをどの様に実装しますか。 このデザインをコーダーさんに依頼した際に帰ってくる実装は大きく分けて3パターン考えられると思います。 HTMLは以下です。 index <ul class="list"> <li class="card"> <p class="title">タイトル</p> <figure><img...
View Articlecssだけで電球を作ったので、jsと組み合わせてwebサイトを明るくしてみた
どうも7noteです。電球を作って、サイトを明るく照らしてみた。 全然関係ないですが、市販の電球って、わざと寿命が設定されているらしいですね。 中心部分のぐるぐるのところ（フィラメント）を超ほそくしておくことで、何年かで切れるとか。 なのでフィラメントがそれなりに太い電球を作れば生きてる間は切れない電球とかも作れるのかも。（実際に100年以上ついてる電球があるらしい）...
View Article【aタグ】リンクを新しいタブで開く仕様にする方法
aタグとtarget 属性 表示先をtarget属性を使用して設定することができる。 一般的なaタグ <a href="ここにリンク先のURLを入れる">○○○○○</a> 同じタブで開く <a href="ここにリンク先のURLを入れる target="_self">○○○○○</a> or <a...
View Article【コピペ用】画像の比率を１：１に切り取るCSS
画像ファイルに比率を１：１にしたいと思ったことありませんか？ 少なくとも１度は思うこと。 今回はそんな悩みをコピペするだけで解決できる方法をお教えします。 コピペの量も全く多くないので、是非ストックして必要な時にコピペしてください。 この記事を書くにあたってYoutuberのトラハックさんの以下の動画を参考にさせて頂きました。 ・Cloud...
View Article