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
Pinned
codejump.bsky.social
Codejump | コーディング学習サイト @codejump.bsky.social · Jan 28
【書籍発売中！】

『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』

▼Amazonページ
amzn.asia/d/boNvOCk

▼書籍特設サイト
code-jump.com/publishing/

1冊で現場レベルのコーディング・スキルが身につくWeb制作の実践入門です！

第1章【入門編】プロフィールサイト
第2章【初級編】ブランドサイト
第3章【中級編】サービスサイト
第4章【上級編】カフェサイト
第5章【応用編】ランディングページ
第6章【実践編】コーポレートサイト

#html #css #html本 #web制作 #コーディング
書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』
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
filterプロパティ

画像やその他の要素に色々なフィルタ効果をかけることができます。

・セピア　filter: sepia(70%);
・モノクロ　filter: grayscale(70%);
・明度　filter: brightness(150%);
・彩度　filter: saturate(150%);
・コントラスト　filter: contrast(150%);
・ぼかし　filter: blur(5px);
・透明度　filter: opacity(50%);

その他色々。

#html #css #webデザイン #web制作 #コーディング
April 14, 2025 at 2:33 PM
codejump.bsky.social
readonlyとdisabled

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

#webデザイン #html #css
April 10, 2025 at 2:59 PM
codejump.bsky.social
背景画像を複数枚重ねる方法

意外と忘れがちですが、backgroundプロパティに複数枚指定するだけでOKです。

.img {
background-image: url(img1.jpg), url(img2.jpg);
}

1つ目に指定した画像が最前面にきます。

#html #css #webデザイン
April 4, 2025 at 2:32 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
ウェブページの表示速度を向上させる

content-visibility: auto;
contain-intrinsic-size: (要素の高さ)px;

上記のCSSを指定した要素は、ビューポートに近づくまで描画されない為、ページの読込み速度があがるという仕組みです。

#html #css #webデザイン #web制作 #コーディング
March 26, 2025 at 12:51 AM
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
本日からCodejump Proのお申込み受付を開始しました。
実案件レベルのコーディング練習をしたい方、納品物が実務で通用するレベルかチェックしてほしい方はぜひお申込みください。お待ちしてます！

▽詳細はこちら
code-jump.com/cp/
Codejump Pro
実案件をモデルにしたコーディング学習サービス「Codejump Pro」。単価、納期、デザイン、仕様、全て実案件をもとにして作られたコーディング練習用の案件を毎月1件お送りします。プロを目指す方向けのコーディング学習サービスです。
code-jump.com
February 25, 2025 at 11:52 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