記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

新着記事一覧

HTML 見出しの使い方(h1〜h6)+シンプルな見出しのデザイン例(初心者向け)

Pocket
LINEで送る

見出しの作成方法、用途、見出しデザインを初心者の方向けに紹介。 見出しの基本的な作成方法、用途、ルールを学ぶことができます。 また、コピペで使えるシンプルな見出しデザインを10点紹介。 全てにサンプルコードがついているので実際に手を動かして学ぶことができます。

Illustratorでオブジェクトを反転させるリフレクトツールを使いこなそう!

Pocket
LINEで送る

Illustratorでは作成したオブジェクトを反転させる機能をリフレクトツールと呼びます。活用できれば鏡に写したようにオブジェクトを反転させる機能なので、色々なデザインが作成できます。

Illustratorのスウォッチの基本的な使い方をマスターしよう!

Pocket
LINEで送る

Illustratorにはよく使う色やグラデーション、パターンをカラーパレットに登録してすぐに使えるようにできる「スウォッチ」という機能があります。スウォッチをうまく使うことで、デザイン業務がスムーズに進められます。ここではスウォッチの基本的な使い方を解説します。

レスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)

Pocket
LINEで送る

Webサイトにレスポンシブレイアウトのスライダーを実装する方法をまとめます。HTML/CSSで実装する方法や、jQuery(JavaScript)を使う方法などが一般的ですので、それぞれの手順を解説。また、おすすめのjQueryライブラリについても3つご紹介します。

レスポンシブに対応した画像調整・サイズ切り替えの実装方法

Pocket
LINEで送る

画像をレスポンシブ対応させる方法を3つ紹介します。最も一般的であるメディアクエリを使った方法に加え、scrset属性、picture属性を使って画像サイズの調整を行う方法についても解説。方法を覚えればそこまで難しくありませんので、よろしければこちらの記事を参考に実装してみて下さい。

レスポンシブレイアウトにするためのHTMLの設定方法

Pocket
LINEで送る

HTMLであってもWordPressのようなPHPで構築するWebサイトであっても、共通するのは「レスポンシブデザイン」が必須に近いということです。本記事では初心者こそ抑えておきたいレスポンシブデザインについての基礎と、HTMLファイル内で実装できるレスポンシブ対応を解説します。

デバイスによって変わるレスポンシブメニューの作り方

Pocket
LINEで送る

さまざまなデバイスが普及している現在では、画面幅に合わせてデザインが変化するレスポンシブ対応が必須です。Webサイトを製作する上で、ユーザーが目的のページに辿り着くために設置されるメニューもレスポンシブ対応が求められます。今回はメニューをレスポンシブ対応することのメリットと、3種類のレスポンシブメニューの実装方法を解説します。

レスポンシブデザインを確認する方法とツールを使った方法

Pocket
LINEで送る

各デバイスサイズによるデザイン崩れを確認するのはもちろん、各OSやブラウザでの表示も確認するのがレスポンシブ対応です。今回は各デバイスサイズやOS、ブラウザなどのテスト環境をPCから確認できる方法を3つご紹介します。

HTML動画+外部コンテンツの埋め込み(初心者向け)

Pocket
LINEで送る

動画・外部コンテンツの埋め込み方法を、初心者の方向けに紹介。 各方法サンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

【HTML/CSS】スクロールバー+スクロールバーカスタマイズ(初心者向け)

Pocket
LINEで送る

スクロールバーの作成方法を初心者の方向けに紹介。 スクロールバーの作成方法、overflowプロパティ意味、スクロールバーのカスタマイズ方法がわかります。 全てサンプルコード付きなので実際に手を動かして学ぶことができます。
1 2 3 34