2020年02月のkhiro 新着記事 - にほんブログ村

Photoshopで画像を切り抜く方法

はじめに人の顔を丸く切り出す背景を作る画像を背景の上に重ねる画像を丸く切り抜く参考にしたサイトはじめに先週Photoshopを購入して基本操作は少し分かってきました。なので、今回は画像を切り抜くということをやってみます。人の顔を丸く切り出すこの写真の男性を、Twitterのプロフィール画像のように切り出してみます。背景を作るまずは、新規作成からカスタム(1000 × 1000px)を選択します。そして、作成ボタンを押します。作成ボタンを押した後の画面アートボードが画面いっぱいに広がるように、ドラッグして調整します。調整後の画面画像を背景の上に重ねるファイル、…

2020/02/19 15:26

Photoshopについて最近知ったこと

はじめにパネルを表示させる方法レイヤーについて画像を拡大・縮小する方法正円を作る方法図形の色を変える方法文字のフォントを変える方法おわりに参考にしたサイトはじめに先週Photoshopを購入しました。それと同時に、エイクエント名古屋オフィスで開催されたイベント、「現役Webデザイナーに学ぶ"魅力的な"Webバナーの作り方」に参加してきました。その時に学んだことがあったので、ブログを書いていきます。また、Photoshopの基本に関する内容にも触れていこうと思います。パネルを表示させる方法メニューバーの「ウインドウ」をクリックします。その後、表示させたいパネルの名…

2020/02/18 13:14

Photoshopの画面操作

はじめにショートカット(Macの場合) 拡大・・・⌘ と + 縮小・・・⌘ と - 元の大きさに戻す・・・⌘ と数字の0 操作中に発見したこと tabキーを押すと、オプションバーとツールバー、パネルが出現する縦の線を調整することで、x軸方向のpxが分かる移動ツールを選択しながら⌘を押すと、何かしらのpxが表示されるカラーピッカー要素の高さを測る方法分からない用語おわりにはじめに先日、Photoshopを購入しました。今日は、基本的な画面操作を学習したので、その一部をまとめます。ちなみに、Photoshopの拡張子はpsdです。ファイル名は、「〇〇〇〇.psd」となりま…

2020/02/14 22:40

画像スライドを実装する

はじめにスライドの例完成品ファイルとその中身ブラウザ作り方素材をブラウザに表示させるタイトルスライドとボタンの番号スタイルを適応していく画像を横並びにさせるボタンの位置を決めるボタンの見た目をいい感じにするデフォルトの表示を設定するタイトルにスタイルを適応させるボタンを押したら画像が切り替わるようにするはじめに以前スライダープラグインのSlikerの記事を書きましたが、 khirok.hatenadiary.jp 今回は、Progate上級編を参考にして、jQueryで画像スライドを実装してみます。スライドの例メルカリの商品出品ページにあるようなこんなスラ…

2020/02/12 18:38

自動タイピングを実装する

