K

休学中の理系大学生/アイコンは春さんのノーコピーライトガールより"EVERGREEN。"

K

休学中の理系大学生/アイコンは春さんのノーコピーライトガールより"EVERGREEN。"

  • ポートフォリオ備忘録

    ポートフォリを作成していく中で面白かった技術を適当にまとめたやつ。

ポートフォリオ備忘録 -spanタグ-

テキストの一部だけ色を変えたぁい！！目的 プロフィール内で「Ida Takuma」(本名です。)と「February.20,2004」の文字列のうち「I」「k」「u」「y」だけ色を変えたい。 …

K
K
1か月前

ポートフォリオ備忘録 -ファビコン-

タブの左側にあるアイコンオシャレにしたいよね目的 たくさんタブ開くとあのアイコンだけ表示されるんですけど、何も設定してないと地球儀みたいなアイコンでちょっとダ…

K
K
1か月前
1

どうも。

前書きこれは自己紹介的な記事です。 きまぐれに更新していくので物好きな方は読んでくださると嬉しいです。 自己紹介名前 Kです。(一番好きなアルファベットなだけです…

K
K
1か月前
9

ポートフォリオ備忘録 -youtubeリンクのリスト化-

youtube動画リストの横スクロール表示目的 運営してるyoutubeチャンネルの動画をideogramを利用して生成した画像と同じ形式で表示したい。 実際のコード/html <ul clas…

K
K
1か月前
2

ポートフォリオ備忘録 -画像のダウンロード禁止-

サイト内の画像保護目的 一応販売してるしダウンロードさせたくないので。 pixtaの審査が終わるまで作品欄に直接貼ってる画像(ideogram利用)。 後学のためにも。 実際の…

K
K
1か月前
2

ポートフォリオ備忘録 -横スクロール-

リストの横スクロール目的 作品一覧を横スクロールにまとめたい。 一つのジャンルの作品だけで縦に長くなると読みにくいから。 実際のコード/html <ul class="unorderd…

K
K
1か月前

ポートフォリオ備忘録 -テキストの回転-

三次元的に奥に回転するテキスト目的 トップビューのテキストの表示に遊び心を持たせてみたい。 実際のコード/html <section class="area_top_view"> <div clas…

K
K
1か月前
1

ポートフォリオ備忘録 -section間グラデーション-

-section間のグラデーション-目的 ポートフォリオのページをスクロールするときにトップの画像から作品一覧のセクションへの切り替わりがつまらなかったので変化を持たせ…

K
K
1か月前
K

K

ポートフォリオ備忘録 -spanタグ-

ポートフォリオ備忘録 -spanタグ-


テキストの一部だけ色を変えたぁい！！目的

プロフィール内で「Ida Takuma」(本名です。)と「February.20,2004」の文字列のうち「I」「k」「u」「y」だけ色を変えたい。
現在使ってるハンドルネームが「K」と「yuki」なので。

実際のコード/html

<div class="name_div"> <p class="name"><span class="blue">I

もっとみる
K

K

ポートフォリオ備忘録 -ファビコン-

ポートフォリオ備忘録 -ファビコン-


タブの左側にあるアイコンオシャレにしたいよね目的

たくさんタブ開くとあのアイコンだけ表示されるんですけど、何も設定してないと地球儀みたいなアイコンでちょっとダサいから変えたい。

実際のコード/html

<link rel="icon" type="image/png" sizes="16x16" href="cmn/favicons/snowflake_white.svg"><meta

もっとみる
K

K

どうも。

どうも。


前書きこれは自己紹介的な記事です。
きまぐれに更新していくので物好きな方は読んでくださると嬉しいです。

自己紹介名前

Kです。(一番好きなアルファベットなだけです。二番はYです。)

性別

どちらかと聞かれれば男です。
アイコンは完全に趣味です。(春さんの絵好き好き大好き。)

note始めた理由ポートフォリオ備忘録について

半年前、唐突に自身のポートフォリオHPを作り始めたものの、情報

もっとみる
K

K

ポートフォリオ備忘録 -youtubeリンクのリスト化-

ポートフォリオ備忘録 -youtubeリンクのリスト化-


youtube動画リストの横スクロール表示目的

運営してるyoutubeチャンネルの動画をideogramを利用して生成した画像と同じ形式で表示したい。

実際のコード/html

<ul class="unordered_list_works"> <li class="list_works"> <iframe class="list_video" src="https://www.yout

もっとみる
K

K

ポートフォリオ備忘録 -画像のダウンロード禁止-

ポートフォリオ備忘録 -画像のダウンロード禁止-


サイト内の画像保護目的

一応販売してるしダウンロードさせたくないので。
pixtaの審査が終わるまで作品欄に直接貼ってる画像(ideogram利用)。
後学のためにも。

実際のコード/css

.works_img { /*PCの長押し禁止*/ pointer-events: none; /* SPの長押し禁止 */ -webkit-touch-callout:none; -web

もっとみる
K

K

ポートフォリオ備忘録 -横スクロール-

ポートフォリオ備忘録 -横スクロール-


リストの横スクロール目的

作品一覧を横スクロールにまとめたい。
一つのジャンルの作品だけで縦に長くなると読みにくいから。

実際のコード/html

<ul class="unorderd_list_works"> <li class="list_works"><img src="cmn/img/ideogram/test.jpeg" class="works_img" onselectsta

もっとみる
K

K

ポートフォリオ備忘録 -テキストの回転-

ポートフォリオ備忘録 -テキストの回転-


三次元的に奥に回転するテキスト目的

トップビューのテキストの表示に遊び心を持たせてみたい。

実際のコード/html

<section class="area_top_view"> <div class="container"> <!-- <p class="top_ttl">Ida Takuma</p> --> <!-- <p class=

もっとみる
K

K

ポートフォリオ備忘録 -section間グラデーション-

ポートフォリオ備忘録 -section間グラデーション-


-section間のグラデーション-目的

ポートフォリオのページをスクロールするときにトップの画像から作品一覧のセクションへの切り替わりがつまらなかったので変化を持たせたかった。

実際のコード/css

.area_top_view { position: relative; background: linear-gradient(to bottom, transparent 0%, t

もっとみる