絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

62 件中 1 - 60 件表示
カバー画像

React で表示する文字に色をつける!

React で表示する文字に色をつける!Vue の場合も表示する文字に色をつけるために、CSS の記述が必要でした。React でも同じように CSS の記述が必要です。React の場合は、別のファイルに CSS を記述して「部品」のファイルである、「_xxxx.tsx_」でインポートする方法を使います。CSS で記述すれば簡単!前回の連載のVue 公式チュートリアル(英語版)をご覧になった方ならば、今回の課題は簡単です。同じように CSS を記述すれば簡単に実現できます。 今回のステップ3の実装例です。import React from "react";import "./styles/step3.css";export default function Step3(): JSX.Element {  const titleClass: string = "title";  return (    <div className="step3">      <h1 className={titleClass}>Make me red</h1>    </div>  );} この「部品」の記述は、「Make me red」を Web ブラウザで表示するための、HTML に対応する部分(JSX)を作っています。実際に文字を赤くするのは、HTML に対応する部分(JSX)に CSS で装飾を指定するためのタグ(className)をつけて、CSS ファイルで指定します。今回は、「_./styles/step3.css_」をインポートし
0
カバー画像

プロのWeb開発エンジニアが教える、これからHTML+CSSを勉強したい人の勉強方法

Webシステム開発の会社、Nickel Lab. です。今回は弊社のエンジニアがオススメする、HTML+CSSを覚えていきたい人の為の勉強方法を公開します!この方法を実践すれば、がむしゃらに勉強をするより素早く習得することができますので、是非試してみて下さい。よくつまづくポイントは皆同じHTML+CSSを始めるとつまづくポイントはいくつかありますが、皆さん大体同じだったりします。なにがわからないのかわからないできないところを検索しても解決できないある程度わかった後でも、プロみたいな綺麗な作り方がわからないそれ!と思った方には、今回の記事はかなり効果的かなと思います!実践はとても簡単です。順番通りにやってみましょう。1.HTML+CSSの基本中の基本を覚えよう(むしろ基本だけでいい)どんな方法でも、基本中の基本をある程度把握していなければ、手を動かすことができないものです。なので、やっぱりそこは触っておきましょう。HTMLであれば、・<head>と<body>・cssの読み方・見出しと文章の書き方・<div>の使い方・タグにclassを指定する方法これだけ!これだけわかればある程度のものは作れるようになります。フォームを作ったり、クリックしたら何か出来たり。といった事は後回しにしましょう。タグでいうと、以下のものがわかれば大丈夫です。<html><head><body><h1> <h2><p><div>まずはこれらのタグを使って、適当な小説から文章を構成してみて
0
カバー画像

コーディングの依頼で良くお願いされる事

コーディングのお仕事を40件近く担当して、依頼内容で多いものをご紹介します。スクロールで画像等の要素が表示されたらふわっと表示させる色々なサイトでも良く見ますね。実装方法はいろいろ考えられると思いますが、私はJavaScriptの「Intersection Observer」を使います。JavsScriptならscrollイベントなどでも実装するのですかね。ご依頼主様からは、処理が重くなる心配をされる方もいますが、重くなる事はないと思います。要素が画面内に入ったら、Intersection Observerでclassを付けて、CSSで処理させるので、実装もしやすいと思います。バーガーボタンクリックでスマホメニュー表示バーガーボタンはCSSで作るのですが、私としては、CSSが少し複雑ですね。before疑似要素、after疑似要素を使って作ります。気を付けているのが、スマホメニューを透過で表示させたときに、メニューを操作に連動して、下層のコンテンツが動いてしまうこと。bodyにposition:flexd;overflow:hidden;width:100%の指定で防げると思います。バーガーボタンクリックで×ぼたんに変形させるのに、transformを使います。Intersection Observerは覚えておいて損はないと思います。お仕事募集中ですのでよろしくお願いいたします。
0
カバー画像

これだけは入れておきたい!Wordpressのオススメプラグイン5選

こんにちは!山本佑樹です!最近、娘が私と2人きりの時にちょっとだけ甘えてくるのが、すごく嬉しいです。まあこれもいずれすぐになくなるとは思いますが・・・今日はWordpressでホームページを制作する際にぜひ導入しておきたいプラグインを5つ紹介させていただきます。どのプラグインもいろんな方がブログ記事などでオススメされていますが、改めてご紹介します。①EWWW Image OptimizerWordPress内の画像を圧縮し表示を最適化できるプラグインです。②Contact Form 7WordPressで問い合わせフォームを作成できるプラグインです。③Google XML SitemapsXMLサイトマップを自動的に作成するためのプラグインです。④BackWPupブログ記事などのバックアップを取るためのプラグインです。⑤SiteGuardWordPressのセキュリティを強化してくれるプラグインです。以上5つは定番中の定番プラグインですが、Wordpressを使用する場合はぜひ取り入れておきたいプラグインです。ぜひ参考にしていただければと思います。当然ながら私がホームページを作る際にも導入しておりますので、ホームページ制作を検討されてる方はお気軽にご相談くださいませ。
0
カバー画像

Wordpressでホームページを制作するデメリット

