弊社は創業から27年で、上場企業や公官庁、病院、学校など累計1,200社以上との豊富な取引実績があります。 京都のホームページ制作会社では最大級の約50人体制で、あらゆる種類のホームページ制作に対応しています。 Webデザインを得意としていることに加えて、Webマーケティングも強みとしており、成果を重視したホームページ制作が特徴です。 Webサイトの企画・デザインからシステム開発、公開後の更新・運用・管理までご要望に合わせて対応が可能です。 ホームページ制作のことなら何でもお気軽にご相談ください。

Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に

「きれいだな」「残しておきたいな」と思った風景を、そのまま切り取って残せる写真。 たくさん写真を撮っていると、あるときふと、どれも同じような写真に見えたり、思い通りのイメージで撮れないと感じたりすることがあります。 そんなときは、まず「構図」を見直してみましょう。 同じ写真でも構図を変えるだけで、写真の雰囲気や印象は大きく変わります。 構図を意識して写真を撮ることで、その写真の中で特に目立たせたい要素が際立ち、作品を通して伝えたいメッセージがより伝わりやすくなるからです。 さらに、構図をたくさん知っておくと、写真撮影の引き出しが増え、目の前の被写体や風景の魅力を引き出しやすくなります。 この記事では、よく使われる構図から応用編まで、15種類の構図を紹介します。 この記事の内容を参考に、表現の幅を広げ、もっと写真撮影を楽しんでくださいね。 まず押さえておきたい10の基本構図 まずは、基本的な

その他のサンプル: Wikipedia:良質な記事, Wikipedia:長いページ 紹介 「テキストゆれないくん」は文章に含まれる表記揺れを検出するツールです。「コンピュータ」と「コンピューター」、あるいは「全て」と「すべて」といった同じ単語の別表記が使われていないかどうかをチェックできます。 「テキストゆれないくん」は元々このサイト (https://inzkyk.xyz/) の文章校正用に開発されました。機能が成熟してきたので UI を付けて公開します。 このページから手動で使う限り、「テキストゆれないくん」は商用/非商用を問わず自由に使って構いません。「テキストゆれないくん」は無保証で提供されます。 特徴 ウェブブラウザから使える このページをウェブブラウザで開いているなら、「テキストゆれないくん」は既に動いています。このページの最初にあるのは「テキストゆれないくん」を使うための完

見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加

WordPressは、Webサイトを手軽に作成・運営できるツールです。 しかし、いくら便利なツールだとはいえ、複数のWebサイトを運用するとなれば、それなりに管理の手間が増えてしまいます。 そのような場合に便利なのが、WordPressの「マルチサイト」という機能です。 本記事では、マルチサイトの概要やメリット・デメリット、設定方法などについて紹介します。 ※本記事で紹介している情報は執筆時点のものであり、閲覧時点では変更になっている場合がございます。また、ご利用の環境（ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など）によっては本記事の情報通りに動作しない場合がございます。あらかじめご了承ください。

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

デベロッパーツールでのオーバーライドとは、WebページのHTMLやCSS、JavaScriptをリアルタイムに編集することで、表示上の見た目や動作を変更することができる機能です。 例えば、デザインやレイアウトの微調整や、JavaScriptの挙動のテストなどに活用出来ます。実際のWebページに変更を加えずに、開発者自身が作業を進めるための一時的な手段として利用されます。 オーバーライドは開発者自身のローカルマシン（PC）上に作ったファイルで作業をします。作業ファイルはWebサーバーではなく、自分のPCにあるので、他の閲覧ユーザーに影響を与えることはありませんのでご安心ください。 オーバーライドが何かを知るための5つのメリットオーバーライドを活用することで、以下のようなメリットがあります。 リアルタイムでの変更が可能デベロッパーツールでのオーバーライドは、WebページのHTMLやCSS、Ja

Visual Studio Code と Git Hub を連携させてみる 前編 Visual Studio Code は、開発者に人気のエディターです。 単なるプログラムを記述するエディターとしてだけでなく、拡張機能を組み込んで自分の好きなようにカスタマイズできることも人気の理由です。 また、ソースコード管理の GitHub との連携も行えますので、チーム開発にも対応可能です。 今回は DevOps における基本的な開発ツールとして、Visual Studio Code と GitHub を連携させる基本設定について解説します。 Visual Studio Code のインストール Visual Studio Code はオープンソースで開発されており、無料で利用できます。 対応OSは Windows、macOS、Linux です。 必要な環境にインストールできます。 使用したい環境に合

WordPress 4.3からテーマカスタマイザーにファビコンの設定ができる「サイトアイコン」という項目が追加されました。 管理画面から簡単にファビコンを変えられるようになった上、一緒にapple touch iconも出力してくれて便利極まりないのですが… 実は背景透過した画像を設定するとapple touch iconにちょっとした問題が起きることに気づきました。 今回は「ファビコンはテーマカスタマイザーの『サイトアイコン』で設定しつつ、apple touch iconは出力しない」というカスタマイズ方法を考えてみたお話です。 「サイトアイコン」で出力されるHTMLからapple touch iconを削除 よっひー(@yosiakatsuki)です。 WordPress 4.3からテーマカスタマイザーに追加された「サイトアイコン」 管理画面で設定するだけで次の4つのようなHTMLタグ

JASRAC許諾第9009285055Y45038号 JASRAC許諾第9009285050Y45038号 JASRAC許諾第9009285049Y43128号 許諾番号 ID000002929 ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号 第6091713号)です。

