フロントエンド(マークアップが中心)の知識についての記事を書いていきます。 HTML / CSS / Sass / jQuery やレスポンシブデザイン、Wordpressなどについてです。
はじめに 人の顔を丸く切り出す 背景を作る 画像を背景の上に重ねる 画像を丸く切り抜く 参考にしたサイト はじめに 先週Photoshopを購入して基本操作は少し分かってきました。 なので、今回は画像を切り抜くということをやってみます。 人の顔を丸く切り出す この写真の男性を、Twitterのプロフィール画像のように切り出してみます。 背景を作る まずは、新規作成からカスタム(1000 × 1000px)を選択します。 そして、作成ボタンを押します。 作成ボタンを押した後の画面 アートボードが画面いっぱいに広がるように、ドラッグして調整します。 調整後の画面 画像を背景の上に重ねる ファイル、…
はじめに パネルを表示させる方法 レイヤーについて 画像を拡大・縮小する方法 正円を作る方法 図形の色を変える方法 文字のフォントを変える方法 おわりに 参考にしたサイト はじめに 先週Photoshopを購入しました。 それと同時に、エイクエント名古屋オフィスで開催されたイベント、「現役Webデザイナーに学ぶ"魅力的な"Webバナーの作り方」に参加してきました。 その時に学んだことがあったので、ブログを書いていきます。 また、Photoshopの基本に関する内容にも触れていこうと思います。 パネルを表示させる方法 メニューバーの「ウインドウ」をクリックします。 その後、表示させたいパネルの名…
はじめに ショートカット(Macの場合) 拡大・・・⌘ と + 縮小・・・⌘ と - 元の大きさに戻す・・・⌘ と 数字の0 操作中に発見したこと tabキーを押すと、オプションバーとツールバー、パネルが出現する 縦の線を調整することで、x軸方向のpxが分かる 移動ツールを選択しながら⌘を押すと、何かしらのpxが表示される カラーピッカー 要素の高さを測る方法 分からない用語 おわりに はじめに 先日、Photoshopを購入しました。 今日は、基本的な画面操作を学習したので、その一部をまとめます。 ちなみに、Photoshopの拡張子はpsdです。 ファイル名は、「〇〇〇〇.psd」となりま…
はじめに スライドの例 完成品 ファイルとその中身 ブラウザ 作り方 素材をブラウザに表示させる タイトル スライドとボタンの番号 スタイルを適応していく 画像を横並びにさせる ボタンの位置を決める ボタンの見た目をいい感じにする デフォルトの表示を設定する タイトルにスタイルを適応させる ボタンを押したら画像が切り替わるようにする はじめに 以前スライダープラグインのSlikerの記事を書きましたが、 khirok.hatenadiary.jp 今回は、Progate上級編を参考にして、jQueryで画像スライドを実装してみます。 スライドの例 メルカリの商品出品ページにあるようなこんなスラ…
この記事で作るもの 手順 素材のダウンロード ファイルを読み込む ファイルに必要なコードを書く オプションを指定するには スピードを遅くしたい時 カーソルを非表示にしたい時 カーソルを横並びにして、スタイルを変更したい時 参考にしたサイト この記事で作るもの このような自動でタイピングされるUIです。 株式会社いづつや本店様 (https://idutsuyahonten.jp/web/) 手順 素材のダウンロード Githubから素材をダウンロードして、開発中のディレクトリに配置する。 https://github.com/mntn-dev/t.js Download ZIPをクリックしてダ…
この記事で作りたいもの 動画素材を用意する ブラウザに動画を表示させる 最前面に要素を持ってくる 完成！ 参考にした記事 この記事で作りたいもの GrouwGroup株式会社 様 (https://grow-group.jp/) こんなUIを最近よく見かけるので、自分で作ってみたいと思いました。 UIとはUser Interfaceの略で、ユーザーが目にする部分のことです。 動画素材を用意する フリー動画素材が手に入る Pixabay (https://pixabay.com/ja/videos/)からダウンロードします。 ダウンロードした動画ファイルを現在のディレクトリに配置します。 今回は…
はじめに 公式サイト 何ができるのか？ 費用は？ Illustratorとの違いは？ 個人的にやりたいと思ったこと HTML / CSS コーディング案件を受注するときに必要になる 参考にしたサイト はじめに Web制作の案件を見ていると、「Photoshopの経験必須！」と書かれていることがよくあるため、Photoshopについてインターネットで調べたことをまとめてみました。 公式サイト Adobe https://www.adobe.com/jp/products/photoshop.html?gclid=Cj0KCQiAm4TyBRDgARIsAOU75spi3It66Chza2R4F9…
擬似要素とは 具体的な活用例 横棒を追加する 画像やコードのタイトルをうっすらと表示させる アイコンを表示させる コメントボックスを作る 参考にしたサイト HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よくあったので、それについて書いていきます。 擬似要素とは cssで擬似要素を使うと、あたかもhtmlを追加したかのように見せることができます。 例えば、 こんなh1要素があったとしましょう。 cssで h1::before { content: "いつか"; } こんな記述を加えると このように文字が加わります。 h1::after…
今回作るもの 必要なファイルとその中身(完成ソースコード) html css jQuery 実装手順 画像を表示させる モーダルを作成する 画像にカーソルを合わせた時の処理 おわりに 今回作るもの たまにWebサイトで見かける、マウスを当てたら画像のタイトルが出てくるやつです。 html、css、jQueryを用いて実装していきます。 必要なファイルとその中身(完成ソースコード) html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="https://ajax.google…
はじめに 筆者の環境 ヘッダーアイコンを作成する モーダルを作成する クリックイベントを作成する はじめに スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが最適かと思います。 しかし、スマホの場合 このようにした方が、ユーザーにとって使いやすくなるでしょう。 これをどのように実装すれば良いのかを書いていきます。 筆者の環境 OS・・・Mac ブラウザ・・・Google Crome スマホ用の画面・・・Cromeの検証ツールを利用しています。 ヘッダーアイコンを作成す…
faviconとは 公式サイトにアクセスする イラストを書く or 画像をアップロードする 画像をアップロードする場合 ダウンロードする 読み込ませる ブックマークをファビコンのみ表示させる方法 参考にしたサイト faviconとは ブラウザタブの左側に付いているアイコンのことです。 公式サイトにアクセスする https://www.favicon.cc/ イラストを書く or 画像をアップロードする 画像をアップロードする場合 「Import Image」をクリックします。 ファイルを選択して、Uploadボタンを押します。 すると、ファビコンのタブにリアルタイムでアイコンが表示されているこ…
はじめに 準備をする タブレットの画面幅 スマホの画面幅 おわりに 参考にしたサイト はじめに 私が現在、模写コーディングをしているページを題材に、レスポンシブ化について書いていきます。 MacBook(画面幅が1440px)では、このように表示されているページがipad(画面幅が768px)で見てみると、レイアウトが崩れてしまいます。iPhone(画面幅が375px)の場合も同様です。レスポンシブデザインを行えば、それぞれのデバイス(スマホ・タブレット・PC)に最適化された表示をすることができます。 準備をする まずは、HTMLのheadタグ内に <meta name="viewport" …
素材 画面 HTML CSS HTMLを用いた方法 リンク元 画面 HTML リンク先 画面 HTML jQueryを用いた方法 画面 HTML jQuery 最後に ページ内でリンクを作る方法について2パターンを紹介します。 素材 ヘッダー、メイン、フッターに分かれています。 メインの中に、SERVICEとABOUTのページがあります。 画面 HTML <!DOCTYPE html> <html> <head> <!-- リセットCSSの読み込み --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com…
パターン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…
完成イメージ 使用するファイル 土台を作る 画面(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…
完成イメージ 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;…
アコーディオンとは？ 筆者の環境 準備 ディレクトリ・ファイルの作成(ターミナルを使用) 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(…
モーダルとは 実装手順 フォルダなどを準備する ブラウザに最低限の表示をさせる モーダルの中身を作り込んでいく モーダルをカバーしている部分を作り込んでいく モーダルを表示させる モーダルを非表示にする モーダルとは 例えば、Twitterの投稿ボタンを押すと・・・ こうなります。 これが、"モーダル"です。 この記事では、このような"モーダル"を筆者の環境(Mac OS)で1から実装していく過程を公開します。 実装手順 フォルダなどを準備する ターミナルを開き、ホームディレクトリに「modal」というフォルダを作成します。 modalディレクトリに移動します。 html、css、jQuery…
「ブログリーダー」を活用して、hirokiさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
![【お家でADドメイン】ドメイン名を変更する(1)「再セットアップ：事前準備[2]／設定データエクスポート」](https://img.blogmura.com/sites/1280679/post-images/72441745.webp/crop/120x120)