こんにちは。山本佑樹です。家の近くにある桜が散りつつありますが、次に満開の桜を見ることができるのが1年後と思うとなんだか寂しい気持ちになりますね・・・。さて、昨日はWordpressでホームページを制作するメリットについて、ご説明しましたが、今日はデメリットについてご説明できればと思います。Wordpressに限らずなんでもそうだとは思いますが、メリットもあればデメリットももちろんございます。今回はWordpressを使用する際のデメリットにフォーカスしてお伝えしていきます。デメリット①通常の静的ページと比較して、ページの読み込み速度が遅くなるデメリット②プラグインやテーマとの互換性がない場合に、ページエラーや不具合が生じるデメリット③テーマやプラグイン、Wordpress本体の更新が定期的に必要になるデメリット④複雑なパスワード設定ができていなかったり、定期的に更新できていないとセキュリティーの脆弱性やハッキングが懸念される一般的に言われているのが、以上の4つとなります。ホームページ制作においてWordpressはかなりオススメできますが、メリットとデメリットのどちらも理解した上で使っていきたいですね。当方では上記デメリットの対策もきちんとさせていただきますので、ご安心ください。ホームページ制作に関する相談も承っておりますので、お気軽にご連絡くださいませ。
0
カバー画像

Wordpressでホームページを制作するメリット

皆さんこんにちは。山本佑樹です。ここ最近は短い睡眠時間が続いており、夜の作業がかなり辛くなってます。あともう一踏ん張りしたいと思います!!さて、今日はWordpressでホームページを制作するメリットについて、ご説明できればと思います。ホームページ制作を検討されている方でしたら、一度は「Wordpress」というワードを聞いたことがあるかと思います。もちろんWordpressを使うデメリットはありますが、今回はメリットにフォーカスしてお伝えしていきます。メリット①コンテンツ・ブログ記事の追加や編集などホームページの更新を自身で行うことができるメリット②プラグインが豊富で、簡単に機能を加えることができるメリット③無料のものも含めてテーマテンプレートの種類が豊富なため、さまざまなデザインのホームページを作ることができるメリット④SEO対策がしやすいメリット⑤Wordpressに関する情報がたくさんあるので、わからないことや問題が出てきたときに、解決しやすい以上の5つとなります。よく言われるメリットをお伝えしましたが、まだありますのでまた機会がございましたらより詳細をお伝えさせていただきます。Wordpressでの制作も承っておりますので、お気軽にご相談くださいませ。
0
カバー画像

Jimdoクリエイターのカラムコンテンツをスマホで見たときにで2列表示にするには

自動でPC画面とスマホ画面での見え方を変えてくれるJimdo(クリエイター)ですが、スマホ画面での表示は基本的にコンテンツを縦一列に表示します。これはJimdoの標準的な仕様なので仕方がないといえばそれまでなのですが、いざサイトを作ってみると「スマホで見た時、ここは2列で表示したいな〜」という箇所が出てきます。そういった場合は、CSSのプロパティ「Flexbox」を使用することで下の写真のような2列表示を実現できます。作業の工程上グーグルクロームの検証機能も使用するので、ある程度のHTML/CSSを読む力も必要になってきます。スマホ表示でカラムを2列にしたい方は、下記サービスよりお気軽にお問い合わせください。※このブログの内容はJimdo AIビルダーでは非対応なのでご注意ください。
0
カバー画像

2022年3月よりココナラを始めました!Web開発!

お初にお目にかかります。ハックルベリーです。今月の3月3日、雛祭りの日よりココナラでサービスの販売を開始いたしました!主なサービス分野は下記の通りになります!●Webサイト開発(HTML/CSS/JS/PHPなどコーディング)●その他、プログラミング全般(業務効率化ツールの開発など)※詳細は下記をご参照くださいませ。https://coconala.com/users/3085953これまで開発・制作案件はお得意様から直接お受けしていましたが、一念発起(?)、クラウドソーシングに挑戦いたしました!初のクラウドソーシング……まだまだ至らぬ点も多々あるかと存じますが、全力で対応させていただきますので、何卒よろしくお願いいたします!下記のようなご依頼から、「新規Webサイトが作りたい!」「現行サイトをカスタマイズしたい!」「現行サイトのバグをなおしたい!」ちょっとしたサイト周りのご相談まで、お気軽にお声がけくださいませ。※ココナラという天地に慣れるため、現在は可能な限り低価格にて対応しております!(これまでのお仕事を時給に換算すると大体「¥250/時間」くらいになりました……!)。まだまだしばらくは低価格を継続できるよう尽力いたしますので、どんどんお声がけいただければ幸いです!<筆者の主なプロフィール>大学在籍時に開業。卒業後もアプリ開発やWeb開発を中心に個人事業主として活動。実は文学畑出身で、文章を書くことが好き(でも、ライティングの仕事は今のところ受けておりません……)。■個人事業主歴(エンジニア歴)8年■業務効率化ツールの上場企業納品経験あり ■フリーランスとしてWordPr
0
カバー画像

CSS の手抜き 〜 Bootstrap

CSS の手抜き 〜 BootstrapVue の公式チュートリアルでも、CSS の部分に関する学習は Javascript や HTML の部分に比べると少なくなっていました。Web 開発の「機能」という観点で見ると、重要なのは、HTML と Javascript になるのが大きな理由です。CSS は「見た目」をよくするという位置付けなのでどうしても優先順位は低くなります。最小限の手間で、見た目をよくする方法に、Bootstrap などの予め標準的な HTML の記述の装飾をまとめた仕組みを利用すると、最低限の知識で、見た目の良いページのデザインが可能になります。この記事では、Vue で Bootstrap を利用するやり方を紹介しています。Bootstrap とは?Bootstrap は、HTML で書かれたページの基本的な「飾り」を予め準備して提供している「フレームワーク」です。 この機能を利用すると、Web ページのデザインを行う際に、CSS を書くための時間を最小限に抑えることが可能になります。特に、Web アプリなどの開発では、機能の方が重視される傾向が強く、基本的な HTML の部品の表示の仕方にこだわらないでも良い場合も多いので、上手に利用すると開発の手間を最小限にできます。Bootstrap 以外にも似たような仕組みは沢山提供されているので、調べて利用すると好みのデザインのフレームワークを見つけられるかと思います。Bootstrap の利用例次に、Bootstrap を使うとどんな事ができるのかを「ボタン」を例に見てみます。 下のイメージは、三つの例を挙げてい
0
カバー画像