JASRAC許諾第9009285055Y45038号 JASRAC許諾第9009285050Y45038号 JASRAC許諾第9009285049Y43128号 許諾番号 ID000002929 ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号 第6091713号)です。

お知らせ 【メンテナンスのお知らせ】4月11日(木)10:00から1時間ほど、メンテナンス作業を予定しております。作業の間はconnpassのご利用が出来ません。ご迷惑をおかけしますが何卒ご了承ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、2024年5月23日(木)を以ちましてイベントサーチAPIの無料での提供の廃止を決定いたしました。 2024年5月23日(木)以降より開始予定の「connpass 有料API」の料金プランにつきましてはこちらをご覧ください。 お知らせ connpassをご利用いただく全ユーザーにおいて健全で円滑なイベントの開催や参加いただけるよう、イベント参加者向け・イベント管理者向けのガイドラインページを公開しました。内容をご理解の上、イベント内での違反行為に対応する参考としていただきますようお願いいたします。

▼研修を実演するイベントが開催されます！ 4/15(月) 18:30〜『エンジニア基礎 - 話題の新卒向け研修実演』 https://forkwell.connpass.com/event/315283/ ▼この研修についてのテックブログ記事 https://tech.willgate.co.jp/entry/2024/04/01/184252 ▼補足 株式会社ウィルゲート 2024年度エンジニア新卒研修「エンジニア基礎」の資料です。 実際に研修で使用したものを加筆修正して外部公開しています。

WordPress6.5 RC1 が 公開されました。 WordPress6.5 は 2024年3月26日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress6.5 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 ※この記事はブロックテーマ「Twenty Twenty-Four」でテストしています。クラシックテーマでは使えない機能もありますのでご了承ください。 リリースまでのスケジュールは WordPress 6.5 Development Cycle に載っています。 WordPress6.5 RC1 https://wordpress.org/news/2024/03/wordpress-6-5-release-candidate-1/ ブ

Text Styles Added! Merge and link all color & text styles in the page: - Overall usage assessment - Group elements with the same appearance together - Merge and link to selected style - Select all elements with the style - Make all possible fix automatically with a single click Things to notice...

PageSpeed Insightsで表示される「使用していない JavaScript の削減」の対策方法 2024.04.24