動画・Web制作

html css js

Webページにモーダルウィンドウを実装する方法と活用例を徹底解説!

モーダルウィンドウ(ポップアップ)は、ユーザーの注目を集めるためにWebページでよく使われるUIパーツの一つです。ログインフォーム、画像の拡大表示、注意喚起など、さまざまな用途で活躍します。しかし、モ
wordpress

初心者でもできる!WordPressのヘッダーとフッターを簡単に変更する方法

WordPressでサイトを運営していると、「ヘッダーにロゴを追加したい」「フッターのコピーライトを変更したい」など、細かいデザイン調整をしたくなる場面が出てきます。ヘッダーとフッターは、サイト全体の
wordpress

無料でもここまで使える!初心者からプロまで満足のWordPressおすすめ無料テーマ5選

WordPressでブログやホームページを始めたいと思ったとき、まず悩むのが「どのテーマを使うべきか?」という点ではないでしょうか。テーマとは、サイトのデザインや機能の土台となるテンプレートのこと。特
wordpress

WordPress管理画面の使い方をやさしく解説!最初に覚えておきたい基本操作とは?

WordPressを始めたばかりの方にとって、最初の関門となるのが「管理画面の使い方」です。「どこをクリックすればいいの?」「記事はどこで書くの?」「設定ってなにをすれば?」と戸惑う方も多いのではない
wordpress

WordPressを始めるには?必要なものと手順をわかりやすく解説!

ブログを始めたい、ホームページを作りたいと考えたとき、多くの人が選ぶのが「WordPress(ワードプレス)」です。世界中で使われているこのCMS(コンテンツ・マネジメント・システム)は、専門知識がな
html css js

日付入力をもっと快適に!Webページで使える日付ピッカーの基本と実装方法

Webページで日付を入力する場面は、予約フォームやスケジュール調整、誕生日の登録など、さまざまなシーンで登場します。そんなときに便利なのが「日付ピッカー(日付選択ウィジェット)」です。ユーザーがカレン
html css js

レスポンシブナビゲーションバーの作り方と実装ポイントを徹底解説

スマートフォンやタブレット、パソコンなど、あらゆるデバイスで快適に見られるWebサイトを作るには「レスポンシブデザイン」が欠かせません。特にナビゲーションバー(メニュー)はユーザー体験を大きく左右する
html css js

フレックスボックスレイアウトの基本と実用デザイン例|HTML&CSSで学ぶレイアウト術

Webページのレイアウトを整えるうえで、CSSのFlexbox(フレックスボックス)は欠かせない存在となっています。従来のfloatやinline-blockに比べて、柔軟で直感的な配置が可能なFle
html css js

CSS Gridレイアウトの基本とおしゃれなデザイン例【HTML&CSS付き解説】

Webデザインの自由度を大きく広げてくれる「CSS Grid」。従来のFlexboxでは実現しにくかった複雑なレイアウトも、Gridを使えばシンプルなコードで実装できます。この記事では、CSS Gri
html css js

3カラムレイアウトの基本とデザイン例|HTML&CSSでの実装方法をわかりやすく解説

Webページのレイアウトで定番の一つが「3カラムレイアウト」です。左右にナビゲーションや広告、中央にコンテンツを配置することで、情報を整理して伝えることができるため、ブログやニュースサイト、企業ホーム
html css js

初心者でもできる!2カラムレイアウトの基本と実用デザイン例|HTML&CSSで簡単コーディング解説

Webサイトを作るときによく使われるレイアウトの1つに「2カラムレイアウト」があります。左右に分かれたシンプルな構成ながら、情報を整理しやすく、ブログや企業サイトなど幅広く活用されています。この記事で
html css js

フッターの基本と美しいデザイン例:HTML&CSSで作る実用サンプル付き解説

Webサイトの下部に表示される「フッター」は、サイト全体の印象を引き締める大切なパーツです。企業サイトや個人ブログ、ECサイトなど、どのようなジャンルのサイトでもフッターは必ずと言っていいほど設置され
html css js

スクロールしても消えない!固定ヘッダーをHTML・CSS・JavaScriptで実装する方法

Webページを閲覧していると、上部にあるナビゲーションバーやロゴなどの「ヘッダー」が、スクロールしても常に画面上部に表示されているサイトをよく見かけます。これは「固定ヘッダー(Sticky Heade
html css js

ナビゲーションメニュー(グローバルナビ)の基本とデザイン例・HTML&CSSコード解説

Webページを訪れたユーザーが「どこに何があるのか」を直感的に理解するために欠かせないのが、ナビゲーションメニュー、いわゆる「グローバルナビ」です。サイト全体の構造を示すこのメニューは、使いやすさやデ
photoshop

Photoshopの便利な使い方|知っておくと作業がはかどる小技10選

Photoshopはプロのデザイナーから初心者まで、多くの人が利用する画像編集ソフトです。しかし、多機能なだけに「基本的な操作はできるけど、もっと効率的に使いたい」と感じることも多いのではないでしょう
動画・Web制作

無料 Clipchampでyoutube動画作成

本日は、Microsoftが提供する無料の動画編集ソフト「Clipchamp」を使って動画を作成する方法を紹介します。Clipchampの基本的な使い方Clipchampの使い方は、以下の手順で行いま
illustrator

Illustrator 超基礎 パス(ペジェ曲線)の作り方

本日は、Illustratorの超基礎としてパス(ペジェ曲線)の作り方について解説します。私自身もパスについて得意ではなく、自分自身のために記事を作成しています。わからなくなった時に見返して、パスが作
php

Laravel3回目 シーダーファイルの作成 多対多,1対多を使用し社員管理システムを作る

本日は、Laravel2回目として、データベースにデータをインポートするために、シーダーファイルを作成します。シーダーとはデータベースにテストデータを一斉に挿入する処理を指します。シーダーファイルを実
動画・Web制作

(フリーソフト) Shotcutの使い方 テキスト(字幕)の追加

前回に引き続き、今回は、Shotcutにテキスト(字幕)の入れ方について説明します。これまで説明した「カット、音の追加、トランジション」と今回のテキストの追加までできれば、簡単なyoutubeの動画は
動画・Web制作

(フリーソフト) Shotcutの使い方 トランジションの追加

前回からの続きで、今回は、「トランジションの追加」を行います。トランジションとは、カット(トラック)とカット(トラック)の間を繋ぐために挟まれる効果(エフェクト)です。 (adsbygoogle =