各種コーディング価格の詳細

ーーーーーーーーーー■HTML / CSS*トップページ:25,000円〜 / 1ページ ┗レスポンシブ標準装備(ハンバーガーメニューを含む)*下層ページ:10,000円〜 / 1ページ ┗レスポンシブ標準装備*PCデザインカンプのみでのレスポンシブコーディング :0円 ┗経験をもとにSP版へレイアウト変更いたします*CSSアニメーション:2,000円 / 3ヶ所 ┗ボタンへのホバーアニメーション等ーーーーーーーーーー■jQuery*スライドショー:8,000円 / 1ヶ所 ┗「slick」を使用します*タブ切り替え:8,000円 / 1ヶ所 ┗タブ内の要素が3つ以下の場合の費用になります*アコーディオン:5,000円 / 1ヶ所*モーダルウィンドウ:8,000円 / 1ヶ所*トップへ戻るボタン:3,000円 / 1ヶ所その他の機能実装やアニメーション等もご相談ください。ーーーーーーーーーー■Wordpress*基本費用:5,000円〜 / 1ページ ┗htmlファイルからテンプレートファイルへの変更*ループ機能実装:5,000円 / 1ヶ所 ┗お知らせ等(メインループ1ヶ所のみ)*カスタム投稿:10,000円 / 1項目 ┗管理画面の構築およびページへの反映*カスタムフィールド:5,000円 / 1ヶ所 ┗管理画面の構築およびページへの反映*カスタムタクソノミー:15,000円 / 1タクソノミー ┗taxonomy-〇〇.phpの作成を含みます
0
カバー画像

Vue の公式チュートリアル 表示する文字に色をつける

Vue の公式チュートリアル 表示する文字に色をつけるVue の公式チュートリアルの第3回目です。ステップ3では、表示する文字に色を付けるやり方を学びます。これまで、Vue の「部品」のファイル「.vue」ファイルに HTML と Javascript を埋め込むやり方を学んできました。今回は、CSS を使って文字に色をつけます。前回までのポイントをもう一度まずは、前回までの復習です。 Vue の「部品」として表示する内容をまとめたファイルが「.vue」ファイルです。 このファイルには、三つの部分があります。* HTML を書く部分:「template」のタグの部分に書きます* Javascript のプログラムを書く部分:「script」のタグの部分に書きます* CSS を書く部分:「style」のタグの部分に書きます。 Javascript で、表示に使うデータを指定することもできます。 Vue のフレームワークでは、標準の HTML とは少し書き方が違っています。また、Javascript も特有の書き方で書くので、まずは標準的な書き方を覚えてしまう方法で学習を進めます。今回の学ぶのは?ステップ3で学ぶのは「表示する文字に色をつける」やり方です。標準的な HTML の文字も CSS を使うと、「体裁(見た目)」を整える事ができます。Vue でも、同じコンセプトで、表示のデータの「体裁(見た目)」を整える事ができます。これまでの復習で書いた通り、Vue の部品の「.vue」ファイルの中は、三つの部分から構成されていて、HTML/CSS/Javascript を記述できます。
0
カバー画像

Vue の公式チュートリアル(ステップ1)をやってみる!

Vue の公式チュートリアル(ステップ1)をやってみる!フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください!Vue の公式チュートリアルフロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。(日本語版のサイトはサイトはサイトはこちら)日本語のサイトは英語のサイトと同じではないようです。(2022 年 2 月現在) 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。最初の課題は?最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプ
0
カバー画像

CSS は後回しにしても良い

CSS は後回しにしても良いWeb 開発の基本は、HTML/CSS/Javascript です。基本的にどれも勉強しなければいけないのですが、優先度を考えると後回しにできる物もあります。Web アプリを開発する場合には、CSS は後で学習する事にしても良いもの一つです。Web ページを作るには必要Web ページを作る際には、HTML と CSS は必要です。これは、目的が「Web ページ」を作ることにあるためです。HTML だけでは、ページの細かい装飾ができないので、どうしても CSS を使って体裁を整える必要があリます。一方で、Web アプリの開発を考えた場合は、少し話が違ってきます。 Web 開発でも、最終的なページの体裁を整える場合には、CSS を使う必要があります。しかし、当面の目的は、「機能」の実現になるので、HTML と Javascript を中心に進めた方が効率的です。多少、体裁が悪くても機能は検証できるので最初は、HTML と Javascript で CSS は後回しにするか、最低限の利用でも問題ありません。CSS は手抜きもできるもう一つの理由は、Web アプリの開発の場合は、ある程度、手抜きができます。 Bootstrap などを利用すると、CSS の細かい部分を知らなくてもある程度の体裁を簡単に整える事ができます。基本的な CSS の記述を Bootstrap が提供してくれているので、細かい記述は書く必要が無いからです。もちろん、Bootstrap などでカバーされない部分もあるので、最終的にはその部分は CSS を使って記述する必要があります。しか
0
カバー画像

職業訓練って実際どうなの?〜Webデザイン系職業訓練に通って見た(6)〜

第6回 【訓練1日目(入校式)】皆さま、こんにちは。そしてこんばんば。ゆぎです٩( ᐛ )وいつもいいね!(お気に入り?)ありがとうございます!!!見てくださる方がいると分かるだけでやる気になります!!!!!!笑今回はWebデザイン関係の職業訓練校に無事合格し、入校式当日(訓練1日目)のことを書いていこうと思います。まだこちらの記事より前を見ていない方はぜひ第5回からどうぞ。なんなら今回初めて見られた方は第1回目からぜひ!!!!!ちなみに今回も途中から有料記事にさせていただいておりますm(_ _)m生徒さんについて書いている部分があるのであまり大きい声で言うべきではないと思いそうさせていただきました。ご興味あれば見ていただけると幸いです。
0 500円
カバー画像

