Web開発
CSSだけで簡単に1行や複数行の3点リーダーを付ける方法
この方法を知っていれば、1行でも複数行でも3点リーダーを表示でき、レスポンシブルデザインのようなマルチデバイスでもレイアウトが崩れずに表示可能です HTMLのレイアウトでは時には文字がはみ出した際に、3点リーダーと呼ばれる「…」をつける場合があります。 普通に記述してしまえば対応できますが…
最新技術やプログラム、デザインなど様々な情報を提供するサイト
Web15 pages
Web開発
CSSでアプリのようにピタッとスナップするスクロールを作成
アプリでスクロールしてコンテンツにスナップする動作は一般的ですが、CSSでもアプリと同じようにスクロールしてスナップする動作が実装できます。 出典元：CSS Scroll Snap - Ahmad Shadeed アプリなどで横スクロールしてコンテンツにスナップするといった動作をよく見かけると思いますが、CSSで横スクロールのU…
サーバー構築
Amazon EC2 Instance Retirementとメールが来たときの対応
AWSのEC2からhas detected degradation of the underlying hardware…と来たときでも簡単に対応できます。その対応方法を詳細に説明します。 みなさんの中にもAWSのEC2を使った事がある人もいるかと思います。 そのAWSからある日、下記のようなメールが届きました。 Hello, EC2 has detected degradation of the underlying hardware…
Web開発
SEO対策にXMLの更新日（lastmod）を正しく表示する方法
SEO対策必見。Hugoのサイトマップをみてみるとlastmodの値がすべて同じになってました。その原因と解決 方法を詳細に説明しています。 Hugoを使って記事を作成しているのですが、サイトマップをみてみるとlastmodの値がすべて同じになってました。その原因と解決策を今回は探…
Web開発
Googleにインデックスされないときの対応方法は？
Googleにインデックスされるというのは非常に重大なことです。せっかく書いた記事が検索結果に表示されないとき、どうしたら良いのでしょうか？ 近年、ブログやWEBサイトを作って公開している人が増えてきました。 そうした中で、Googleにインデックスされるというのは非常に重大なことで…
Web開発
javascriptで画面ロックする場合は、Workerを使ってみよう
UIロックが発生する場合は画面上の処理と、重い処理を分けることで表示させることが可能です。早速jsでその処理を実装して軽快なUIを作成しましょう。 javascriptで重い処理を書く際やforやwhileなどのループを記述する際に気をつけないといけないのがUIロックです。 とくに重い処理…
Web開発
パソコンは不要。スマホ、タブレットでできるブログ投稿
スマホ、タブレットを使って記事が投稿できたら、おしゃれなカフェで記事を書けます。そんなブログの投稿や更新方法を説明していきます。簡単に導入可能。 iPhoneやiPadなどのスマホ、タブレットは持ち運びに非常に便利です。パソコンよりも軽く、パソコンと同等の機能を備えてます。 そうした端末…
Web開発
Amazon EC2でもGo言語とHugoを使えるようにする方法
AWSのEC2にGo言語とHugoをインストールして、Webサイトを簡単に、最速で作成する手順を詳細に解説してます。Github Pagesからの移行も可能になります HugoをGitHub Pagesで展開していたのですが、今回はGitHub Pagesではなく、Amazon EC2にHugoをインストールして…
Web開発
2022年のWebデザインの最新トレンドとレイアウト
2022年に期待されるトレンドは？クリエイターは、より「良い」ウェブデザインとされるものの境界を押し広げています。最新トレンドを取り入れましょう。 出典元：Web design trends for 2022 | Layout この2年間で学んだことは、私たちは常に新しいものに適応し続けなければならないということです。2022年に向けて、デ…
Web開発
第0回のテーマ「Webデザイナー、コーダーってなに？」
第0回「Webデザイナー、コーダーってなに？」にです。この講座では現役Web開発者がWeb業界を目指す方に様々な情報をわかりやすい解説しています。 はじめに 「未経験でもWebデザイナー、コーダーになろう」ではWebデザイナーやコーダーなどWeb業界を目指す方に、現役Webデザイナー兼コー…
Web開発
CSSでもできる！知っておくべき重要なヒントとコツ 8選 8選
わずか数行のコードでCSSで洗練されたデザインを作成可能。jsで実装していたことがCSSでも！？そんな効率的に開発するためのテクニックを紹介しています 出典元：8 Essential CSS Tips and Tricks Every Developer Should Know CSSは、HTMLスケルトンを設定した後、Webページにスタイルを追加するために使用されます。さらに、わずか数行…
Web開発
ファビコンは1サイズのみ！さらにダークモード対応させる
Webサイトをダークモード化、用意するファイルの数は1サイズでOK。綺麗なファビコン表示と、ファビコンをダークモード化する方法を詳しく説明します。 最近ダークモードと呼ばれる機能に対応したアプリが増え、それと同じようにWebサイトでもダークモードに対応しているものを見かけるようになりまし…
Web開発
2022年に注目すべきモバイルアプリ開発トレンド 15選
モバイルアプリ開発の新しいトレンドが数多く出現していますが、今回はモバイルアプリ開発のトレンドのTOP15を取り上げます。注目のトレンド満載です。 出典元：Top 15 Mobile App Development Trends to Watch for in 2022 モバイルアプリ開発業界は、驚異的なスピードで進化しています。このデジタルダーウィン時代に生き残り、繁栄する…
Web開発
Hugoでテーマが反映されない（画面が真っ白のまま）
Hugoではテーマ（theme）を使って簡単にブログやサイトを作成することが可能です。テーマはGitHubなどにたくさん公開されて簡単に導入…
Web開発
Hugoで記事を投稿してみよう！Hugoでの記事投稿の仕方。
hugoで記事を作成して、投稿するためには専用のコマンドを使ってファイルを作成するか、postsなどのディレクトリにmarkdownの.mdファイルを設置する必要があります。今回はhugoでの記事の投稿の仕方を説明いたします。 記事を投稿する hugoで記事を作成して、投稿するためには専用のコマンドを使ってファイルを作成するか、postsなどのディレクトリにmarkd…