最近バタバタしてて投稿できてないけど書きたいことはできた、、！週末かなあ

夢で悲しくなった話。

将来の夢の話ではなくて、寝てる時に見る夢の話です。 朝起きたらすごく泣いてて、ものすごくリアルで。だけど検索するといいことが書いてあったので。 両親が離婚して別居する夢起きたら泣いてるし物凄く鮮明に覚えていたんですよ。だから一瞬夢じゃなくて本当のことなのかってくらい焦った。 私がお互いの家をみてどっちがいいか選ぶところまで進んでいて、父の家はなぜかキャンピングカーみたいな感じで一人で住むような間取り。 母の家は和室で物凄く部屋の数があって、しかもなぜかベランダからゲレ

【WordPress】PHPでCSSファイルの取得

最近WordPressを触るようになり、CSSファイルを取得する書き方がとても手こずってしまったので共有します。 テンプレートタグを用いるWordPressを使うようになってファイルを修正するようになるとよく用いるテンプレートタグ。本当にたくさん種類があるので慣れるまで見つけるのに時間がかかる。 まずは通常の<link rel="stylesheet" type="text/css" href=""> このhrefの中に<?php~~?>を記入する。 reset.cs

画像が必要になったら

模写コーディングをするときや映像の素材でサイトから画像を保存したい時ありますよね。簡単に保存する方法がありました。 画像の上にカーソルを置いてその場所からドラックたったこれだけでした笑 今まで気がつかずにデベロッパーツールで検証を選択してそこから画像を保存していたのですが、、デスクトップにドラックするだけで保存できるみたいですね。 保存するつもりがなく誤作動で保存できてしまいびっくりして久々に投稿しようと思いました。 悪用は厳禁ですが勉強や仕事で使用するときは役に立ち

毎日noteを書く気持ちではいるけど発見ないと書けないし平日で仕事した日オンリーだなあ、勉強した日なら別だけど。写真は結構前に行ったとこ👏

【Mac】Photoshopのデザインデータ

Photoshopでデザインデータを受け取りコーディングをすることがあると思うのですが、なんとなく納得行かないまま作業をしていて、やっと解決することができました。 Photoshopのサイズが大きく表示される問題 どうやらRetinaディスプレイだとサイズが大きく表示される弊害があるようで、、テキストやら画像やら半分のサイズで作成するのが正しいようです。 今までデカすぎるな、半分くらいかなと思ってやっていたのですがあっていたようで安心しました。 大きく表示されるのはSP

backgroundのショートハンド

CSSのプロパティbackgroundについてです。 backgroundにはbackgroundにはいくつか種類があり ・background-repeat ・background-position ・background-size ・background-image など、、他にもいくつかありますが背景画像設定の際には上記を使用することが多いです。 今までは全て分けて書いていたのですが、全てまとめて書くショートハンドというものがあることを最近知りました。 bac

画像データはなるべく小さくする

コーディング中に背景画像に同じ柄の模様が繰り返されている場合や記事を書いていて画像を添付する時、画像データは小さくすることで幸せになります。 そもそも小さくするとは・画像の大きさ自体を小さくする ・画像の容量を小さくする ということです。 画像の大きさ自体を小さくする これは背景に使う画像が同じ模様を繰り返すパターン化されたデザインの時に小さくすることができます。 一つの模様をPhotoshopか何かで切り取りbackground-repeatでreppeatさせるこ

Google Cromeオススメの拡張機能

今まで教えていただいて便利だったGoogleChromeの拡張機能を紹介 １. Perfect Pixelデザインデータをコーディング中のサイトの上に透過して重ねて貼り付けることができ、正確にコーディングすることが可能。 2. Wappalyzerwebサイトを調べていてこれはどのような技術が使われているか気になった時に一瞬で調べることができるもの。 とてもオススメな拡張機能です！ 他にも便利拡張機能を見つけたら追記していこうと思う。

装飾のためだけの HTML 要素は推奨されない

文章の後ろに画像をつけたいとき。いつもはそれぞれ文章を表示するタグと画像を表示するタグを分けて、その二つのタグをもう一つのタグで囲んでグループにするという方法をやっていたのですが、、どうやらその方法は推奨されないらしく。 HTMLは文章を記載するためにあるものつまりはこういうことなんでしょうね。 どうしてもがない限りはテキストのタグの背景として画像を表示させる。表示するときはCSSのbackgroundや擬似要素を用います。この方法だとわざわざ場所を調整する必要もないので

メディアクエリに応じたテキストの改行

同じ内容の文章を表示させ画面サイズによって改行させる方法 テキストの途中で装飾したいときはspanタグを使うと思うんですけど、テキストを改行する場所が画面サイズでそれぞれ違うときはspanとbrタグを交互に使うと思っていた。 テキストの改行はbrタグのみ 結果brのみで改行することが可能でした。cssでnth-child()やfirst-childを用いてbrタグにdisplay: blockを指定することで簡単に改行の指定が可能です。 本日は短いけどここまで。

【VSCode】 HTML記述の際に便利な方法

もしかしたら既に知っている方も多いかもしれませんが、、 便利でずっと使っているのでメモ程度に残しておく。 <>の省略方法HTMLでは<>用いて記述しますが、記述したいセレクタを表記したあとtabキーを押すことで自動で<>を記述してくれます。 また . ＋ クラス名を記述しtabキーを選択することで簡単にdivを生成してくれます。 さらに p. + クラス名にtabキーを選択することでも<>の入力を省略できます。これは他のタブでも可能です。 手間が省けるのでとてもおす