2022-04-01から1ヶ月間の記事一覧
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…
以前、バックアップを取って、sql文を使ってwordpressのデータを移動させましたが、今回はプラグインを使ってデプロイさせます。 ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。とても簡…
トップページ front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> </meta></meta></meta></head></html>
トップページ front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> </meta></meta></meta></head></html>
wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…
wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…
トップページ front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> </meta></meta></meta></head></html>
www.nxworld.net
emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。…
画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…
###//index.html//### <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>5回目の試験 | バナー作成</title> <link rel="stylesheet" href="css/banner.css"> </head> <body> …</body></html>
テクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 LPのアウトライン(あくまでも一例) Attention部分のコンテンツ タイトル（ロゴ画像orテクニカルアカデミーwebサイト制作科） キャッチーなコピーが入ったリード文（テクニカルア…
ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…
http://tomoyukiarasuna.com/data/arasuna_portforio.pdf www.concentinc.jp
ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまう…
Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…
Gitとは？ Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>particles.jsその2</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによ…
cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。 例 frankiessportsbar.com 記述としては背景画像を固定したい要素に background-attachm…
Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…
素材https://school.yachin29.com/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。またブレイクポイントやメインのカラーコードを変数化する事で効率化が図…
front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></meta></head></html>
ここでは、WordPressのオリジナルテーマを作成する為の下準備を行います。 WordPressのインストール ダウンロードした「wordpress」フォルダーをテストサーバーの「htdocs」フォルダー内にコピーし、新規データベースを作成する。テストサーバーにアクセスし…
1.既存のhtmlデータをphp化及びデータ構成やファイル名をwp用に合わせ、wpテーマ用の構成にする 例 トップページはfront-page.php style.cssは管理フォルダー直下に screenshot.jpgを作成 2.wp内にデータを移し、必要な個所をワードプレステンプレート化する…
felica29.starfree.jp 「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能…
トンマナ とは、「トーン＆マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要で…
wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタ…
バナーのサイズを決める 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。…
