【2021年6月版】GitHubのプロフィールを盛り盛りにする！？
GitHubのプロフィールに独自のコンテンツを載せてみよう。 dev.to にてGitHubのプロフィールを素敵にするための記事が載っておりました。 こちらの記事を参考にGitHubのプロフィールをモリモリにしてみましたので手順をご紹介いたします。 基本的な手順 GitHubのプロフィール画面に独自のコンテンツを載せる準備は以下の手順でおこないます。...
View ArticleCSSで背景画像をフェードイン切り替え
仕様書の指定 ・ヒーローイメージを6秒毎に6枚フェードインで切り替え。 ・JavaScriptやjQeryは使わずにcssアニメーションで実装。 ・フェードイン後は徐々にズームしていく感じ。 HTML style属性で背景画像６枚を指定 index.html <section class="l-hero"> <div class="l-hero__bg"...
View Article【初心者向け】何個知ってる？WEBでつかわれるメニューボタンの名前
どうも7noteです。普段作っているけど以外と知らないアレの名前をまとめてみた。 三本線のメニューや、[・・・]となっているメニュー。など。 「正式名称・・・わかりますか？」 ①「ハンバーガーメニュー」 この三本線のメニューの正式名称は・・・「ハンバーガーメニュー」 ファーストフードの王道であるハンバーガーをイメージしたメニューですね。...
View Article職業訓練 webプログラマ養成科 1ヶ月目
職業訓練1ヶ月目の感想 今週で職業訓練を受講し始めて1ヶ月が経ちました。今の受講生は14人で、なぜか分からないが１日目に一人退校されました。レベルが低すぎたのかな？😹 これまでは主にHTML,CSSを勉強し、簡単なWebページなどの作成ができるようになりました。受講前まではHTMLを甘くみていたのですが、色々できる事に感動して、シングルページを作りまくって遊んでいました。笑...
View Articleインラインとブロックの区別
CSSのdisplayプロパティを使って、inline、inline-block、blockの3つを指定できます。 インライン インラインは横並びになる要素で、テキストにかかわる要素です。 Heightやwidthの指定ができないのが特徴です。 デフォルトでインラインになる要素は、「a」や「span」などです インラインブロック（display:inline-block）...
View Article便利だと思ったvscodeショートカット集
はじめに 調べればいくらでも出てくるが、多すぎて逆にまとまらない。 個人的に知らなくて便利だと思ったショートカットをまとめる。 適宜追加削除する可能性あり。 本文 キー 動作 Ctrl + 移動キー 単語ごとの移動 Shift + 移動キー 選択、Ctrlも押すことより効率的に Ctrl + Shift + K 行ごと削除 Alt + 移動キー 選択したものを行ごと移動 おわりに 作業効率あげたい。...
View Article名もなきスタイルでいいんじゃないか説
※この記事は、スライドモードでご覧ください 1990年代後半 CSSはまだ普及していなかった どのようにHTMLを装飾していたか index.html <h2 align="center"> <font color="#ff0000" size="7">やめ太郎について</font> </h2> htmlファイルの中に直書きしていた...
View Article【GIF動画でわかる】HTMLの要素を真ん中に持ってゆきたいが、どんなCSSを当てていいかわからないとき試してほしい方法。
動画の解説 Chromeを起動し、Chrome Developer toolsを開きましょう。 elementsパネルから真ん中に持ってゆきたい要素を選択しましょう。 次にelement.styleにcenterと入力してみましょう。するとスタイル候補がズラッと表示されるはずです。 候補が表示されたら、上下キーで順番に候補を変えていきます。 画面表示が真ん中に変わるものが見つかりましたか？...
View ArticleScrollRevealを使ってNextJS(React)でスクロールアニメーションを簡単に実装する方法
はじめに フロントエンドでReactやNextJSを使用しているときにスクロールアニメーションをコンポーネント化して簡単に使用する方法を見つけたので、共有します。 スクロールアニメーションを実装する アプリケーションやWebサイトを作成する時にアニメーションがあったりすると途端に本格的に見えたりしますが、CSSで実装するのは中々面倒だったりします。...
View Articleinputタグには擬似要素が効かない
inputタグには疑似要素が効きません 結論:inputタグをdivタグで囲う。囲ったdivタグに疑似要素を指定する。 下記のようなinputタグの後ろに装飾としてboxがつくような例とします。 divの場合 See the Pen abJPrqa by がうがう (@gawgaw-2020) on CodePen. inputの場合 divタグをinputタグに変えてみます。...
View Articlecssを使って画面右下に投稿ボタンを作成する
やりたい事 ・twitterのios版みたいに画面右下に投稿ボタンを作成する ・投稿ボタン全体をクリックできるようにする 完成図 今回作ったのは右下の空色のボタン 投稿ボタン(div)全体をクリックできるようにする show.html.erb <a href="/"> <div class="post-btn"> <i class="fas...
View ArticleTailWindCSSのクラス名を考えなくていいというのはデメリットだと思う
Tailwindcssを軽く触ってみてclass長くなって可読性低そうとか色々思うところがあったんですが、なによりも最悪なのはclass名を考えないことをメリットとしてあげていることだと思います。 コンポーネント設計やドメイン設計、命名規則などを整備していれば基本的にクラスの命名で悩むことはあまりありません。...
View ArticleHTML&CSSとWebデザイン入門講座本をやってみた結果
HTML&CSSとWebデザイン入門講座本 やってみた結果 数日前、こんな本を書店で見つけた。 pythonでwebアプリを作ったことがあったので初心者ではないが、webページを作ってみたくて買ってみた。 完成形は載せれないので、 写真の全てをペンギンに変えてみた。 ペンギンホームページ作ってみた。 それがこちらです。 本の名残が残るペンギンホームページとなりました。 やってみた感想...
View Article夏の風物詩の一つ、音色を楽しむ風鈴(ふうりん)をCSSで作ってみた
どうも7noteです。夏の風物詩、風鈴(ふうりん)を作ってみた。 だんだんと暑い日が続く中、チリーンというあの音が聞こえてくると、「あぁ、今年も夏が始まったんだな」と思います。 そんな夏の風物詩である風鈴(ふうりん)をCSSで作ってみました。 あんまり関係ないですが、四季を表現しているホームページっておしゃれでとても好きです。 ソース index.html <div...
View ArticleVite + Vue3 + Windi.CSS の環境構築
はじめに Windi.CSSを使ってみたくてVite + Vue3 + Windi.CSSで環境構築をしたので手順をまとめました。 Windi.CSSについては別で記事を書きます プロジェクト作成 今回はnpmを使ってインストールしました。 $ npm init @vitejs/app ? Project name: › windi-sample vanilla ❯ vue react preact...
View Article[CSS] 要素をきっかり3分割するCSSの書き方
CSSで要素を３分割する方法です。 例えば以下のように画像が3つの状態があるとします。 <div class="img-container"> <img src="hoge1"> <img src="hoge2"> <img src="hoge3"> </div> .img-container { display: flex; }...
View Article文章を一部縦書きにしたい。
一部文章を縦書きにしたい場合があると思います。今回は例を ありがとう としたいと思います。 縦書きにするCSS writing-mode: vertical-rl; ＊上記の場合、テキストを右から左に並べます。一般的な日本語の縦書きです。 ちなみにvertical-lrにした場合左から右に並べられます。 しかし、これだとただ９０度回転しただけなため、一般的な縦書きにはまだならないです。...
View Article【tailwind css】 実装例で学ぶシンプルなアニメーション
はじめに tailwind cssでアニメーションを学び始める際、拡大・移動などごくごくシンプルなアニメーションの実装例がなかったので、記事にまとめてみました。 この記事では、以下の実装を紹介しています。 拡大 繰り返さない 実行時間を変える 左右に移動 もっと小刻みに移動 回転 色を変える 組み合わせる 実行環境 next.js: version 11.0 react: version 17.0...
View ArticleCSSの3D系の操作を使いこなせるようになりたい！〜初級編：手前や奥に動かしたい！〜
※ タイトルが「初級編」となっていますが、続編を記載する予定はありません m(_ _)m あらすじ メルカリの企業サイトを拝見したところ、 創作意欲をかきたてられるUIアニメーションが豊富に使われており、衝撃を受けました。 とくにサイドメニューを表示したとき、メインページが左下に避けるように動く動作に感動しました。 自分も、もっとtransformプロパティを使いこなして、...
View ArticleWEBサイトの『画面スクロール速度上限』を設定するスクリプト
フロントエンドの仕事で 「ユーザーごとにスクロール速度がまばらだと見え方が均一にできないから、スクロール速度に上限を付けてほしい」 という依頼があったので、メモがてらコードを置いておきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">...
View Article