すべてのカテゴリ

ポートフォリオとして、下記サービスに新しいサイトを2つ追加しました。一つはデンタルクリニック。サイトを作り始めた時期が歯医者に通い始めた時期と重なったので、歯医者を題材にしました。色は明るめのブルーグリーン。デンタル系の製品や洗剤等によく使われる色で、昔に読んだ色彩心理学の本によると「誰も嫌わない色」なんだそうです。デザイン面ではJQueryでナビゲーションの上にコンテンツを移動したり、一部にSVGファイルの配置を行なっています。本文のフォントは一般的なゴシックよりも親しみやすいM PLUS 1pを選びました。テンプレートは私が一番好きなRomeを使用しています。もう一つはマーケティング企業。以前に公開していた物を手直ししました。こちらもJQueryを使用し、一部要素に対して動きを与えています。また、Flexboxを使用してスマホ表示時でもカラムを2列の状態のままにしている箇所があります。色はメインビジュアルに合わせた紺色をメインカラーとし、ボタンに紺色の補色であるオレンジを使用しています。テンプレートはCairoを使用。初期の状態ではメインビジュアルの下辺が斜めになっていて、都会的なイメージのサイトにはぴったりのテンプレートです。2つのサイトのアドレスは冒頭に貼った私のサービスのサービス内容文に記載しています。ポートフォリオサイトの中で気になった部分などがありましたら、DMなどでお気軽にご質問下さいよろしくお願い致します。

今日はロゴ制作と、jQueryの学習を少し進めました✨ロゴは就労支援施設で使用予定のロゴで1案作成。「ともに成長する」という意味をどう表現するかを意識しながら、色や形のバランスなどをいろいろ試行錯誤しました🌱その結果、しっかり形にすることができて、自分としてはまずまずの出来かなと思っています☺️まだ改善できる部分もありそうですが、ひとつ形にできたことが素直に嬉しかったです✨そして今日は、jQueryにも少し触れました！$(function() {  const title = $('#title').text();  const message = $('.message').text();  console.log(title);  console.log(message);});このコードでは、HTMLの中にあるテキストを取得して、コンソールに表示しています。昨日今日とコードに触る時間が少なかったので明日からもうちょい力を入れていこうと思います！そして今日のサムネは「桜」🌸実は、昨日の夢に桜が出てきて印象的だったので選びました☺️夢占いで桜は、「新しい始まり」や「成長」「変化」の象徴とも言われているそうです。今ちょうど新しいことに挑戦しているタイミングなので、なんだか前向きな気持ちになりました✨毎日少しずつですが、できることが増えていくのが楽しいです🌿明日もコツコツがんばります☺️

当サービスは、高品質、高コスパのLP（ランディングページ）を制作します。 高品質な有料画像、売れるためのLP構成ガイド付き！ 当サービスの特徴 ・高品質なテンプレートをベースにお客様に合わせたカスタマイズします。 ・LPの構成から文章・画像・カラーを変更可能です。 ・売れるLPに必要な構成のガイド付きで文章作成も安心です。 ・シンプルでわかりやすく見やすい、情報が伝わるデザイン ・ご自身で構成順序の並び替え、ブロックの非表示も可能なため、ABテストも簡単です。 通常では高額になる作り込まれたLPをベースに使用することで、高品質、低価格かつ高コスパを実現しています。 当サービスはこのような方におすすめです ・はじめてLPを制作する方 ・高品質なLPをできるだけ安価で欲しい方 ・派手なデザインよりもシンプルでわかりやすく写真を活かしたデザインで制作したい方 ・HTMLの知識が無くてもご自身で定期的に更新してABテストを行い方 当サービスはこのような方におすすめいたしません ・キャッチコピーや文章作成まですべて丸投げでお任せしたい方 ・低品質でいいからとにかく安く済ませたい方 ・予算は惜しまずレベルの高いデザイン・クオリティで制作した方 LP制作内容 スマートフォン表示対応 画像選定（著作権フリーの写真・イラスト） WordPressの導入、初期設定 お問い合わせフォーム 内部SEO対策、表示速度対策 セキュリティ対策 お知らせやブログの投稿機能可 SNS連携可 簡単なスクロールアニメーション Googleマップ、You Tube動画埋め込み Googleアナリティクス・Google

