はじめに 人の顔を丸く切り出す 背景を作る 画像を背景の上に重ねる 画像を丸く切り抜く 参考にしたサイト はじめに 先週Photoshopを購入して基本操作は少し分かってきました。 なので、今回は画像を切り抜くということをやってみます。 人の顔を丸く切り出…

はじめに パネルを表示させる方法 レイヤーについて 画像を拡大・縮小する方法 正円を作る方法 図形の色を変える方法 文字のフォントを変える方法 おわりに 参考にしたサイト はじめに 先週Photoshopを購入しました。 それと同時に、エイクエント名古屋オフ…

はじめに ショートカット(Macの場合) 拡大・・・⌘ と + 縮小・・・⌘ と - 元の大きさに戻す・・・⌘ と 数字の0 操作中に発見したこと tabキーを押すと、オプションバーとツールバー、パネルが出現する 縦の線を調整することで、x軸方向のpxが分かる 移動ツー…

はじめに スライドの例 完成品 ファイルとその中身 ブラウザ 作り方 素材をブラウザに表示させる タイトル スライドとボタンの番号 スタイルを適応していく 画像を横並びにさせる ボタンの位置を決める ボタンの見た目をいい感じにする デフォルトの表示を設…

この記事で作るもの 手順 素材のダウンロード ファイルを読み込む ファイルに必要なコードを書く オプションを指定するには スピードを遅くしたい時 カーソルを非表示にしたい時 カーソルを横並びにして、スタイルを変更したい時 参考にしたサイト この記事…

この記事で作りたいもの 動画素材を用意する ブラウザに動画を表示させる 最前面に要素を持ってくる 完成！ 参考にした記事 この記事で作りたいもの GrouwGroup株式会社 様 (https://grow-group.jp/) こんなUIを最近よく見かけるので、自分で作ってみたいと…

はじめに 公式サイト 何ができるのか？ 費用は？ Illustratorとの違いは？ 個人的にやりたいと思ったこと HTML / CSS コーディング案件を受注するときに必要になる 参考にしたサイト はじめに Web制作の案件を見ていると、「Photoshopの経験必須！」と書かれ…

擬似要素とは 具体的な活用例 横棒を追加する 画像やコードのタイトルをうっすらと表示させる アイコンを表示させる コメントボックスを作る 参考にしたサイト HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よく…

今回作るもの 必要なファイルとその中身(完成ソースコード) html css jQuery 実装手順 画像を表示させる モーダルを作成する 画像にカーソルを合わせた時の処理 おわりに 今回作るもの たまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくる…

はじめに 筆者の環境 ヘッダーアイコンを作成する モーダルを作成する クリックイベントを作成する はじめに スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが…

faviconとは 公式サイトにアクセスする イラストを書く or 画像をアップロードする 画像をアップロードする場合 ダウンロードする 読み込ませる ブックマークをファビコンのみ表示させる方法 参考にしたサイト faviconとは ブラウザタブの左側に付いているア…

はじめに 準備をする タブレットの画面幅 スマホの画面幅 おわりに 参考にしたサイト はじめに 私が現在、模写コーディングをしているページを題材に、レスポンシブ化について書いていきます。 MacBook(画面幅が1440px)では、このように表示されているページ…

素材 画面 HTML CSS HTMLを用いた方法 リンク元 画面 HTML リンク先 画面 HTML jQueryを用いた方法 画面 HTML jQuery 最後に ページ内でリンクを作る方法について2パターンを紹介します。 素材 ヘッダー、メイン、フッターに分かれています。 メインの中に、…

パターン1 HTML CSS パターン 2 CSS パターン3 CSS パターン4 CSS hover時にマーカーが引かれるようにする CSS 参考にしたサイト HTML / CSSで、マーカー線を引く方法と、自分が気に入っているマーカーのパターン、最後には、カーソルを合わせた時にマーカー…

完成イメージ 使用するファイル 土台を作る 画面(1/4) 左側が欠けた半円を重ねる 画面(2/4) 内側の円を作成する 画面(3/4) 56%を表現する 画面(4/4 → 完成) ソースコード index.html style.css 完成イメージ HTML / CSS で、このようなグラフが出来上がるま…

完成イメージ 1 カレンダーの背景を作る index.html style.css 画面 2 表を利用する index.html 画面 3 カレンダーを背景に収める style.css 画面 4 カレンダーを装飾する 5 仕上げ 画面(完成) 参考にしたサイト 完成イメージ この記事では、これを作ってい…

アコーディオンとは？ 筆者の環境 準備 ディレクトリ・ファイルの作成(ターミナルを使用) HTML 画面(1/10) CSS 画面(2/10) jQuery jQueryの読み込み確認 1つのアコーディオン 答えを非表示にする 画面(3/10) 答えを隠す 画面(4/10) 答えを表示させる 画面(5/…

モーダルとは 実装手順 フォルダなどを準備する ブラウザに最低限の表示をさせる モーダルの中身を作り込んでいく モーダルをカバーしている部分を作り込んでいく モーダルを表示させる モーダルを非表示にする モーダルとは 例えば、Twitterの投稿ボタンを…