はてなブックマーク

CSSで背景を画面サイズいっぱいに広げる方法それでは作り方について見ていきます。 まずは完成形となるサンプルをご覧ください。 See the Pen wvKGPOg by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen. そのままだとわかりにくいので、上記サンプルを直接codepenで開いて見ていただいたほうがわかりやすいかもしれません。 前提ポイントデフォルトCSSに関しては、normalize.cssを適用しています。 デフォルトCSSについてはこちらをご参考ください。 まずは背景を置く要素を作るまずは画面いっぱいに背景を敷く要素を作りましょう。 作った要素には以下のようにスタイルを指定します。 position: relativeは必ずしも必要ではありません。 ここでのポイントは、min-height:100vh;と、backgroundプロパテ

Googleスプレッドシートからエクセル形式に変換する方法Googleスプレッドシート Googleスプレッドシートで、エクセル形式（.xlsx）に変換したいシートを開きます。 「ファイル」→「ダウンロード」→「Microsoft Excel（.xlsx）」を選択します。 これでエクセル形式でGoogleスプレッドシートがダウンロードされます。 エクセル形式からGoogleスプレッドシートに変換する方法Googleスプレッドシートは、Googleドライブにエクセル形式のファイルが保存されていればそれを開くことができます。 編集する場合は、「GOOGLEスプレッドシートで編集」を選択することでGoogleスプレッドシート形式に変換され、編集することが可能です。 新しいスプレッドシートを作成Googleドライブ内に、変換したいエクセルファイルが無い場合は、Googleドライブにアップロードする

border-radiusとはborder-radiusとは、要素の四隅に対して角丸を適用するCSSプロパティです。 Photoshopなどのデザインツールを使っている人ならわかりやすいですね。 上記のように角丸の要素を作って、そのCSSをコピーして見てみるとborder-radiusの値があるのが分かります。 以下のような感じです。 border-radiusを使うことで、さまざまな丸みを帯びた表現ができるようになります。 それではサンプルを見ながら角丸、円の作り方を見ていきましょう。 border-radiusの使い方まずは基本の角丸です。先程の説明と同じものになります。 See the Pen border-radius test by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen. 四隅に30pxの角丸が作成されているのが分かります。 正円を

WordPressテーマを自作・カスタマイズする時に、よく管理画面にオリジナルのメニュー画面を設けたい時があるかと思います。 たとえば、サイトの使い方を管理画面に記載したかったり、サイト全体の設定を管理画面で分かりやすく一括管理したい場合などにオリジナルメニューを設けます。 今回はそんなオリジナルメニュー画面の作り方について見ていきたいと思います。 WordPress管理画面に独自のメニューを作る参考：管理メニューの追加 – WordPress Codex WordPressの管理画面に以下のようなオリジナルのメニュー画面を作っていきます。 メニュー作成は、トップレベルメニューと、サブレベルメニューがあります。 上の大見出しが、親となるトップレベルメニュー、その下がサブレベルメニューになります。 「add_menu_page」「add_submenu_page」を使用して制作します。 トッ

モダンな背景グラデーションとは一昔前、iPhoneなどのアプリアイコンなどはグラーデションを使ったものが主でした。まだ記憶に新しい方も多いかと思います。 今このデザインを見ると古臭い印象を覚える人も多いのではないでしょうか。 それもそのはずで、人のデザインに関する感性には、時流や流行り廃りがあります。 それらは、デザインを投影する媒体の進化や、アップルのiPhone・FacebookのInstagramなど、時代を牽引する商品・サービスによって作られます。 一昔前のグラーデションと、昨今のグラデーションの違いWebデザインの観点からですが、一昔前まではグラデーション表現は同色系で縦方向のみにグラデーションさせるものが主であった印象です。 そのため、使われるシーンとしては、ボタンやグローバルナビゲーション、アプリアイコンなど、クリック・タップできる箇所に使われるのが主でした。 しかし昨今では

実際にはどんな感じで使うの？これまで解説してきましたが、あまり使用イメージが湧かないという人もいるのではないでしょうか。実際にCSSのサンプルを見ながら理解していきましょう。 vw、vhのサンプルSee the Pen vw,vh by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen. 100vwは、表示領域の横いっぱいに拡がっているのが分かります。 100vhは、表示領域の高さいっぱいに拡がっているのが分かります。 10vwは、表示領域の横幅十分の1のサイズになっています。 10vhは、表示領域の高さ十分の1のサイズになっています。 つまりビューポートの横幅1000pxであった場合、10vwは100pxになります。 vmin、vmaxの使用例vw、vhはわかりやすいですが、vmin、vmaxこそ使用イメージがわかりにくいと思います。サンプルを見てみま

Googleスライドからパワーポイント形式に変換する方法Googleスライドからパワーポイント形式に変換する方法は、指定のGoogleスライドを開いた状態で、「ファイル」→「ダウンロード」→「Microsoft PowerPoint（.pptx）」を選択します。 パワーポイント形式でダウンロードする 上記作業で、パワーポイント形式でダウンロードされます。 パワーポイント形式からGoogleスライドに変換する方法パワーポイント形式のファイルが、Googleドライブに保存されている場合、お使いのGoogleスライドからパワーポイントファイルを表示することができます。 編集するには「GOOGLEスライドで編集」を選択することでPowerPointファイルがGoogleスライド形式に変換されます。 新しいプレゼンテーションを作成Googleドライブ内に無いパワーポイント形式のファイルをGoogle

JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ

なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

WordPressからGmailのSMTPサーバーを利用してメールを送信するには前述のとおりですが、みんな大好きContact Form 7などを使ってWordPressからGmailのメールアドレスでメールの送信を行おうとするとGmail側でブロックされてしまいます。 理由としては単純な問題で、メール差出人のサーバー情報とメールサーバーの情報が異なることが原因です。この問題については後述するWP Mail SMTPなどのプラグインで解決できます。 しかし、Gmailの場合はさらにセキュリティの問題で、許可されていない外部のアプリケーションを通してGmailでメールの送信を行うことはできません。 じゃあどうすればいいの？という話ですが、Gmail APIを使ってWP Mail SMTPでメール送信ができるように許可設定を行うことで可能となります。 WP Mail SMTPを導入するまずはW

Webフォントは使わない文字・書体は読み込まないようにする当然ですが、使わない文字のフォントの読込みはただサイトを重くするだけになってしまいます。 よくある悪い例が、タイトルなどの限られた場所にしかWebフォントを使用しないのに、フォントはすべて読み込んでしまっている、といった場合です。 たとえばページ見出し部分の「SERVICE」といった文字だけ、GoogleWebフォントを使いたいといった場合を例にして見てみましょう。 使うフォントは「Ubuntu」というフォントでbold書体を使いたいとして以下のようにGoogleフォントの読込みを記述しました。 さて何がいけないでしょうか？ 上記は少し極端な例でもありますが、本来の目的で使うフォントは、「Ubuntu」の「bold 700」で、 S・E・R・V・I・Cの大文字6つのみしか使いません。 それに対して上記読込みは、「Ubuntu」フォン

SVG画像をbackgroundで使いたいことって多いですよね。 background-image: などです。 普通にbackground-image: url(img.svg);みたいな感じで直接SVGファイルを指定して背景にSVGを使うことはできますが、この方法だと色をCSSで変えることができないです。 この方法で色を変えるには直接SVGを編集するしかありません。 そこで今回は、SVG画像を背景で使い、かつ色をCSSで変える方法について解説していきたいと思います。よく使う方法ですがこの際記事にしたいと思います。