初めまして。大阪でWEBデザイナーをしておりますShirokumaDesignと申します。ディレクション、Webデザイン〜コーディングまで対応可能です。 Webや紙の制作物でお困り事があれば、お気軽にご依頼くださいませ♪ ありがたいことに、LP（ランディングページ）制作の依頼を多くいただいております。基本的にはWEBサイトのコーディングをメインで行っているのですが、案件のご依頼が多数あるため、LPのコーディング費用を明瞭化させていただきます。以下、依頼基本的な費用です。お客様にとってベストな提案ができればと思っております。WEBサイト構築がメインのため、合間にLP制作を進めさせていただくかと存じます。納期やスケジュール・費用感などの関係上、お受けすることが難しい可能性もございます。その点はご理解・ご了承くださいませ。ココナラでは「LP専門」のプロがいらっしゃいます。納期やコストなど見合わない場合もあるかと思います。その際は「LP専門」のプロにご依頼いただくのも選択の一つとして、ご一考いただければと存じます。お客様にとって、きっと満足にいくものを仕上げていただけるかと思います。■基本依頼をご検討いただいているお客様の、参考になれば幸いでございます。引き続き、ShirokumaDesignをよろしくお願いいたします。

前回のJQueryの記事ではセレクタとメソッドについて解説しました。今回は、新しく"イベント"について解説します。一言でいうと、イベント = いつ（when）　になります。セレクタ　▶　何をメソッド　▶　どうするイベント　▶　いつ(new)例を使ってやってみましょう。例：p要素のテキストをクリックすると背景が黄色になる。ますはサンプルコードからscriptタグの2行目にある「click」がイベントです。このイベントにより、クリックしたとき（＝いつ）という指定が可能になります。前回の復習も兼ねて、一行目から見ていきましょう。1行目これは、jQueryのドキュメントレディイベントを使用しています。ページのHTML=DOMが完全に読み込まれた時点で、内部の関数が実行されるように制御しています。この記述を短縮したものでしたね。2行目セレクタ（＝何を）　ページ内のすべての <p> 要素を選択します。clickというイベント（＝いつ）が発生すると、匿名関数 function(){ ... } が実行される　と書かれています。※補足匿名関数は、名前がない関数です。　関数については別の記事で解説します。3行目「this」は重要なキーワードで、文脈に応じて、異なるオブジェクトを参照します。今回は、イベント内でのthisについて説明します。イベントでの this は、そのイベントが発生した要素を指します。つまり、どの要素がクリックされたか、あるいは他のイベントがトリガーされたかを示します。今回の場合ですと、<p>要素が該当します。つまりはと同じ意味になります。cssメソッド

こんにちは！RuniDesign（ルニデザイン）です。最近は毎日ホームページの制作や管理をしています。本日、とりあえずで作っておいたポートフォリオサイトをリニューアルしました！ココナラでは外部サイトへの誘導はできないのでここには貼り付けられないのですが…ロゴは表示の際動く仕様で、スクロールするとコンテンツが見れる作りになっています。前回からの変更点それなりの文章に書き換えました…！今回オンラインで発注受注のために見るサイトという点では文章などもあまりにカジュアルすぎましたので少しだけ頑張っています。（お堅い感じは私の印象からはかけ離れるのでやめました笑）レスポンシブの見やすさを重視前回のデザインは左側にメニューが固定されているデザインだったので、気に入っていたのですがスマホから見るとメニューに圧迫されてメインコンテンツが見えにくい使用でした。今回のデザインはハンバーガーアイコン（右上に固定されたメニューバー）仕様にしてみました。これにより可愛くて見やすくなったのではと思います！　旧デザイン新デザイン背景画像にドロップシャドウ（影）をつけてみましたイラストも描いているので前回はイラストのゆるっとした印象を残しつつ、”デザインもやってるんだよ”というサイトデザインにしていたのですが、今回は”デザインメイン”に変更したかったので、ドロップシャドウとグラデーションで立体感をだしてデザインに奥行きをつけました。全く同じ背景ですが印象がかなり違って見えるはずです。イラストとWebデザインのページを分割しましたこのサイトではイラストはサブ、メインはデザインに変更したかったのでページを分けまし

