CSS Grid を使ってグリッドレイアウトを実装する方法｜Gimmick log公開日：2017.10.07 更新日：2023.03.19 CSS display:grid;プロパティを使うと、CSSのみでタイルレイアウトを実装することが可能です。 display:flex; でもグリッドレイアウトは可能ですが、display:grid;とdisplay:flex;の違いをざっくり言うと、flexレイアウトは横方向のレイアウトを指定するのに対し、gridレイアウトは縦横に指定できることです。 以下はそのサンプルです。
【jQuery】もっと見るボタンで要素を開閉する方法｜Gimmick log
公開日：2015.11.20 更新日：2023.03.19 jQuery, アコーディオン もっと見るボタンを押下して、非表示要素をスライドダウンで表示させます。 読み込みは行われているので、処理が早くなるわけではないのですが、ニュースサイトなど情報量が多いサイトの場合はこういった方法が使えます。 もっと見るボタンクリックで透過させた部分をスライド表示する方法 文章が多めのニュース記事なんかでよくある見せ方ですね。 テキストの一部をCSSのグラデーションで覆って、続きがあることを明示しています。 サンプル See the Pen もっと見るでスライド表示 by ponzu (@ponzu) on CodePen. html <div class="content-wrap animated"> <div class="content-txt"> <p>この中にもっと見るで表示させたいテキス
WordPressで構造化データ用のパンくずを生成する｜Gimmick log
公開日：2017.04.24 更新日：2020.05.19 WordPress WordPressでschema.orgに基づく構造化データ用のパンくずコードを生成するためのコードをご紹介します。 こちらの関数を利用すると以下のようなhtmlを生成し、検索結果でパンくずが表示されるようになります。 （100%確実に…というわけでもなさそうですが） Googleの検索結果 <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/" itemprop="item"><span itemprop="name">TOP</
無料商用フリー写真・動画素材まとめ｜Gimmick log
公開日：2017.01.16 更新日：2020.05.20 DESIGN 無料の商用フリー写真、動画の配布サイトをまとめました。 ※ご使用にあたっては、各サイトの利用規約を必ずご確認ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressで重複しないタイトルタグとdescriptionを生成する｜Gimmick log
CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識｜Gimmick log
【CSS】background-sizeで背景画像をレスポンシブに設定する方法｜Gimmick log