デザイン

デザインタグ記事(更新日順)

  1. タグ: , ,
        ホームページ制作例 株式会社枚方技研
    株式会社枚方技研 ご紹介 1998年以来,お付き合いしていただいている半導体製造装置設計メーカーです. ただし,このホームページは会社のホームページですが,ノンブレンというウレタン防振材の販売が主となるページとなります. […]
  2. タグ: , ,
        ホームページ制作例 アイシステム株式会社
    アイシステム株式会社 ご紹介 別のお客様のご紹介で2018年から,お付き合いいただいている電気設計・省力化自動化設備を設計製作されている企業です. 目的 採用に力を入れたいということで今回リニューアルのお話を頂きました. […]
  3. タグ: , ,
        ホームページ制作例 マイクロスクェア株式会社
    マイクロ・スクェア株式会社 ご紹介 2005年以来,お付き合いしていただいているマイクロスコープ・UV LED照射装置設計製造販売メーカーです. コストパフォーマンスに優れたマイクロスコープやUVLED照射器を製造,販売 […]
  4. タグ: , , , , ,
        【WordPress】アイキャッチ画像を設定しないでもサムネイルを表示する方法
    WordPress でいちいちアイキャッチ画像を設定するのは面倒くさいと思ったことはないだろうか. ただ,テーマによっては様々な場所でアイキャッチ画像がサムネイルとして使われている. この画像があるのとないのとでは見栄え […]
  5. タグ: , , , ,
        【JavaScript】目のマークでパスワードの表示を切り替える実装方法
    目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 以下に動かせるサン […]
  6. タグ: , , , , , , , , , , ,
        【比較】Prism.js と highlight.js と google-code-prettify のどれを使えばいい?
    今回は wordpress のソースコード表示用ライブラリを選ぶときに一度は目にするであろう Prism.js、highlight.js、google-code-prettify について書きました。 上記3つは軽量のラ […]
  7. タグ: , , , , , ,
        【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
    (2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表がある. 横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分からなくなる. […]
  8. タグ: , , , , , ,
        【CSS】レスポンシブ対応縦スライダーテーブル(表)
    レスポンシブ対応のホームページの制作で面倒なものの一つに表がある. 以前,横に長いテーブルを左端を固定してスクロール(スライド)させるテーブルの作り方は紹介したが,今度は縦に長いテーブルで上端を固定して縦にスクロール(ス […]
  9. タグ: , , , ,
        【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […]
  10. タグ: , , , , ,
        LCP (Largest Contentful Paint) について
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み ウェブフォント読み込み中の全テキストの表示 次世 […]
  11. タグ: , , , , , ,
        【CSSのみ】レスポンシブな多階層ハンバーガーメニューの実装方法(サンプル付き)
    ハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから […]
  12. タグ: , , , , ,
        【CSS】z-index が効かない場合の注意点
    z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。 以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]
  13. タグ: , , , , , , , , , ,
        【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    javascript無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポン […]
  14. タグ: , ,
        【CSS】テキスト(見出し,タイトル)に横線をつける方法
    HTMLのコーディングで必要になり,ちょっと調べたので備忘録. 見出しなどの文字列の両側(両端,左右)に横線(ハイフン・横棒)をつけて,中央にもっていきたい場合がある. - を使うと ------ のように切れ切れになっ […]
  15. タグ: , , ,
        CSSで円を描き,内側にテキストを入れる
    円をかいて,中に文字を入れるとはこのような絵のこと. 上左中央右下 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: relative と相対指定にして,中の文字は position: […]
  16. タグ: , , ,
        CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法
    リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると押すと別サイト(外部リンク)に行くことが分かりやすいので親切である. なぜ,このようなリンクアイコンを設けるのかという必要性の観点からすると「クリックすると […]
  17. タグ: , , , , , , ,
        画像スライダー Swiper の設定・使い方 (HTML, CSS, JavaScript)
    ホームページで使われる「画像スライダー」は種類が多数あり,どれを使うか迷う. 無料で商用利用可能な Swiper 少し調べてみた限り,Swiper というスライダーがとてもよく出来ていると思ったのでこのスライダ―の使い方 […]
  18. タグ: , , , , ,
        【レスポンシブ対応】メガメニューをCSSのみで作成
    【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので,メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする. (2020 […]
  19. タグ: , , , , , ,
        【CSS】レスポンシブ対応縦横ヘッダ固定テーブル(縦横スクロール)
    スマホ表示の時に画面からはみ出る table をスライドさせる方法に関して以前に書いたが,それらは IE11 で動くようにするために面倒くさいことをしていた. しかし,もうサポートも終了するので,IE11 は無視してもよ […]
  20. タグ: , , , ,
        table(テーブル・表)で absolute を使うとセルの枠がずれる
    原因不明の表のズレ px なのに小数点表記 とある案件でスライダー表(【CSS】レスポンシブ対応横スライダーテーブル(表)参照)を作成したときのことです。 この表は一番左の列を position:absolute にして […]
Pagetop