年末御挨拶

少々早いですが…年末のご挨拶をさせていただきます。2021年2月に登録したココナラですが、約10ヶ月経過していたとは、時の流れる早さに驚かされますね。沢山の方々の支えもあり、私早苗はここまで活動することができました。最高位プラチナランクを継続し、気持ちの良い状態で年越しを迎えられそうです。ご依頼いただくお仕事を通して、私は幾度となく成長してまいりました。今では提供できる価値に自信を持つことができます。また、本日も納品させていただいたクライアント様より、お礼のコメントをいただくことができました。大変嬉しく思います!まだまだ早苗のココナラは続いていきます。年末ギリギリまでご依頼を受け付けておりますので、どうぞお気軽にご相談くださいませ!皆さま、良いお年を。
0
カバー画像

LPコーディングの基本料金について

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

プラチナランクに到達しました!

遅れての投稿となりますが、11月1日に出品者ランクが最高評価の【プラチナランク】となりました!ご依頼くださる方には感謝の気持ちしかありません。本当にありがとうございます!「即対応」「お客様の課題を解消する提案」「高品質」の3つを特に意識し、活動して参りました。もし、Web周りでお困りごとがあったり、「ホームページが欲しいけど分からないことだらけで不安。。」という方は私にメッセージをくだされば、迅速に対応させていただきますので、お気軽にご相談ください!お客様からは「迅速丁寧にこなしていただき、コミュニケーションもしやすく、大変助かりました。」「クオリティがよくご依頼して本当に良かったです!」とのお声をいただいており、技術面だけでなくコミュニケーション面でも高い評価をいただいております!本当にありがとうございます!常にお客様に寄り添った対応をさせていただいており、例えば、制作の流れとしては、(制作の流れ)ご相談→ヒアリング(お客様の目的、要望の把握)→要件定義(必要な機能、納期、費用)→制作着手→適宜進捗報告→初稿→納品という形で制作を進めております。特に最初のヒアリングを重要視しており、お客様のご依頼の目的をしっかりと把握し、ご期待を超えるようなサービスの提供をさせていただきます。主な活動内容としては、HTML,CSSなどの静的コーディングによるサイト制作やコード修正、WordPressを用いたホームページやランディングページの制作に特化し、出品サービスにも掲載させていただいております。下記が私が出品しているサービスになります。こちらは主に新規の静的サイトコーディングのサービスに
0
カバー画像

【続・続・続】ウェブページ制作珍道中…『パララックスを使ってみた』

ウェブ制作のスキルを上げるべく、時間を見つけて何かしらのメソッドを身につけています。コーディングしながら、メモをとる…の繰り返しで、まだまだ未知数の部分や理解できていない部分もあったり、こんなに大変なのかと日々痛感しております。ネットでウェブページ制作についていろいろ調べていて「パララックス」という手法があることを知り、早速取り入れてみました。「パララックス」とは「視差」を意味する用語で、画像に奥行きを出したりして効果を出すことをいいます。というわけで、試行錯誤しながら作ってみたのが「架空の温泉旅館」のサイトです。あいにく、ココナラブログは直リンできないので、動画にしたものを載せておきます。PC版では、背景画像を固定しつつも、要素はきちんとスクロールするように作りました。そして、テキストやボタンなどは下からふわっとフェードインするアニメーションを加えてみました。PC版(スクロールがカクカクしてます^^;)スマホ版…というわけで、これについてもHTMLやCSS、JQueryなどの文章を記載していきますが、階層違いでボタンが機能しなかったり、レイアウトが崩壊するなど、予想外の出来事が起きましたが、とことん原因を突き詰めれば解決するものだと勉強になったのでした。
0
カバー画像

面倒なCSS!?

面倒なCSS!?Web プログラミングには基本的に HTML/CSS/Javascript が必要です。この中でも意外に面倒なのが CSS です。この記事ではなぜ CSS が面倒なのか考えてみました。HTML と Javascript は意外にシンプルHTML と Javascript の方が、学習することは多いのはあきらかで。 しかし、HTML の場合は、記述が誤っていると目で見てわかりまし、間違いの箇所は比較的簡単に特定できます。Javascript の場合は、少し事情が変わってきます。 Javascript の問題は、大きく二つあります。* Javascript の記述上の誤り(文法のエラー)* プログラムの論理的な誤り(バグ) Javascript の記述上の誤りは、その箇所を実行した場合はエラーメッセージがコンソールに表示されるので間違いの場所の特定は簡単です。 プログラムの論理的な誤り(バグ)の場合は、場所の特定は少し難しくなります。しかし、デバッガーなどを使って、データの中身を見たりして工夫することで、バグを見つけることができます。いずれにしても、プログラミング言語でプログラミングをする場合、バグを見つけて修正するのはプログラミング開発の一部です。CSS は何が違う?CSS が特別というわけではありませんが、CSS の場合、問題の箇所を見つけるのが意外に難しいという事情があります。 HTML と同様に目に見えるという点では、想定通りに動作しない場合は、思ったような表示になりません。そいう点では簡単に問題が見つかりそうです。しかし、実際は表示が思うようにされないけれ
0
カバー画像

プログラミング学習おすすめ言語

