natsu

はじめてのwebデザイン制作（午後科）まとめブログ

natsu

はじめてのwebデザイン制作（午後科）まとめブログ

エキスパート サンプル問題をやってみる

2023-05-18 その他

natsu

    • google翻訳を使ってサイトを多言語化する

      2023-05-18 中国語に翻訳したデータ 自身のサイトのURLをパラメーターにつける https://translate.google.com/translate?sl=ja&tl=zh-CN&u=http://felica29.starfree.jp/season2020-07/ slにサイトで使用している言語 tlに翻訳したい言語 uに翻訳したいサイトのURL 各言語のコード

      natsu

      • cssのmask-imageを使ったスライド

        2023-05-16 前回、cssで色々な形で画像をマスクしてみましたが、今回はcssアニメーションを追加する事でさらに自由度の高い表現が出来るようになります。 mask-imageはベンダープレフィックスが必要 chromeにベンダープレフィックスが必要です。 mask-image: マスクとして使用される画像 を指定します。 mask-repeat:マスク画像の位置を設定します。 mask-size:マスク画像の大きさを設定します。 mask-position:

        natsu

        • マウスに追従するホバーアニメーション

          2023-05-15 webサイト制作 cssのみで「マウスに追従するホバーアニメーション」を作るには少し工夫が必要です。追従して動く要素が並列になっている要素（今回でいうli要素）からみて、下の兄弟要素か子孫要素でなければ動かす事が出来ない為、追従する要素をli要素にする必要があります。 <nav class="g-nav"> <ul> <li><a href="">Button1</a></li> <li><a href="">Button2</a><

          natsu

        エキスパート サンプル問題をやってみる

        natsu

          フレームの作成

          2023-05-15 固定部分にフレームを作成し、その中に「ロゴや店舗名、タグライン」などを入れましょう。

          natsu

          フレームの作成

          natsu

          背景にパターン画像やアブストラクト画像を使う

          2023-05-15 スマホ特化・モバイルファーストサイトではbody要素が固定になっている場合がほとんどなので、body要素の背景がサイトの印象を大きく左右します。今回はbodyの背景にパターンやアブストラクトなどのテクスチャ素材を使ってみましょう。 https://pixabay.com/ja/illustrations/search/abstract/ ジェネレータ

          natsu

          背景にパターン画像やアブストラクト画像を使う

          natsu

          モバイル幅でwebサイトを作成する

          2023-05-13 必要なテキスト 店舗名 タグライン 場所 お店の特徴（コンセプト） メインコピー リード文 商品について（こだわりなど） 質問と答え（３つ） 店長・マネージャーのあいさつ 必要な画像素材 商品・サービス画像（9枚）600x400以上（商品名と価格も必要です） メインビジュアル画像（3枚）1920ｘ1080くらい コンセプト部分で使用する画像（1枚）1920ｘ1080くらい 店舗情報部分で使用する画像（1枚）1920ｘ1080

          natsu

          モバイル幅でwebサイトを作成する

          natsu

          コンテンツをGoogle Bardを使って作成する

          2023-05-13 Google Bard は、Google AI の大規模な言語モデル（LLM）であり、テキストとコードの大規模なデータセットでトレーニングされています。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を行うことができます。 5月11日に公式でGoogle Bardが日本語に対応した旨がアナウンスされたので、早速使ってみましょう。 Chat-GPTとの違い 本人に聞いてみました。 作成するコンテンツ お

          natsu

          コンテンツをGoogle Bardを使って作成する

          natsu

          Illustratorチュートリアルまとめ

          2023-05-12 Illustrator パターンの作成 https://helpx.adobe.com/jp/illustrator/how-to/original-pattern.html?playlist=/jp/ja/ccx/v1/collection/product/illustrator/topics/video/collection.ccx.js&ref=helpx.adobe.com パスファインダーの使い方 バナーの作成 https://b

          natsu

          Illustratorチュートリアルまとめ

          natsu

          自身のスキルを説明する

          2023-05-12 ポートフォリオ制作 自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。 html htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。heade

          natsu

          自身のスキルを説明する

          natsu

          Googleフォームに自作のCSSをあてカスタマイズする

          2023-05-11 以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。 しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作

          natsu

          Googleフォームに自作のCSSをあてカスタマイズする

          natsu

          WordPressテンプレートその2

          2023-05-08 WordPress 投稿記事に設定したタグを表示 <?php$posttags1 = get_the_tags();if ( $posttags1 ) { foreach ( $posttags1 as $tag1 ) { echo $tag1->name; echo ' '; }}?> 投稿記事に設定したタグのスラッグを表示 <?php $posttags = get_the_tags(); if ( $posttags

          natsu

          WordPressテンプレートその2

          natsu

          :checkedと:notを使ってcssでフィルタリング

          2023-05-01 CSS応用 cssのセレクタの「隣接セレクタ」「擬似クラス 」「擬似要素 」などを使用する事で、今までjQuery等を使わないと出来なかった事がcssのみで出来るようになります。 :checked inputのラジオボタン、チェックボックスの2つのみで使用可能。チェックしたinput要素に「:checked」セレクタが付与される。 :not notを使う事で指定した要素以外の要素を選択する事が出来る <div><h1>Lorem ipsum d

          natsu

          :checkedと:notを使ってcssでフィルタリング

          natsu

          svgで手書き風文字のアニメーション

          2023-04-20 Illustrator アニメーション 1.IllustratorでSVG画像を作成 まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtextにしましょう。文字を書いたらアウトラインにし、レイヤーをロックしましょう。 次に、新しいレイヤー（mask）を作り、そこに下のレイヤーの文字が隠れるように線を描きます。 この時にアニメーションで動かしたい順番に

          natsu

          svgで手書き風文字のアニメーション

          natsu

          タイムラインをサイトに埋め込む

          2023-04-28 ポートフォリオ制作 年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。 <div class="cd-timeline js-

          natsu

          タイムラインをサイトに埋め込む

          natsu

          別のページから遷移してスムーススクロールさせる

          2023-04-27 トップページからフォームページに遷移した際にスムーススクロールを使って、止まる位置の調整をします。 //現在のページURLのハッシュ部分を取得let hash = location.hash;if(hash){$("html,body").stop().scrollTop(0);setTimeout(function(){let target = $(hash);let position = target.offset().top - 250;$("h

          natsu

          別のページから遷移してスムーススクロールさせる

          natsu