つれづれなる備忘録

日々の発見をあるがままに綴る

HTML/CSS

ブログデザイン備忘録 ~ gridを用いたレイアウト3

今回はCSSのgrid-template-areasを用いて、デスクトップPC, タブレット, スマートフォンでそれぞれ異なるレイアウトにする方法について紹介する。

ブログデザイン備忘録 ~ gridを用いたレイアウト2

今回はCSSのGridを用いた12カラムのグリッドレイアウトについて紹介していきたい。

ブログデザイン備忘録 ~ はてなブログテーマの自作8

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回は、はてなのテーマストアに非公開で投稿してテスト用ブログにインストールを行った。

ブログデザイン備忘録 ~ はてなブログテーマの自作7

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はレスポンシブモードのデザインを行った。

ブログデザイン備忘録 ~ gridを用いたレイアウト1

今回はCSSのGridを用いたレイアウトについて紹介していきたい。パンケーキスタック(Pancake stack)はヘッダー部、メイン部、フッター部の垂直に3層からなるレイアウトで、基本的なレイアウト方法の1つである。

ブログデザイン備忘録 ~ カードデザイン2

前回のカードデザインはコンテンツが少ない場合として2つのカードを中央に並べるデザインを紹介した。今回はコンテンツがたくさんある場合にカードをページ内に並べる方法について紹介する。

ブログデザイン備忘録 ~ カードデザイン

Webページでカード(タイル)デザインのサイトをよく見かけると思うが、CSSのFlexboxを用いて簡単に実装できる例 がいろいろなサイトで紹介されており、少し試してみることにした。

ブログデザイン備忘録 ~ はてなブログテーマの自作6

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はダークモードのデザインを行った。

ブログデザイン備忘録 ~ focus疑似要素いろいろ

以前に入力要素に対するfocusに関する制御として、Javascriptのイベントハンドラを用いる方法を取り上げが、今回はCSSの疑似要素を用いた場合について紹介する。

ブログデザイン備忘録 ~ 背景パターンの生成

ジグザグや縞模様などの背景パターンのCSSコードを生成するサイト]を使ってCodePenを使っていくつかパターンを生成したので紹介する。

ブログデザイン備忘録 ~ はてなブログテーマの自作5

前回PC版のおおまかなデザインは作成したが、レスポンシブなどレイアウト(配置・幅など)を切り替える上で、それぞれのクラス・IDの範囲がわかりやすくなるように境界線を設定した。(完成時は取り除く)

ブログデザイン備忘録 ~ フルブリードレイアウト

文字(記事)の部分を中央に固定幅で表示し、画像などのコンテンツをページ幅いっぱいに表示するフルブリードレイアウトをCSSで記述する方法につて紹介したい。

ブログデザイン備忘録 ~ はてなブログテーマの自作4

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はPC版のデザインについて仕上がりつつあるので紹介していきたい。

ブログデザイン備忘録~ アイコンの変更

本ブログではサイドバーのリファレンスと上に戻るボタンの矢印にFontAwesomeのアイコンを使用していたが、自分のchrome環境では読み込みができなくなっていたため、今回ははてなのblogiconに統一することにした。

ブログデザイン備忘録~CLS問題再びの検証

前回にGoogleサーチコンソールで検出されたCLS に関する問題: 0.1 超(モバイル)が再び発生したことを記事にしたが2週間程度経過して一応下のように良好の状態が続いている。

ブログデザイン備忘録 ~ はてなブログテーマの自作3

前回はBoilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介したが、今回はこれから新しいブログテーマ作成する上での方針についてまとめてみた。

ブログデザイン備忘録 ~ はてなブログテーマの自作2

今回は、Boilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介する。

ブログデザイン備忘録~canvasによる画像表示

今回はcanvasとjavascriptを用いて画像を読み込んで表示する方法について紹介する。

ブログデザイン備忘録 ~ はてなブログテーマの自作

今回はBoilterplateをはてなブログのデザインに適用して、テーマを作成する環境を作る方法について紹介する。

ブログデザイン備忘録~CLS問題再び

前回Googleサーチコンソールで検出されたCLS に関する問題: 0.1 超(モバイル)の改善が検証できたが、再びCLSの問題が発生した。

ブログデザイン備忘録~canvasによるテキスト描画

今回はcanvasとjavascriptを用いてcanvas要素中にテキストを描画する方法について紹介する。

ブログデザイン備忘録~ CSSによるボタンデザイン例

今回は前回紹介したCodePenを使って、CSSを用いたボタンのデザインとマウスオーバー時のエフェクト(動作)を設定する例を紹介したい。

ブログデザイン備忘録~canvasによる図形の変形

今回はcanvasとjavascriptを用いて図形を変形する方法として拡大・縮小、回転、平行移動、変換マトリックスによる図形の変形について紹介する。

ブログデザイン備忘録~ CodePenの利用

HTMLやCSSのコードを解説するページでCodePenの埋め込みを見たことがあるかもしれないが、CodePenとはHTML/CSS/Javascriptのコード記述と実行をブラウザ上でリアルタイムに確認することができるサービスである

ブログデザイン備忘録~canvasによる図形の装飾

今回はcanvasとjavascriptを用いて図形を装飾する方法として、塗りつぶしの透明度、グラデーション、影の追加する方法について紹介する。

ブログデザイン備忘録~canvasによる図形の合成

今回はcanvasとjavascriptを用いて複数の図形を合成して表示する方法としてglobalCompositeOperationの指定とその効果について紹介する。

ブログデザイン備忘録~ダークモード時の表示改修など

前回紹介したダークモード対応に関して、今回は本文だけでなくサイドバーの部分も変更したので紹介する。またTOPへ戻る矢印を表示するjQueryの読み込み先(CDN)も変更した。

ブログデザイン備忘録~canvasによる図形描画・塗りつぶし

今回はcanvasとjavascriptを用いて四角、円、直線で作成できる図形などの内部を塗りつぶす方法について紹介する。

ブログデザイン備忘録~canvasによる曲線描画

前回はcanvasとjavascriptを用いて直線を描画を行う方法について紹介したが、今回は円などの曲線の描画方法について紹介する。

ブログデザイン備忘録~最新投稿にNEW表示

今回ははてなブログで新しい記事投稿したときに、サイドバーの最新記事で新しい投稿であることを示すNEW!を表示するようにしたので方法を紹介する。