初めまして「ゆずサポート」です。今回の記事ではプログラミング初心者の私が実際に使用した学習サイトをご紹介致します。私が学習している言語は以下のものです。・C#・HTML・CSS・JavaScript・Python上記になります。 C#の学習時間が長いのですが、ゲーム開発に主に使っていたため初心者にはとても難しいと今でも思っています。その後にその他の言語を学習したのですが、C#が難しすぎたので少し入りが簡単に感じました。ゲーム開発も面白かったのですが、Web開発もとても面白いです。最近はメインで・HTML・CSS上記を学んでいます。この2つの言語は2つで1つみたいなところがあるので、セットで覚えることになると思います。とても学習しやすかったのでおすすめの言語です。<参考にした学習サイト>・progate・ドットインストール<参考にしたYoutuber>・しまぶー・いまにゅ上記になります。今まで学習した言語はサイトやSNSで検索するとある程度の事が学習できる様になっています。なのでとても学習しやすくて分からなければ検索すると大抵の問題が解決します。これから学習を考えている方はとても学習しやすい環境が整ってますので、ぜひ挑戦してみてくださいね!
0
カバー画像

srcset と sizes 属性を使った img 要素では、どの画像がダウンロードされるか?

こんなふうに、srcset属性で複数の画像ファイルが指定された <img>タグがある場合、どの画像ファイルがダウンロードされるのでしょうか?閲覧する側の環境として以下を想定します。・ウィンドウ幅 360px(ビューポートも同じとします)・デバイスピクセル比 3- - - - - デバイスピクセル比 - - - - -デバイスピクセル比が 3 というのは、例えば 3 x 3 ピクセルを 1 x 1 のピクセルとして表示できるディスプレイであることを意味します。通常より3倍密度の高いディスプレイであるので、よりキレイな表示になります。スマートフォンのディスプレイや、Retinaディスプレイなどは、デバイスピクセル比が 1 より大きくなっています。- - - - - - - - - - - - - - - - - - - - - -この場合、ブラウザは以下のようにしてダウンロードする画像ファイルを選択します。(1) sizes属性で「ウィンドウ幅が1024pxより狭い場合は、100vw、それ以外なら 1024px」と指定されているので、この場合は前者が一致し、100vw が選択されます。(2) 100vw とは、ビューポートの幅に対して100%の幅であるので、今回の場合 360px となります。(3) デバイスピクセル比が 3 であるため、360pxの3倍である 1080pxの幅が最低限表示できる画像を、srcset属性で指定された画像から探します。(4) srcset属性値を見てみると、foo-1024.jpg ファイルが該当します(foo-768.jpg だと 108
0
カバー画像

【技術者向け】Chromeの拡張機能を作ってみませんか?

Chromeの拡張機能って知っていますか?Chromeで行う様々な操作をカスタマイズすることができる機能です。Chromeウェブストアで公開されていて、色々と便利な拡張機能が簡単にインストールできます。そんなChromeの拡張機能ですが、自分で作ることができます。私は趣味で10点程作成しました。その内、1つはChromeウェブストアで公開しています。その経験から拡張機能を作る良さについて語りたいと思います。良さを語る前に真逆なことを言います。正直Chromeの拡張機能はブームが過ぎ去ったと思います。一時期は様々な拡張機能が作成され、便利なchrome拡張機能を紹介する記事が溢れていました。しかし、拡張機能でユーザーの情報を不当に収集したり、ウィルスをダウンロードするものが作られ、Chromeの拡張機能は危険であると言われるようになりました。そこでユーザーが離れていきましたが、致命的だったのが2020年9月21日にChromeウェブストアで有料の拡張機能の新規公開を中止したことだと思います。これで多くの開発者が離れていきました。それでブームは去ってしまったと考えています。現在でも様々な無料の拡張機能がウェブストアで公開されていますが、以前のような活気はないように感じます。また、パソコンを使うユーザーが減りスマートフォンへ移行したことも要因の一つとして考えられるでしょう。そんな斜陽なChrome拡張機能ですが、私はこれの作成にハマっています。良さについて語ります。斜陽とは言いましたが、WebブラウザとしてはChromeはまだまだ現役です。Webブラウザシェアランキング(2021年6
0
カバー画像

1つのWebページに複数のHTML要素サンプルを記述する

1. はじめに 1つの Webページ上に、「部分的な HTMLとCSSのセット(以後、コンポーネントと呼びます)」を複数載せる方法を紹介します。 具体的には、ボタンのサンプルだったり、画像表示のサンプルだったり、そういったものです。 普通に書くと、それぞれのCSS(スタイル)が干渉する可能性があります。本記事の方法であれば、この問題は起きません。 2. 方法 Web Components を使って、それぞれのコンポーネントを隔離します。 手順は以下です。 (1) JavaScriptファイルの中に、コンポーネントを記述する 1つのコンポーネントを1つの JavaScriptファイルに記述します。 こんな感じです。- - - - - ここから - - - - -export default class extends HTMLElement {     constructor() {         super();         const shadowRoot = this.attachShadow({             mode: 'open'         });         shadowRoot.innerHTML = ` <style> /* ここにスタイルを記述します */ :host {   display: block;   contain: content; } p {   margin: 10px auto; } </style> <!-- ここにHTMLを記述します --> <div>   &l
0
カバー画像

【Laravel】#5スクールマネージメントシステム作ってみた!~授業スケジュールページpart2~

こんばんは。今回は教科別スケジュールのページです。いわゆる学習指導要領が科目別に確認追加編集できるページになっています。右側の項目から参照したい科目を選択します。試しに国語を選択してみます。これも今月の授業内容が初期表示されるようになっています。こちらはこの画面で全て内容を確認できるようにしています。⚙マークで編集画面↓登録画面は科目を選択できるようになっています。そしてこれまで同様に情報を登録していきます。目指しているのはアプリ内で授業の準備が全て整う状態にできることです。将来的には学習資料を更新・検索・リンク付・印刷までできるようにして、授業の下準備が効率的に行えるようなシステムを作っていきたいです。今回は以上です。ありがとうございました!
0
カバー画像

【Laravel】#3スクールマネージメントシステム作ってみた!~クラス予定ページ~

今回はクラスページのクラス予定に関するページについて紹介したいと思います。ここのページではクラスの予定のみが閲覧できるようになっています。それでは見ていきましょう。まずは基本のビジュアルから⬇︎月毎に閲覧できるようになっており、今月の予定が初期表示されるような仕様になっています。予定名、予定日のみが表示されるようにし、選択すると詳細が表示されます。こんな感じです⬇︎こちらの詳細ページで詳しく内容が確認できます。右側の⚙マークを押すと...⬇︎編集ページになっています。こちらですぐに内容変更ができるようになっておりアクセスしやすくしました。では登録画面を見ていきましょう⬇︎バリデーション(バリデーションは未入力のチェックや数字の半角指定などを判定する機能のことです!!)付きの情報入力画面です。確認ページ⬇︎(*全画面に戻った時のセッションについてはコード解説の時に解説します)登録ページ⬇︎情報が反映されました⬇︎ 予定をクラスごと、試験ごとなど分けていますがここに関して全て統一した予定でもいいのではないかとも思いましたが、例えば朝礼、夕礼での先生の話さなければならないことをすぐに確認できるのは便利だなと思い予定を細かく分けました。先生がいかに一つの仕事に集中できるかここが大事なのかなと思います。 こういうどうしたら先生の多すぎる業務を効率化できるか?と言う問に対してシチュエーションを想定しながらアプリの仕様を考えると、具体的な仕様が見えてきます(月毎表示の方がいいのではないか、すぐに内容修正をかけられた方がいいのではないか等)。次回は授業スケジュールのビジュアル紹介です。ありがと
0
カバー画像

【Laravel】#2スクールマネージメントシステム作ってみた!~生徒情報ページ~

今回はクラスページの生徒情報に関するページについて紹介したいと思います。ここのページで生徒の連絡先などがわかるようになっています。今回から各ページのビジュアルとワークフローを載せていきたいと思います。【緊急連絡のときにすぐに情報が引き出せるように】写真のように生徒の氏名、住所などがわかるようになっています。名前をクリックすると⬇︎情報の変更・削除ができるようになっています。最初はこちらから情報登録をします⬇︎【バリデーションつきの登録フォーム】⬇︎【確認ページ】⬇︎【登録完了ページ】⬇︎【反映された生徒ページ】⬇︎教員の仕事は多く煩雑な印象があるので、できるだけシンプルに目的を絞ったページ展開意識しました。次回はクラス予定のページを紹介します!
0
カバー画像

Webページ上でボタンを押したときに、必要な JavaScriptコードを読み込んで実行するサンプル

1. 必要になったときに JavaScript コードを読み込んで実行するあるWebページ上にボタンが設置されており、これを押すと何かしらの JavaScript コードが実行されるとします。 この場合、Webページにアクセスした際にその JavaScript コードを読み込んでおく必要はありません。「ボタンを押したとき」に読み込んで実行すればよいわけです(速度に問題がなければ)。これなら、Webページの読み込み&表示の高速化にもつながります。 この動作を実現するための、JavaScript の動的インポートを利用したコード例を紹介します。 「動的インポート」というのは、「必要なときに読み込んで実行する」といった意味になります。2. コード例(1) JavaScript モジュールの記述ボタンが押されたときに実行する JavaScript コードを単独の JavaScript ファイルに記述するのですが、今回ファイル名は、utils.js とします。内容は以下です。- - - - - ここから - - - - -export default {   say: (msg) => {     // ここに処理を書きます    alert(msg);   } };- - - - - ここまで - - - - -・say という名前のメソッド (関数) を定義しています。受け取ったメッセージを、アラート表示するだけのメソッドです。 ・ここでは 1つのメソッドしか記述していませんが、複数のメソッドを記述することもできます。 このファイルは、他のファイルから読み込んで貰うために、
0
カバー画像

【Laravel】#1スクールマネージメントシステム作ってみた!

 こんにちは、今回から少しずつLaravelでの学校や塾向け業務効率化Webアプリ開発の過程をここに残していきたいと思います。 Laravelを学び始めた人や、プログラミングに興味がある初心者の方にわかりやすい内容を発信できればと思います      (僕は全て独学です!誰でもできます!!!)。 兎にも角にも今回はこのアプリケーションで何ができるのかを紹介していきたいと思います。 top画像の左にあるのが用意しているメニューです。⬇︎こちら(きっかけはいつも日本の学校の先生って仕事量の多さが異常に多いなと思っていて、それを解決できるアプリ作ったら面白そうだなと思ったからです。ちなみに文部科学省の『教員が担うべき業務』を読んで内容を考えました。)それぞれの大まかな内容として•トップページ  --  今日の天気、予定、行事などが閲覧できるページ•クラスページ -- 先生が担当のクラスに関する情報が閲覧できる•成績管理   --   クラスの成績管理閲覧ページ•学校行事   --   学校行事の詳細を閲覧できるページ•カレンダー  --  予定一覧がカレンダーで確認できるページ•メッセージ  --  メールのような機能をつけたい(まだ開発していません)•職員フォロー --  教員同士の掲示板のようなページ•指導要領  --授業で必要なプリントなどを選べる(まだ開発していません)•情報登録画面 --  各情報の登録ページトップページクラスページ成績管理学校行事職員フォロー情報登録画面 こんな感じの見た目で開発しており、使いさすさシンプルさ、直感的な操作性を意識して見た目を整えています。 
0
カバー画像

【Micro CMS】静的サイトを高く売る方法 2/5【完全無料】

さて今回からは、実際にMicro CMSの使い方を解説していきます。まずはMicro CMSのサイトにアクセスし、新規登録をおこないます。第一回はこちら↓コンテンツの追加左側のメニューからまずはコンテンツを追加します。+ボタンを押すことで追加できます。ここでいうコンテンツとは、サイト内のどんな内容を表示させるか? といったものです。例えば「お知らせ」とか「メニュー」とかそんな感じでOKです。今回はお知らせを作っていこうかと思います。次に「APIの型を選択」という画面が現れます。通常は左側の「リスト形式」でOKです。すると「APIスキーマ(インターフェース)を定義」という画面に移動します。今回作りたいお知らせのイメージは、TOPページに一覧で・◯月◯日 お知らせを投稿しました・◯月◯日 お知らせを投稿しましたのようにテキストだけを投稿するものにしたいです。必要な項目はまずは日付とタイトルですね。それと各お知らせをクリックしたら、リンク先に飛べるようにしたいです。ですので「リンク先」の項目を作りましょう。こんな感じ。この時にそれぞれの項目でフィールドID、表示名、種類というものを決める必要があります。・フィールドIDはデータを呼び出すときに必要なものです。半角英数字でつけます。・表示名は、管理画面で表示される名称です。わかりやすいものならなんでもOK・種類はテキストや画像など、その項目においてどんな種類のものを投稿できるようにするか、というものです。テキストにはテキストフィールド、テキストエリア、リッチエディタの3種類があります。各項目の種類についてまず最初の項目にdateがありま
0
カバー画像

Webサイトのサーバー移行時におけるSSL証明書の発行について

サーバーを借りてWebサイトを長く運営していると、「サーバーを移行する」機会がたまに訪れます。その際に注意しておかないとけないものの一つが、SSL証明書です。これは、URLの頭の部分を「https://」としてWebサイトにアクセスさせるために必要なファイルなのですが(通信を暗号化します)、最近ですと、この HTTPS 対応が常識になってきていますので、多くのサーバーが SSL証明書を使っているはずです。ここで取り上げたいのが、レンタルサーバーサービスを使う場合です。レンタルサーバーサービスによって、SSL証明書を発行するための条件が異なるのですが、このあたりの情報は地味であまり目立たないので、サーバー移行をいざやってみて初めて問題に気付くということが起きがちです。一番望ましいのは、Webサイトを移行する前の時点から、新しいサービス(サーバー)側でSSL証明書を発行しておけるサービスであり、これならば、Webサイトを移行してすぐに https:// でアクセスすることができます。Webサイトにアクセスできない時間のことを「ダウンタイム」と言いますが、ダウンタイム 0 での移行が可能ということです。一方、サービスによっては、Webサイトを新しいサーバーに移行してからでないと、SSL証明書が発行できないために、ダウンタイムの発生が避けられない場合もあります。ですので、ダウンタイムを最小にすることが重要なWebサイトを運営しているのであれば、移行先のレンタルサーバーサービスを選定する際には、SSL証明書の発行条件には十分注意してください。具体的なレンタルサーバーサービスの例をあげます
0
カバー画像

コーディングランキング1位となりました!

私のサービス「Webサイトコーディング」が、Webサイト制作・Webデザイン > HTML・CSSコーディングのカテゴリーランキングにて、1位を獲得いたしました。これまでご依頼いただいた方へ、本当にありがとうございます!今後ともよろしくお願いいたします。また、新規のご依頼もお待ちしております(^^)ホームページ・ランディングページを中心に、Webサイトのコーディングを承っております。「デザインは用意できているけど、その後のコーディングはどうすればいいんだろう…?」そんなお悩みを解消させていただきたいと思っております。コーディングからサーバーへのアップロードまで、一貫してお任せいただけます!その他、0からのサイト制作や既存サイトの修正・更新など、幅広く対応いたします。Webサイトについて不明なことがありましたら、電話相談のサービスもありますので、どうぞお気軽にお声掛けください☆今後ともよろしくお願いいたします。 早苗
0
カバー画像

Webページを検証する各種サービス

1. はじめにWebページに問題がないかチェックすることができるサービスをいくつか紹介します。ココナラの制限で、外部のURLリンクは貼れませんのが、サービス名で検索して頂ければ簡単に見つかると思います。2. Webページを検証するサービス(1) HTMLを検証するサービス名「Ready to check - Nu Html Checker」[Check by address]という部分の下に URL を入力して [Check] ボタンを押すと、検査が始まります。(2) CSSを検証する サービス名「W3C CSS 検証サービス」[アドレス]に URL を入力して [検証する] ボタンを押すと、検査が始まります。オプションは、分からなければそのままで良いですが、[Profile] の選択項目によってエラーになる内容に違いがあるので、少し注意しておくとよいです。(3) アクセシビリティを検証する サービス名「WAVE Web Accessibility Evaluation Tool」Web page address のところに URL を入力して Enter キーを押すか、右側にある矢印をクリックします。(4) Web Vitals (ページの読み込みパフォーマンス) を検証する  サービス名「PageSpeed Insights」中央のフィールドに URL を入力して、[分析] ボタンを押します。3. おわりに各サービスの結果を理解するには知識と経験が必要ですが、まずは使ってみないと始まらないとも言えます。「検証する」→「結果の中に分からない用語があれば調べる」を繰り返しましょ
0
カバー画像

シンプルな Web サイトの作り方

シンプルな Web サイトの作り方シンプルな Web サイトは Firebase のホスティング機能を利用すると簡単に作成できます。HTML と CSS で必要なページを作成して公開する方法です。各ページの中身(コンテンツ)を作成すれば、簡単にインターネットで公開で s きます。この Web サイトの作成に必要なのは以下の項目です* 基本的な HTML と CSS の記述方法* Google アカウント(Firebase を利用するには Google アカウントが必要です)* Web サイト作成用の PC(Windows/Mac/Linux)* インターネットアクセス費用は基本的に無料ですFirebase プロジェクトの作成Firebase のホスティング機能を利用して公開するので、Firebase のプロジェクトを作成する必要があります。 Firebase は Google が提供するサービスで利用するためには、Google アカウントが必要です。 まだ、Google アカウントをお持ちでない場合は、最初に Google アカウントを作成してください。Google アカウントはこちらのサイトから作成できます。Google のアカウントの準備ができららFirebase コンソールにアクセスします。Firebase の利用が初めての場合は、以下のような画面が現れますので、「_Create a project_」をクリックします。Firebaseプロジェクト作成画面次に表示する画面では、プロジェクト名を入力します。Firebaseプロジェクト名入力画面次の画面は Google An
0
カバー画像

IE11とflex

まだまだIE11に対応したコーディングも必要だと思います。(かなり、状況は変わってきましたが)IE11は他のモダンブラウザと比べるとCSSの対応状況が悪いです。古いブラウザなのでしょうがないのですが...Flexboxなら、IE11でも使えるのかなっと思ったら、思い通りにならない事もありまして...IE11でflexのショートハンドにcalcは使えない→対応方法:全部書きましょう(煩わしいですが...)//3列に並べる、右にマージン20pxつける。.flex_item{flex:0 1 calc((100% - 40px) / 3);margin-right:20px;}.flex_item:nth-of-type(3n){margin-right:0}こんな感じでcalcを使いたい時があるのですが、IE11では、ショートハンド指定でcalcを使えないです。//こんな感じで書く.flex_item{  flex-grow:0;  flex-shrink: 1;  flex-basis:calc((100% - 40px) / 3);  }実はこれだけでは、IE11でまだ崩れる可能性があります。なぜなら、flex-basisにbox-sizingがデフォルトでは効かないからです。→対応方法:max-widthも併記する。max-widthも一緒に指定しましょう。.flex_item{  flex-grow:0;  flex-shrink: 1;  max-width:calc((100% - 40px) / 3);  flex-basis:calc((100% - 40px) /
0
カバー画像

ポートフォリオに制作物を追加しました

ポートフォリオ機能を発見!さっそく制作物を登録。と言ってもまだ2つですが・・・。汗今回は「ハンバーガーメニュー」を実装。サイトの右上や左上に、二本線や三本線で表現されているアレです。よく見かけますよね。サイトを見て欲しい側としてはできるだけ多くの情報を提供したい。だけど、どこにどんな情報があるのかわかりにくいと、サイトを見に来た人はあっけなく離脱してしまいます。自分たちのことを知ってもらうチャンスを「サイトが見にくい、知りたい情報がどこにあるかわからない(見つけにくい)」という理由で逃すのは、すごくもったいない!><そんな時に役立つのが「ハンバーガーメニュー」線をクリックやタップすれば、サイトのメニューを一目で確認できます。もちろん、そこから知りたい情報へ1タップで行けるので、見る側としてはノンストレス。ハンバーガーメニューがあるだけで【快適に利用できるサイト】という良いイメージが自然とつく。とても有効的な機能だと私は思っているのです。そんな理由もあって、あの二重線や三重線をいろいろなサイトやアプリで見かけるのでしょうね♪
0
カバー画像

WordPressのブロックエディッタのサイト作成は難しい?

WordPressに、ブロックエディッタ(グーテンベルク)が実装されて、数年立ちましたが、いまだに悩む事が多いです。もちろん、ブロックを使いまわせたり、コードを(ほとんど書かず)簡単にサイトのパーツを作れる等大きなメリットもたくさんあります。私が難しく感じているのは、デザインデータどおり、細かく要素を調整したい場合です。カラムブロックなどは、スマホでは縦1列に、PCでは横に表示されるようにCSSが設定されています。これを、スマホでは横に2列複数行にしたいとなった場合もあるとおもうのですが、そうなると、標準のカラムブロックのCSSを上書きしなければいけません。これがかなり難しいのです。特にカラムブロックのデフォルトのCSSは、あらゆる幅でもよい具合に表示されるよう、かなり複雑なCSSが設定されています。ですので、なんでここで、左マージンがでるんだということをかなり経験しました。それを解決する方法は、色々アプローチがあると思うのですが、私の場合、「カラムブロックはどのようなCSSになっているかをまず把握する」「カラムブロック用のCSSひな形を作る」なのかなとリセットCSS使われている方も多いと思いますが、ブロックエディッタ用のリセットCSSとかあれば便利なのかなとも思ったり(でもそれだと、ブロックエディッタの良さを生かせなかったりするかな)
0
カバー画像

学習に明け暮れる日々

今回は結構投稿するまでに期間があいてしまいました。今まで何をやっていたのかというと、プログラミングの学習と国家試験(基本情報処理技術者試験)の学習でした。正直国家試験に関してはすべてを学習できるとは思っていないので、出来そうな分野だけを集中的に取り掛かっています(笑)(データベース・セキュリティは念入りに。。。)プログラミングに関しては、一度今ある中途半端な知識をリセットしWEBページの基礎から勉強しなおしています。基本的なCSSはもちろんですが、ようやくアニメーションの仕組みが頭に定着してきたような気がします。(本当に気がするだけかもしれない。。。)JavaScriptの分野もこれから基礎を固めていこうと思います。ノート替わりにここに投稿しようかな?
0