コピペで動くからと、あまりJQueryのことを理解せずにscriptタグに貼り付けている方、これからJQueryを勉強しようとされている方向けに、以下の簡単な処理を例にして、JQueryの文法の基本を解説します。例）JQueryを使って、テキストを青文字に変更$(function(){ ←これってなに？基本的にJQueryは、ウェブサイトに動きを加えたりするために導入することが多いと思います。でもHTML(DOM)が読み込まれる前にjQueryが処理を実行しても、うまく動作しません。なので、次のような構文を決まり文句のような感じで書かなくてはなりません。これは「HTML(DOM)が全て読み込まれるまで実行を待ちますよ」と書かれています。で、短縮してこれでも同じ意味になります。つまり、$(function(){ と書くことで、JQueryの実行順を制御していることになります。$("p").css("color" , "blue")　←これは何をしているの？これは、間にある .(ドット) で、前半と後半の処理に分かれています。ドットの前を「セレクタ」、後ろを「メソッド」とそれぞれ呼びます。やっていることは、セレクタ　▶　何をメソッド　▶　どうするという感じの処理になります。今回やりたいことは、p要素に入っているテキストを青色に変えたいわけなので、$("p") ＝　P要素を(何を）css("color" , "blue")　＝　色を青色にする（どうする）という処理になるわけです。ということで、これを実行すると、styleタグでcssを書いたり、html内にカラーの指定を入れずに、JQ

最近はユーザーのスクロールに連動してアニメーションするサイトが普通になってきた。少し前はパララックスが新しかった気がしますが、色々変化するものです。で、サクイも乗り遅れてはいけないとアレコレ工夫しています。連動と言っても画面インで発火、スクロールで発火と大きく2つに別れている気がします。以前はググってゴリゴリなスクリプトを難儀して組んでたけど、最近はinview.jsとIntersection Observerでほぼほぼカバーできる気がしてます。実際、動きが入ると作ってる方も楽しいのでOKなんですが、やりすぎ注意ですね（笑）

Facebook投稿支援アプリにReact/Vueは必要か (2)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、シンプルにHTMLとJavascriptだけで実装してみました。アプリがシンプルなのでHTMLとJavascriptだけでも簡単に実装できました。この記事ではHTMLとJavascriptに加えてjQueryを利用してみました。少し前には利用が多かったjQueryjQueryは、フレームワークというよりは、Javascriptのライブラリという感じのものです。どう呼ぶかはこの記事ではあまり重要ではありません。何が便利かというと、JavascriptでHTMLで記述した部分の操作をシンプルに記述できるようになる点です。例えば、Javascriptの機能でHTMLのDOM(Document Object Model)を取得する場合には、const sample = document.getElementById("sample") と書いているのと同じ操作を以下のようなシンプルな記述に置き換えることができます。const sample = $('#sample') Javascriptのコーディングをシンプルにすることができるので、少し前はよく利用されていました。現在でも、DOM操作に特化したライブラリなどを作る際にはよく利用されています。最近は、Webアプリなどでは主流はReactやVue、或いはAngurarと言ったフレームワークになっています。しかし、Webページ

今日は「イベント」について学習しました！イベントとは、ユーザーが行う操作のことで、例えば「クリック」「スクロール」「文字入力」などが該当します。普段何気なく使っているWebサイトでも、こうしたユーザーの動きに合わせて画面が変化しているんだと知り、改めて仕組みの面白さを感じました。今回の学習では、・クリック（click）・スクロール（scroll）・キーボード操作（keydown / keyup）など、代表的なイベントについて理解しました。そして、これらの操作に対して「どんな動きをさせるか」をプログラムするのがイベント処理ということも学びました。最近触り始めたjQueryでも、こういったイベントを使って動きをつけていくので、今回の内容はとても大事な基礎だと感じています。まだ完全に理解できているわけではありませんが、実際に手を動かしながら少しずつ身につけていきたいです✨そしてもう一つ、ポートフォリオの更新も行いました！今回は、チョコレートのバナーとカフェサイトを追加しました。少しずつですが、自分の制作物が増えていくのが嬉しくて、「ちゃんと前に進めているな」と実感できた1日でした☺️これからも学習と制作をバランスよく続けながら、一つひとつ積み上げていきたいと思います。

最近はエンド営業やyeやwaで始まるサービスについて調べて投稿が滞ってましたが久々に投稿してみます。今回はcssの変数についてcssでも使用できて色など面倒なコードを省略して各ことができます/* CSS変数の定義 */ :root {     --p-color: #008bff;} /* CSS変数の使用 */ .element {     color: var(--p-color); }

cdnひとつで要素が文字や絵がふわっと浮き出る方法がありますaosというcdnでちょっとcdnいれてクラスをいれれば楽々実装なので重用しました。

今web制作のハンバーガーメニューの実装していますが下手に横幅を調整すると真ん中がずれるずれるうまいこと調整してくれるサイトはないものかと探すこのごろ

Web制作やフロントエンド開発を学び始めると、「jQuery」と「JavaScript」という言葉がよく出てきます。似ているようで役割が異なるこの2つですが、違いを曖昧にしたままだと理解が浅くなり、成長が止まります。ここでは表面的な違いではなく、本質的な違いを整理していきます。JavaScriptとは何かJavaScriptは、ブラウザ上で動作するプログラミング言語です。Webページに動きをつけたり、ユーザーの操作に応じた処理を行うために使われます。例えば以下のようなことができます。ボタンをクリックしたときに処理を実行するフォームの入力内容をチェックするスクロールに応じてアニメーションを動かすつまり、JavaScriptは「すべての土台」です。Webの動的処理は基本的にこの言語で書かれています。jQueryとは何かjQueryは、JavaScriptを簡単に書けるようにしたライブラリです。ライブラリというのは「便利な機能をまとめたパーツ集」のようなものです。jQueryは、特に以下のような処理を短く簡単に書けるように設計されています。HTML要素の取得（セレクタ操作）イベント処理アニメーションAjax通信たとえば、クリックイベントを設定する場合：JavaScriptだとやや冗長になりますが、jQueryではかなり短く書けます。一番重要な違い（ここが理解の分岐点）多くの人が見落としている本質はここです。JavaScriptは言語そのもの、jQueryはその上に乗っているツールです。この構造を理解していないと、「jQueryが使えればOK」と思ってしまうJavaScriptの理解が

今日もまた出品サービスを改善してみました、値段をよりわかりやすくして納得いただけるようにしてみました。

JavaScriptは、いわゆるプログラム言語です。どういう環境で使われるかと言いますと、有名どころでは、ホームページで使われています。ホームページに動きをつけたり、機能を追加したりといった具合に使われています。JavaScriptは、C言語系の言語と言われています。そのため多くの文法はC言語と同じです。特徴的なのは、ホームページで使う場合に、ホームページを表示するWebブラウザの情報を取得したり、操作したりといったことができるということと、DOMと呼ばれる、ホームページを作っているHTMLや、CSSを操作することができるということです。C言語を使う場合には、一般的には、コンパイラと呼ばれるものを用意しなければなりませんが、JavaScriptは、ブラウザ(Chrome,Edge,Firefox,Safariなど）を用意すれば、JavaScriptで作られたプログラムの動作確認をすることができます。さて、jQueryはなにかと言いますと、JavaScriptで作られたプログラムの集合体です。つまり、ライブラリと呼ばれるものです。JavaScriptで作られているだけあって、JavaScriptとjQueryは、ちゃんぽんにすることができます。ただし、jQuery特有のオブジェクトは、注意して使わなければなりません。JavaScript・jQueryは、ホームページだけでなく、iPhone、Androidなどのスマホアプリの開発にも使われています。これは、iPhoneのアプリの言語を例に上げますと、Swingなどがありますが、Swingには、ホームページを表示するコンポーネントが

「これ」を「ここ」に移動しました、というのが視覚的にわかりやすいというのは重要ですね。web上で確認できるのがなかなか便利。