新着記事一覧

大阪書籍印刷株式会社 | 引き継がれる、百年の実績と信頼https://os-in.com/ Planning / HTML,CSS / WordPress 「公式サイトをWordPressで一新したい」ということで、ヒアリングやWordPress設計から対応。 デザインは XDファイルでいただきそこからコーデ...

医療法人晴和会 上田診療所 | 松原市の内科・循環器科・外科・放射線科・リハビリテーション科ueda-shinryojo.com Planning / Design / HTML,CSS / WordPress / Image 「現在Webサイトがないので、診療所の良いところやウリを説明できる公式サイトが欲しい...

ブラウザーで使えるVisualStudioCode！iPadやChromebookでも使えちゃう、インストール不要のVS Code。急に使わなくてはならないPCでもいつもの環境で使えるブラウザー版VS Codeがリリースされました！

detailsタグとsummaryタグでアコーディオンを実装し、CSSでアニメーションを付加。コピペで簡単に動的なアコーディオンを実装できるようにしました。よくある質問や折りたたみのアコーディオンメニュー作成にどうぞ！

冬場のLPではどうやって冬っぽくしよう？どうやってクリスマスっぽくしよう？と悩みますよね。そんなときにオススメなのが『雪を降らせる』です。一気に冬っぽい印象を与えることができます。CSSのコピペで簡単に実装する方法を紹介します。

Visual Studio Code の拡張機能Power Modeをインストール。文字を打つと炎が上がったり綺麗なエフェクトを設定できる！面白い拡張機能をインストールしたので紹介します。

テキストを中央揃えにしたとき、スマホで見たときにちょうど良いところへ改行を入れて、綺麗に読めるように。でもそれだとPCでは改行が多すぎる・・・なんてとき、ありませんか？その逆も然り。今回はそんなPCとスマホで起こりうる改行問題を解決するための方法をコピペで簡単に解決できる方法を紹介します。

ふた昔前くらいに流行ったであろうhtmlのmapタグことクリッカブルマップ。画像の好きなところにリンクをつけられる便利なやつ。jQueryを利用することでレスポンシブデザインサイトでクリッカブルマップが実装できるようになっています。

PCやタブレットでは横並びに。スマホでは縦並びに。コンテンツをより見やすくするために、レスポンシブデザインとして、そういったテクニックも必要ですよね。ブログのトップページなどの記事の並びでも、そういった表現はよく利用されています。今回は「flexbox」と「mediascreen」を利用して実装したいと思います。もちろん コピペで簡単に 実装できるようにサンプルを用意しました。

ふと自分のサイトをスマホで見てスクロールさせていると「なんかスクロールが不安定で横に少しだけ動くぞ・・・」ということに気づきました。はて、これはなんぞや？と真横にスクロールさせてみたところ、「少しだけ右に余白ができてしまっている・・・」ということに気づきました。その修正方法をここに記しておきます。