この記事で作るもの手順素材のダウンロードファイルを読み込むファイルに必要なコードを書くオプションを指定するにはスピードを遅くしたい時カーソルを非表示にしたい時カーソルを横並びにして、スタイルを変更したい時参考にしたサイトこの記事で作るものこのような自動でタイピングされるUIです。株式会社いづつや本店様 (https://idutsuyahonten.jp/web/) 手順素材のダウンロード Githubから素材をダウンロードして、開発中のディレクトリに配置する。 https://github.com/mntn-dev/t.js Download ZIPをクリックしてダ…

2020/02/11 23:32

背景動画を実装する

この記事で作りたいもの動画素材を用意するブラウザに動画を表示させる最前面に要素を持ってくる完成！参考にした記事この記事で作りたいもの GrouwGroup株式会社様 (https://grow-group.jp/) こんなUIを最近よく見かけるので、自分で作ってみたいと思いました。 UIとはUser Interfaceの略で、ユーザーが目にする部分のことです。動画素材を用意するフリー動画素材が手に入る Pixabay (https://pixabay.com/ja/videos/)からダウンロードします。ダウンロードした動画ファイルを現在のディレクトリに配置します。今回は…

2020/02/11 19:41

Photoshopとは

はじめに公式サイト何ができるのか？費用は？ Illustratorとの違いは？個人的にやりたいと思ったこと HTML / CSS コーディング案件を受注するときに必要になる参考にしたサイトはじめに Web制作の案件を見ていると、「Photoshopの経験必須！」と書かれていることがよくあるため、Photoshopについてインターネットで調べたことをまとめてみました。公式サイト Adobe https://www.adobe.com/jp/products/photoshop.html?gclid=Cj0KCQiAm4TyBRDgARIsAOU75spi3It66Chza2R4F9…

2020/02/10 23:50

擬似要素について

擬似要素とは具体的な活用例横棒を追加する画像やコードのタイトルをうっすらと表示させるアイコンを表示させるコメントボックスを作る参考にしたサイト HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よくあったので、それについて書いていきます。擬似要素とは cssで擬似要素を使うと、あたかもhtmlを追加したかのように見せることができます。例えば、こんなh1要素があったとしましょう。 cssで h1::before { content: "いつか"; } こんな記述を加えるとこのように文字が加わります。 h1::after…

2020/02/10 22:20

画像にカーソルを合わせるとタイトルが出てくるやつ

今回作るもの必要なファイルとその中身(完成ソースコード) html css jQuery 実装手順画像を表示させるモーダルを作成する画像にカーソルを合わせた時の処理おわりに今回作るものたまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくるやつです。 html、css、jQueryを用いて実装していきます。必要なファイルとその中身(完成ソースコード) html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="https://ajax.google…

2020/02/10 10:42

スマホ向けのヘッダーについて

はじめに筆者の環境ヘッダーアイコンを作成するモーダルを作成するクリックイベントを作成するはじめにスマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが最適かと思います。しかし、スマホの場合このようにした方が、ユーザーにとって使いやすくなるでしょう。これをどのように実装すれば良いのかを書いていきます。筆者の環境 OS・・・Mac ブラウザ・・・Google Crome スマホ用の画面・・・Cromeの検証ツールを利用しています。ヘッダーアイコンを作成す…

2020/02/09 23:30

faviconを使う方法

faviconとは公式サイトにアクセスするイラストを書く or 画像をアップロードする画像をアップロードする場合ダウンロードする読み込ませるブックマークをファビコンのみ表示させる方法参考にしたサイト faviconとはブラウザタブの左側に付いているアイコンのことです。公式サイトにアクセスする https://www.favicon.cc/ イラストを書く or 画像をアップロードする画像をアップロードする場合「Import Image」をクリックします。ファイルを選択して、Uploadボタンを押します。すると、ファビコンのタブにリアルタイムでアイコンが表示されているこ…

2020/02/09 21:57

画面幅に応じてCSSを適応させる

はじめに準備をするタブレットの画面幅スマホの画面幅おわりに参考にしたサイトはじめに私が現在、模写コーディングをしているページを題材に、レスポンシブ化について書いていきます。 MacBook(画面幅が1440px)では、このように表示されているページがipad(画面幅が768px)で見てみると、レイアウトが崩れてしまいます。iPhone(画面幅が375px)の場合も同様です。レスポンシブデザインを行えば、それぞれのデバイス(スマホ・タブレット・PC)に最適化された表示をすることができます。準備をするまずは、HTMLのheadタグ内に <meta name="viewport" …

2020/02/09 11:38

ページ内リンクの作り方

素材画面 HTML CSS HTMLを用いた方法リンク元画面 HTML リンク先画面 HTML jQueryを用いた方法画面 HTML jQuery 最後にページ内でリンクを作る方法について2パターンを紹介します。素材ヘッダー、メイン、フッターに分かれています。メインの中に、SERVICEとABOUTのページがあります。画面 HTML <!DOCTYPE html> <html> <head>  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com…

2020/02/08 15:02

マーカー線を引く方法

パターン1 HTML CSS パターン 2 CSS パターン3 CSS パターン4 CSS hover時にマーカーが引かれるようにする CSS 参考にしたサイト HTML / CSSで、マーカー線を引く方法と、自分が気に入っているマーカーのパターン、最後には、カーソルを合わせた時にマーカーが引かれるようにする方法について書きます。パターン1 HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>これは、重要です。</h1> </body> </html> C…

2020/02/07 22:10

パーセンテージのグラフを作ってみた

完成イメージ使用するファイル土台を作る画面(1/4) 左側が欠けた半円を重ねる画面(2/4) 内側の円を作成する画面(3/4) 56%を表現する画面(4/4 → 完成) ソースコード index.html style.css 完成イメージ HTML / CSS で、このようなグラフが出来上がるまでの過程を書きます。使用するファイル index.html、style.cssです。 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css…

2020/02/07 12:45

HTML / CSS でカレンダーを作ってみた

完成イメージ 1 カレンダーの背景を作る index.html style.css 画面 2 表を利用する index.html 画面 3 カレンダーを背景に収める style.css 画面 4 カレンダーを装飾する 5 仕上げ画面(完成) 参考にしたサイト完成イメージこの記事では、これを作っていきます。編集するファイルは、 index.html style.css です。 1 カレンダーの背景を作る index.html <div class="calendar-wrapper"> </div> style.css .calendar-wrapper { height: 400px;…

2020/02/06 19:28

アコーディオンをjQueryで実装する

アコーディオンとは？筆者の環境準備ディレクトリ・ファイルの作成(ターミナルを使用) HTML 画面(1/10) CSS 画面(2/10) jQuery jQueryの読み込み確認 1つのアコーディオン答えを非表示にする画面(3/10) 答えを隠す画面(4/10) 答えを表示させる画面(5/10) 複数のアコーディオン見た目を作る画面(6/10) 画面(7/10) 画面(8/10) 個別にアコーディオンを発生させる画面(9/10) + と - を置き換える画面(10/10) アコーディオンとは？クリックすると表示・非表示が切り替わる機能のことです。例：Workship(…

2020/02/04 19:56

簡単なモーダルをjQueryで実装する流れ

モーダルとは実装手順フォルダなどを準備するブラウザに最低限の表示をさせるモーダルの中身を作り込んでいくモーダルをカバーしている部分を作り込んでいくモーダルを表示させるモーダルを非表示にするモーダルとは例えば、Twitterの投稿ボタンを押すと・・・こうなります。これが、"モーダル"です。この記事では、このような"モーダル"を筆者の環境(Mac OS)で1から実装していく過程を公開します。実装手順フォルダなどを準備するターミナルを開き、ホームディレクトリに「modal」というフォルダを作成します。 modalディレクトリに移動します。 html、css、jQuery…

2020/02/01 22:25