カテゴリー: コーディング

日本語でも使いやすい！フルサイト編集に対応した無料WordPressテーマ
  • 最終更新日
  • タグ

WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！
続きを読む

JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
  • 最終更新日
  • タグ

新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。
続きを読む

Webサイトの制作途中や学習時に使えるダミー画像の生成サービス

Webサイトの制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。そんなダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。かつて「制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ」という記事で紹介したこともあったのですが、SSLに対応していないものも多かったので、httpsに対応した画像URLが生成できるもののみに絞りました！
続きを読む

Instagramの投稿一覧をWebサイトに表示できる【LightWidget】

WebサイトにInstagramを掲載したい！と思ったときに、意外とその方法が見当たらなかったりしませんか？各Instagramの投稿をブログ記事などに埋め込む方法は公式でありますが、投稿一覧を掲載するには今回紹介する「LightWidget」というサービスを使うと便利ですよ！
続きを読む

コピペでOK！セクション間のおしゃれな仕切りをカスタマイズして実装できる便利なWebサイト3つ

上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう！
続きを読む

WordPress 5.8から追加されたブロックベースのウィジェットとの付き合い方
  • 最終更新日
  • タグ

WordPress 5.8が公開され、ウィジェットの扱いが大きく変わって早1ヶ月。皆さんうまくウィジェットとお付き合いできていますか？レイアウトが崩れたりHTMLの構造がおかしくなっちゃったりの不具合をどうにかする方法や、そもそも元のウィジェットに戻したい！という方向けに記事にしてみます。
続きを読む

デザインカンプからのHTML/CSSコーディングの練習になる学習サイト

HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！
続きを読む