Top | OR-IKEDA sample

写真をクリックするとスライドを再開します

2021/01/06
ページトップのロゴをアニメーションで動くスタイルに変更しました。
2020/11/03
スマホレイアウトのメニュー表示を変更しました。
2020/10/01
トップビジュアルのスライダーを作り替えました。プラグイン「Swiper」の使用を止めて、素のJavaScriptだけで記述しました。
2019/07/04
初めてのWeb制作サンプル（架空サイト）を作成いたしました。

About

このサイトはORイケダによるWeb制作サンプル（架空サイト）です。リンク先（下層ページ）は未作成です。

画像素材はUnsplashとPixabayを利用しました。
トップビジュアルのスライダーは、ライブラリやプラグインを使わずにJavaScriptのみで作成しました。
CSSはFLOCSSの原則に沿って記述しました。
制作環境は下記の通りです。
- HTMLテンプレートエンジン: EJS
- CSSプリプロセッサ: Sass
- JavaScriptトランスパイラ: Babel
- タスクランナー: Gulp
コードはGitHubにアップしています。

Contact

セクション 1

　これはダミーテキストです。This is dummy text.ここにはダミーテキストを配置しています。完成イメージを摑みやすくする為に、ひらがな、カタカナ、漢字、alphabet、など各種の文字を織り交ぜた文章を仮配置しています。supercalifragilisticexpialidocious【アルファベット】[半角⇒]ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz[全角⇒]ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ【数字】[半角⇒]0123456789 [全角⇒]０１２３４５６７８９【約物・記号】 [半角⇒]`~!@#$%^&*()-_=+[]{};':"\|¥,./<>? [全角⇒]｀〜！＠＃＄％＾＆＊（）−＿＝＋「」｛｝『』；’：”｜“”￥、。・＜＞？÷×〒○◎✕△□■〓♪※→☆★♯＃【スペース】これは　全角スペースです。これは半角スペースです。【次の行頭は改行インデント（全角スペース）】
　この行の冒頭は全角スペースの改行インデント。
この行の冒頭は半角スペースの改行インデント。こちらは、多くのブラウザの仕様ではインデントとして表示されません。

H3見出し

これはダミーテキストです。This is dummy text.1234567890、１２３４５６７８９０。完成イメージを摑みやすくする為に各種の文字を織り交ぜた文章を仮配置しています。

H3見出し

セクション 2

　これはダミーテキストです。This is dummy text.ここにはダミーテキストを配置しています。完成イメージを摑みやすくする為に、ひらがな、カタカナ、漢字、alphabet、など各種の文字を織り交ぜた文章を仮配置しています。
　１２３４５６７８９０。！＠＃＄％＾＆＊（）。1234567890, !@#$%^&*().
　これはダミーテキストです。This is dummy text.ここにはダミーテキストを配置しています。完成イメージを摑みやすくする為に、ひらがな、カタカナ、漢字、alphabet、など各種の文字を織り交ぜた文章を仮配置しています。

H3見出しsp

これはダミーテキストです。This is dummy text.１２３４５６７８９０。！＠＃＄％＾＆＊（）。各種の文字を織り交ぜた文章を仮配置しています。これはダミーテキストです。This is dummy text.１２３４５６７８９０。！＠＃＄％＾＆＊（）。各種の文字を織り交ぜた文章を仮配置しています。