サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
www.miso.blog
背景画像の上にテキストを配置すると、画像によっては文字が見えにくい場合があります。そんな場合はPhotoshop等で画像を暗くしてみたりとか、色々と加工をするのですが、それをCSSのみでおこなう方法をご紹介します。 デモを作ってみました。 See the Pen 【CSS】背景画像を暗くしたり別の画像を重ねたりぼかしたり by miso (@misodtm) on CodePen. それでは、それぞれのスタイルについて書いていきます。 共通部分のスタイル 画像にテキストを重ねただけの状態です。 HTMLは親要素の「.box」に別のClassを追加するだけです。class="box overlay1"みたいに。 <div class="box"> <p>何もしてない状態</p> </div> .box { display: flex; justify-content: center; ali
Macで作業してて、ショートカットキーは何かな、と気になってメニューを開くと、 全然わからない。 ⌘⌥⇧⌃ これらの記号が、一体どのキーを指しているのかが、いつまで経っても覚えられません。 なぜか、これまでちゃんと覚えようとしてなかっただけなんですけど。 なので、ちゃんと覚えることにしました。 Command ⌘⌘(Command)は、キーボードに記号が印字されてるのですぐにわかります。 option ⌥キーの�右上に「alt」って書いてある。 Alt キーは Alternate key (オルタネイトキー) の略で、”alternate”は「代替の」「代わりの」という意味である。Unicodeには”ALTERNATIVE KEY SYMBOL” (U+2387) として”⎇”が定義されている。 Altキー – Wikipedia ⌥ 線路が分岐してるみたいに見える。 shift ⇧「シフ
数年前に作成した、とあるWordPressサイトが、WADAXというレンタルサーバーに設置されていたのですが、PHPが5.3(非推奨)のままになってて、WordPressの管理画面上で警告文が表示されてました。「さっさとPHP7」にしろ、みたいな。 で、PHPのバージョン変更はWADAXのコントロールパネルから簡単にできるので、PHP5.3からPHP7に変更してみたところ、WordPressがデータベースエラーで表示されなくなってしまいました。 PHP5.3のまま放置するのは色々とマズいので、下記の手順でPHPを最新バージョンに変更しました。 まず、データベースエラーなので、MySQLを覗いてみたところ、MySQLのバージョンが5.1(非推奨)になっており、こちらも最新に変更する必要がありました。 まず、コントロールパネルの「データベース」→「MySQL設定」にアクセスし、ページ下部の「新
1ページスクロールを簡単に作れるjQueryプラグイン「pagePiling.js」の実装方法についてご紹介します。 各セクションを画面いっぱいに表示できて、スクロールでコンテンツを切り替えていくようなページが作れます。 公式のデモはこちら pagePiling.js plugin | Create a stack of scrolling pages 僕もデモページを作ってみました。 DEMO pagePiling.js | MISOBLOG pagePiling.jsのダウンロード 公式のデモページの「Download」ボタンをクリックして、ファイル一式をダウンロードします。 pagePiling.jsの実装方法ダウンロードしたZIPファイルを解凍し、下記のファイルを読み込みます。 jquery.pagepiling.cssjquery.pagepiling.min.js <link
jQueryプラグイン「Masonry」と「Infinite Scroll」でPinterestみたいなタイル状のレイアウトを作成します。 高さの異なるボックスをキレイに整列して、下にスクロールしていくと勝手に次のコンテンツが出てくるアレです。 デモあります。 Masonry + Infinite Scroll | MISOBLOG 各プラグインの最新版を使ってみたら、上手く動かなくて結構な時間ハマってしまったので、メモしておきます。 MasonryとInfinite Scrollの実装各プラグインのバージョン2017年7月10日現在の各プラグインの最新バージョンは下記の通りです。 Masonry PACKAGED v4.2.0Infinite Scroll PACKAGED v3.0.0imagesLoaded PACKAGED v4.1.3プラグインの読み込み これらをこんな感じで、j
当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。 これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。 position: stickyとはpositionプロパティの新しい値です。 「position: sticky」と位置(top, right, bottom, left)を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 一応、以下に簡単なデモを作ってみました。 See the Pen position: sticky by miso (@misodtm) on CodePen. このブログでは下記のように指定してます。 HTML <div c
Googleスプレッドシートで、行の背景色を交互に変更する方法です。 セルが増えてくると全体が見えにくくなってきます。 行の背景色を奇数・偶数で色分けして、表全体を見やすくする方法をご紹介します。 この適当に作った表で実践していきます。 「交互の背景色」で色分けする方法 いつからあったのかわからないのですが、メニューの「表示形式」の中に「交互の背景色…」という項目がありました。 知らない間に機能が増えてました… 背景色を変更したい範囲を選択し、「交互の背景色」から、「書式設定のスタイル」を選択して、「完了」ボタンをクリックします。 自動でヘッダーやフッターの色を変えたり、あらかじめ用意されている書式設定のスタイルから簡単に色を付けられたりと、とても簡単に背景色を変更できました。 背景色を削除したい場合は、一番下の「交互の背景色を削除」をクリックすると、設定が解除されます。 「条件付き書式」
このページを最初にブックマークしてみませんか?
『misoblog | DTM・Webサイト制作・その他』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く