マガジンのカバー画像

Web Creator Blog

3
Studioを中心としたWeb制作のTips ・Studio機能を使用した実装Tips ・コーディングを含むWeb制作Tips ・案件対応での学び ・成果物テンプレート整理
運営しているクリエイター

記事一覧

【StudioTips】絶対位置のセンター配置

こんばんは。 今回はちょっとしたStudio機能のTipsになります。 HTMLは基本的にボックスを上から置いてレイアウトを作成しますよね。 ボックスの外側の関係性で配置を決めていく置き方を 「相対配置」と言いますが これに対して 親ボックスをフレームとして考えた場合の フレームからの距離で配置を決める置き方が 「絶対配置」と言えるでしょう。 画像の上に画像を重ねたい場合なんかにも よく使うのではないでしょうか。 今回は絶対位置の特徴とセンター配置への対応を Tip

【Studio実装】CSSを使ってホバーでふわっと表示をさせてみよう

こんにちは。 今回は「ホバーでふわっと表示」です。 こちらはどちらかといえばデザイン的な要素が強いものかと思います。 見せたい情報はあえて隠さない方が良いと思うので 使いどころは見極めたい要素ですね。 私は自身のページを作る際に 表紙にプロフィールを固定で置いておくとくどいな… と思い動的に余白を確保できる仕様にしたかった という完全なる好みで使いました。 1. 機能実現イメージ 実装する機能はこんな感じです。 左側のパーツをマウスオーバーすると プロフィールを書いた

【Studio実装】CSSを使って綺麗なアコーディオンを作ろう

こんばんは。 Studioの実装や案件での学びをTipsとして残していきたいと思います。 今回は、Studio機能では実装の難しいアコーディオンの実装例と実装方法を紹介します。 アコーディオンはFAQやメニュー詳細を記載したいけど少しページが雑多な印象になってしまう… といった際に、全体をすっきりと見せられるのが良いですよね。 一方で情報の検索性が落ちると言ったデメリットもあるため、用途に合わせて上手に活用したい機能です。 1. 機能実現イメージ まずはゴールイメー

有料
300