CSS height 0 から auto で transition を有効にする方法 - by Takumi Hirashima
CSS で height 0 から auto で transition を有効にする方法を紹介します。 例えば、height 指定 0 から hover 演出を有効にしたい時に便利な方法です。 max-height を指定する height:auto; の指定では transition が効かないため、max-height を指定することで transition を有効化します。 div a { max-height: 0; transition: max-height .4s ease; } div:hover a { max-height: 100px; // 高さの数値は適宜変更してください } まとめ CSS で height 0 から auto で transition を有効にする方法を紹介しました。
CSS エリア内でコンテンツが追従する position:sticky; の使い方 - by Takumi Hirashima
CSS 指定エリア内でコンテンツが追従する position:sticky; の使い方を紹介します。 例えば、サイドバー内の要素をスクロールに合わせて追従させたい時に便利な方法です。 指定エリア内でコンテンツを追従させる方法 position:sticky; が動作しない時の対処方法 指定エリア内でコンテンツを追従させる方法 スクロールに合わせたコンテンツの追従は、jQuery をトリガーに、position:fixed; を付与するような実装方法がよく知られています。 けれど CSS の position:sticky; を使うと、CSSの記述だけで実装することができます。 例えば、サイドバーにあるバナーエリアを、スクロールに合わせて追従するようにするには、次のコードをバナーエリアに追加します。 .banner { position: sticky; top: 0; } まず posit
ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
Ｎ予備校 - あなたの学びに答えます
お知らせ 2023.06.302022年度の合格体験記ページ 第二弾を公開しました。 2023.05.252022年度の合格体験記ページを公開しました。 2023.01.202022年度 IT企業内定体験記を公開しました。 2022.10.11講師紹介に高松和也先生、吉永豊文先生を追加しました。 2022.06.302021年度の合格体験記ページ 第二弾を公開しました。 2022.06.082021年度の合格体験記ページを公開しました。 2022.03.22大学受験講座の 2022年度 コース・カリキュラム・授業一覧を更新しました。 2021.08.272021年度 IT企業内定体験記を公開しました。 2021.05.282020年度の合格体験記ページを公開しました。 2021.03.24VR学習の情報を掲載しました。 2021.03.24動画クリエイター講座を公開しました。 2021.0
Facebookデバッガーとは？ページの内容とシェアされる内容が違う場合の対処法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 やっとのことでリリースしたメディアサイト。 早速投稿した記事をFacebookでシェアしようとしたら、シェアされる画像や内容がなんかちょっと違うなんてことありませんか？ そんなときは、連日のリリース作業で疲れ果てて泥のように眠るエンジニアを叩き起こす前に、まずはどういう状況か把握しましょう。 はじめに まず、Facebookでシェアされる内容については、サイトのOGP（Open Graph Protocol）というものでコントロールされています。 例えば、あるサイトのURLをFacebookでシェアしようとしたとき、Facebook側はそのページの情報を持っていなければ直接そのページにアクセスし、情報を取得・解析したうえで、そのデータをFacebook側が保持します。（スクレイピングといいます） そして、すでにFacebook側が保持しているデータが
セッション管理 - 学生サーバ管理者メモ
汎用のセッション管理クラスを作ろうと思って前に作ったやつを修正していた。 前はログインしてからセッションを作成してたけど、標準で全ページセッションがあった方が都合がいい。 それと「ログイン情報を記憶する」みたいなチェックをつけたかったんだけど・・。 session_set_cookie_params($time);とすればセッションの期限を設定できるっていう話。 でもセッションが既に開始されていたら、それを更新はできない。 session_set_cookie_paramsでは無理なんだって気付くのに時間がかかった・・。 マニュアルにもこれで設定するみたいに書いてあるしさぁ。 実際には function sessionStart($lifetime = 0){ session_start(); if ($lifetime == 0){ setcookie(session_name(), s
円マークがバックスラッシュで表示される理由
円マーク（円記号）がバックスラッシュで表示される理由について調べてみました。 １．はじめに ブログ記事に半角円マーク「\」を入力して投稿すると、実際のページでは半角バックスラッシュで表示されることがあります。 例として、下のスクリーンショットは当ブログの記事編集画面です。赤枠部分に円マークを入力しています。 下のスクリーンショットは上の記事の実際の表示画面です。円マークがバックスラッシュで表示されていることが分かります。 できれば円マークはそのまま円マークで表示したいところです。 ２．円マークがバックスラッシュで表示される理由 １項のサンプルで大体予想がつくと思いますが、円マークがバックスラッシュで表示される理由は、CSSで指定したフォントの問題です。 円マークとバックスラッシュは、文字表記は異なりますが、同じコード（Unicode表記でU+005c）を使用しているため、フォントの種類によ
WordPressでアイキャッチ画像を使う
基本設定 function.phpに以下を追加 以下を追加することで、WordPressでアイキャッチ画像を使うことが可能になります。 これが設定されていないと、管理画面内の投稿ページにもアイキャッチ関連のボックスは表示されないようです。 add_theme_support( 'post-thumbnails' ); アイキャッチを表示させる アイキャッチを呼び出すには、呼び出したい箇所に以下を記述します。 <?php the_post_thumbnail(); ?> これだけの設定でアイキャッチは使えるようになります。 アイキャッチ画像のサイズを設定する 上記の基本設定の状態だと、アップロードされた画像のサイズそのままで表示されてしまうので、サイズを設定したい場合は、以下のようにします。 テンプレートファイル内のアイキャッチを使用する箇所でサイズ指定する場合 <?php the_post
Movable Typeで指定文字列を含むコメントを拒否する「CustomizedCommentfilterプラグイン」
Movable Typeで指定文字列を含むコメントを受け付けない「CustomizedCommentfilterプラグイン」を公開します。コメントを拒否するとコメント投稿時に次のようなメッセージを表示します。 このプラグインは山本和泉さんのFacebookの投稿をヒントに作りました。 １．機能 プラグインの設定画面に指定した文字列を含むコメントを受け付けないようにします。 Movable Typeのデフォルトプラグインで「SpamLookup - Keyword Filter」がバンドルされているのですが、このプラグインはMTのDBにコメントを登録して、一定期間経過後削除するようになっています。本プラグインはコメント自体をDBに登録しません。 ２．価格 価格：\3,000-（税別）/1インストールMT（購入前に必ず動作確認してください） ３．プラグインのダウンロード 下記のリンクをクリック
WordPressのコメント連続投稿抑止時間を変更する「wp_throttle_comment_floodプラグイン」
WordPressのコメント連続投稿抑止時間を変更する「wp_throttle_comment_floodプラグイン」を公開します。 １．機能 WordPress では、同一ユーザからのコメント連続投稿を一定期間抑止します。抑止すると、コメント投稿者に次のようなメッセージを標示します。 デフォルトの抑止時間は15秒です。 「wp_throttle_comment_floodプラグイン」を利用することで、抑止時間を変更できるようになります。また、抑止を無効にすることもできます。 ２．プラグインのダウンロード github のwp_throttle_comment_floodプラグインのページに移動します。 「Download Source」のリンクをクリックして、プラグインアーカイブをダウンロードします。 ３．プラグインのインストール ダウンロードしたプラグインを展開し、中にあるwp_thr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
YouTube人気急上昇