Octマガジン

本

Project Octメンバーのブログの一部をまとめたマガジンです。ウェブのこと、地域のこと、自分自身のことなどを書かせていただいています。気になる記事がある場合はぜひクリエ…

運営しているクリエイター

SVGで図形を描写【HTML/CSS】

※自分用の備忘録です。 SVGの使い方<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="red" viewBox="0 0 60 60"> <circle cx="30" cy="30" r="10" /></svg> svgタグに「viewBox」という座標系を指定します。図形やパスはこのタグ内に記述をしていきます。 SVGは上記のタグを直接HTMLファイルに貼り付けるか

子なし夫婦は家族になれるのか？〜「中華まんの日」に捧げるエッセイ〜

みなさん、こんにちは。 Atelier Crown＊Clown（アトリエクラウン＊クラウン）のかおりんです。本日、1月25日は「中華まんの日」ということで、中華まんにちなんだエッセイを書いてみました。タイトルは重～い感じですが、「夫婦でコンビニの肉まんを食べたよ」という程度の軽い内容ですので、ぜひお気軽に読んでみてくださいね。子供がいない夫婦は可哀想？私達夫婦には子供がいない。これを言うと、痛ましいものを見るような目で見られてしまうことがよくあるのだが、気の毒が

Photoshop のフォント検索機能【マッチフォント】便利です。

Adobe Photoshop のチュートリアルで学んでいて、これは便利かも！と最近思ったのが、フォント検索機能の【マッチフォント】です。 ◆【マッチフォント】とは2021年8月のチュートリアルの文章内にて、と記述されていました。比較的新しい機能のようです。 ◆【マッチフォント】を試してみました。自分で撮影した画像やスクリーンショットからもフォント検索が出来るとのことでしたので、今回は、私の Googleサイトのタイトルの文字で試してみました。文字は［フォント名：M

SVG画像にアニメーションをつける【HTML/CSS】

SVGで書き出したイラストやロゴは、CSSでパーツごとにアニメーションをつけることができます。今回のためにウェブデザイナーのfuminoteさんが作成したイラストをSVGに書き出していただき、アニメーションをつけてみました。 fuminoteさんのnoteはこちらから。使わせていただいたイラストの記事はこちらです。アニメーションを付けたイラストはこちらからご覧になれます。イラストを見る作成手順SVG画像を用意する IllustratorやPhotosh

画像と画像を重ねる方法【HTML/CSS】

※自分用の備忘録です。 positionで重ねるHTML <div class="relative"> <img class="absolute" src="img1.png" alt="画像1" width="100%"> <img class="absolute" src="img2.png" alt="画像2" width="50%"></div> CSS .relative { position: relative;}.absolute { posit

おすすめマンガ：ミステリと言う勿れ

みなさん、こんにちは。 Atelier Crown＊Clown（アトリエクラウン＊クラウン）のかおりんです。皆さんはマンガはお好きですか？私は大好きです。「大事なことは全部マンガが教えてくれた」というセリフがありますが、私も「人生の大事なことの6～7割くらいはマンガから教わったかな」というレベルのマンガ好きです。昔は「好きなマンガは買って読む派」だったのですが、経済的理由と自宅スペースの都合で近年はもっぱら「TSUTAYAでレンタルして読む派」になりました。レ

久々に神戸に帰省して思うこと

遅ればせながら皆様明けましておめでとうございます！今年は2年ぶりに神戸の実家に帰ってきました。久々に帰った神戸…。阪急三宮の周辺が様変わりしていた。学生の時によく待ち合わせしたパイ山がなくなっていて、阪急の北側のお店が知らない飲食店が立ち並んでいる。 2年ぶりに帰った神戸は、あんなに大好きだった街だけど街中にゴミがこんなに落ちてたっけ…という印象だった。街行く人達はなにかの目的に向かってせかせかと歩いている。久々に帰ってきた人混みの中で止まっていると、聞こえるか聞こえ

ウェブページをスマホやタブレットにレスポンシブ対応させる【HTML/CSS】

※自分用の備忘録です。 HTMLで必須のコード<meta name="viewport" content="width=device-width, initial-scale=1.0"> メディアクエリを使うには上記のコードをhead内に記述する必要があります。 CSSで必須のコードメディアクエリ @media screen and (max-width: 768px) { } max-widthで設定した場合、画面幅が768ピクセル以下の時に{}内に記述したC

初めての GitHub ! 世界にコードを公開するということ。

note で記事を投稿する回数を重ね、「公開する」ことに対しての恐怖心は、かなり減ってきました。とはいえ、新しいツールで「公開する」ことは、設定に不安を感じたり、緊張します。だ～れも見ていないだろうなぁと思いつつ、クリックする瞬間には世界を感じてしまいます。先日、勉強会に参加して GitHub のユーザー登録とアップロードの方法について教えていただきました。英語は得意ではないので、ちょっとドキドキする場面もありましたが、なんとか無事に初アップロードすることが出来ました！

新しい年に新しいお花を

新しい年の節目に、実家の仏壇に仏花を送りました。お花の制作をお願いしたのはAtelier Crown＊Clown（アトリエクラウン＊クラウン）のかおりん様です。フラワーアレンジメントだけでなくウェブデザイナーとしても活躍中！実際に送っていただいたお花はこちらです。素晴らしい仕上がりと丁寧な対応で、節目の際にはぜひまた利用させていただきたいと思いました。お花は仏花だけでなく、造花やプリザーブドフラワーを使ったアクセサリーなども制作しています。ご興味があ