Codejump | コーディング学習サイト
LightNews LightNews
banner
codejump.bsky.social
Codejump | コーディング学習サイト
@codejump.bsky.social
7 followers 0 following 73 posts
Web制作学習者のためのコーディング学習サイト。 模写コーディングとデザインカンプからのコーディングを通して「作れる人」を目指します。Codejumpのオフィシャルサイトはこちら →https://code-jump.com
Posts Replies Media Videos
codejump.bsky.social
autocomplete

autocompleteでフォームの入力補助ができるため、入力の手間を減らすことができます。
May 12, 2025 at 2:40 PM
codejump.bsky.social
増刷決定！

おかげさまで「HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門」の増刷が決定しました！
お買い上げいただいた皆さん、本当にありがとうございます。

これからWeb制作のコーディング練習をしていく人はぜひ手に取ってみてください！

Amazon：https://amzn.asia/d/4ukkM63
April 25, 2025 at 2:10 PM
codejump.bsky.social
readonlyとdisabled

フォームの入力項目を編集不可にしたい時、readonlyとdisabledがありますが、それぞれ意味が異なるので適した方を使いましょう！

#webデザイン #html #css
April 10, 2025 at 2:59 PM
codejump.bsky.social


dialogを使うことで、最小限のJavaScriptだけで簡単にモーダルウィンドウを作成することができます。

#html #css #webデザイン #web制作 #コーディング
April 1, 2025 at 6:15 AM
codejump.bsky.social
AmazonでAdobe CC コンプリートプランが新規対象者限定で46%オフで購入できます！

後々使う予定の人は今のうちに買っておくとかなりお得です！

amzn.to/4iLLE2v ［ad］
March 28, 2025 at 2:31 PM
codejump.bsky.social
media="print"

印刷時だけ適用される印刷用のCSSを設定することができます。
印刷に対応したWebサイトを作ることもで可能です！

#html #css #webデザイン
March 17, 2025 at 2:41 PM
codejump.bsky.social
HTMLだけでアコーディオン

detailsとsummaryタグでテキストの折り畳みができるので、簡単なアコーディオンであればこれだけで作れます！

#html #css #webデザイン
March 14, 2025 at 2:27 PM
codejump.bsky.social
CSSで自動連番をふる

counter-incrementプロパティを使うことで、リストなどに自動で連番を振ることができます！

#html #css #webデザイン
March 12, 2025 at 2:26 PM
codejump.bsky.social
shape-outside

テキストの回り込みの形をカスタマイズできるCSSプロパティです。
floatと組み合わせて使うことで、円形や複雑な形の回り込みも可能です。

float: left;
shape-outside: circle(50%);

#html #css #webデザイン
March 10, 2025 at 2:13 PM
codejump.bsky.social
borderとoutline

枠線の設定には、borderの他にoutlineもあります。
outlineは要素の外側に対して枠線を設定するので、例えばフォーカス時の強調などに使えます！

#html #css #webデザイン #web制作 #Codejump
March 7, 2025 at 2:40 PM
codejump.bsky.social
text-wrap: balance;

テキストが複数行の場合に、1行あたりの文字数が同じになるようにバランス取ってくれます。
見出しやコピーなどで文字数を揃えたいときに便利です。

#html #css #webデザイン #web制作
March 2, 2025 at 11:57 PM
codejump.bsky.social
initial-letter

::first-letter と組み合わせることで、ドロップキャップなど最初の文字を簡単に装飾することができます。

例）最初の1文字目をオレンジにして2行分の高さで表示
p::first-letter {
color: orange;
initial-letter: 2 2;
}

※ Firefox非対応

#html #css #webデザイン #web制作 #コーディング
February 27, 2025 at 1:26 PM
codejump.bsky.social
inputmode

フォームの入力欄にinputmode属性を指定することで、スマホの入力時にその入力に適したキーパッドを表示することができます。

左）
右）

#html #css #webデザイン #web制作 #codejump
February 24, 2025 at 2:57 PM
codejump.bsky.social
text-indent

段落の1行目を簡単に字下げできます。
Webではあまり字下げするケースはないかもしれませんが、いざという時に備えてストックしておいてくださいね！

#html #css #webデザイン
February 21, 2025 at 1:45 PM
codejump.bsky.social
pointer-events

noneを指定することでホバーやクリックなどのマウスイベントを無効化することができます。

例）PC、タブレットの場合だけ電話番号のリンクを無効化する

#html #css #webデザイン
February 21, 2025 at 9:21 AM
codejump.bsky.social
text-underline-offset

テキストの下線の位置を調整するプロパティです。
デフォルトの位置だと文字と下線が近すぎることがありますが、これを適切にずらすことができます！

左）指定無し

右）下線を下に12pxずらす
text-underline-offset: 12px;

#html #css #webデザイン #web制作 #コーディング
February 19, 2025 at 1:33 PM
codejump.bsky.social
background-clip

背景の表示範囲を指定することができます。

例）背景画像をpaddingの内側に表示
.img {
background-image: url(img.jpg);
background-clip: content-box;
padding: 80px;
}

#html #css #webデザイン
February 18, 2025 at 2:59 PM
codejump.bsky.social
word-spacing

word-spacingプロパティで単語同士の間隔を指定することができます。
英語のタイトルや文章などをきれいに整えて表示させたい時に便利です！

#html #css #webデザイン
February 17, 2025 at 2:00 PM
codejump.bsky.social
attr()

CSSのattr()関数を使用することで、JavaScriptを使わずにHTMLの属性値を取得することができます。

例）aタグのhrefの値を取得してURL:の後ろに表示

#html #css #web制作
February 16, 2025 at 2:32 PM
codejump.bsky.social
:not()

一致しない要素を選択する擬似クラスです。
特定の要素以外にスタイルを適用させたい場合に便利です！

#html #css #webデザイン
February 13, 2025 at 11:51 PM
codejump.bsky.social
align-self

FlexboxやGridの特定の子要素だけ位置を変えることができます！

例）Flexboxで上揃えで横並びにした要素の2番目だけを下揃えにする
li:nth-child(2) {
align-self: flex-end;
}

#html #css #web制作
February 13, 2025 at 5:11 AM
codejump.bsky.social
CSSで画像をマスク

maskプロパティを使うことで画像を自由に切り抜くことができます！

例）「img.jpg」を「text.svg」の文字画像で切り抜く
■HTML


■CSS
img {
mask-image: url(text.svg);
mask-repeat: no-repeat;
}

#html #css #webデザイン #web制作 #コーディング
February 10, 2025 at 1:47 PM
codejump.bsky.social
column-count

column-countを使用することでテキストをマルチカラムの雑誌風レイアウトにすることができます。用途に合わせて使いこなせると便利です！

例）テキストを3列で表示
.article {
column-count: 3;
column-gap: 40px;
}

#html #css #webデザイン #web制作 #コーディング
February 8, 2025 at 2:03 PM
codejump.bsky.social
CSSでマウスカーソルを変更

cursorでカスタムカーソルを作成することができます。

例）リンクをマウスオーバーした際のカーソルに画像を設定
a {
cursor: url('cursor.png'), pointer;
}

#html #ccs #web制作 #codejump
February 6, 2025 at 2:42 PM
codejump.bsky.social
mix-blend-mode

要素の内容を背景や他の要素とどのように合成するかを指定するCSSプロパティです。例えば、以下のようにoverlayを指定するとテキストと画像が重なり合って表示されます。

例）テキストに対して「mix-blend-mode: overlay;」を設定

#html #css #web制作 #webデザイナー #コーディング #codejump
February 2, 2025 at 2:24 PM