なまけもの活動日記スマートフォン用の表示で見るなまけもの活動日記ゲームや音楽、サブカルチャーがすき。WordPressを学ぶポケモンやってたらインターンの日になりました。今なら感想文書けそう。インターンもついにワードプレスまでやってきました。感じもするけど、もう!?って感じもします。〇初めに(前回の宿題)まず、宿題だったところ。メディアクエリのやつです。コードはあっているのになぜかうまく反映されなくて、頭を抱えていたのですが、原因はコードの単語と単語の間に半角スペースがないことでした。なんか前もあったぞ...。・コードの間の半角スペース・{}の閉じ忘れ・誤字脱字よくこの三点でうまくいっていないことが多いので、これから気を付けていかないといけないなあ、と思います。思ってても見落としがちになる...。php言語とデータベースの組み合わせで構成されたもののこと。今回習うwordpressもCMSの一つです。メリットとしては、すべてのブラウザ上で操作できたり、プログラミング知識が不要だったり、プラグインによって拡張ができるという点があるけど、デメリットとしては、システムの癖になれる必要があったり(作った人の癖がシステムに出るため)、セキュリティ上の脆弱性がある。確かにパスワードとかめっちゃ頑張れば突破されそう。〇wordpress・テーマ有料と無料のものがある。イメージに合ったテーマを探す。・メディア画像ファイルは容量に注意。10MB以上はアップできない。大き目でも1~2MBで十分。PDFのアップ、ユーチューブ動画の埋め込み、動画のアップロードもできる。・メリット世界中の人が使っているので、検索で問題解決がしやすい。追加CSSでアレンジ可能。実際に使ってみて思ったのは、めっちゃ簡単に、時間をかけずにできる、ということです。htmlとCSSだと、全部細かく打ちこまなくちゃいけなかったのに、書いてあるように入れていけば、すぐデザイン(テーマ)に反映されていく。すごーい!!確かに、プログラミングの知識がなくてもできる!これなら私でもがんばればできそう。今回やってみて、実際にwordpressで作業していくのが楽しみになりました。グリッドを学ぼう最近omoinotakeというバンドにはまりました。今も聞きながらブログを書いています。サブスクって色々聞けて素晴らしい...。インターンですがテストを挟んでかなりお久しぶりな感じです。今回はCSSの続きです。○グリッド格子状の線のこと。余白とかが一定になるように使われています。下のは左側がグリッドのおかげで揃っててみやすい。ウエブサイトとかにも使われてるやつ。福大のホームページとか動画サイトとかでも。それを実装するには以下のコードを組みます。htmlとCSS両方にちゃんと組めたら反映!!また、そこで大事になるのが列(column)と行(row)です。上記のコード中にも出てきてます。セルがこれで表せます。エリアを決めて、色を指定したりできます。そのためにまず、classを指定します。今回はone~sixまでclassを指定しました。そこからCSSでエリアを指定します。今回はthreeのエリアをスタイル指定します。ここでコード内に出てくる番号はグリッドライン番号です。この番号でエリアのcolumnとrowを指定しています。ここがちょっと自分はごちゃごちゃなりやすく苦手なので、ちゃんとわかるように頑張りたい。*気を付けること・:や;の付け忘れ・綴りのミス今回うまく反映されなかったのは大体ここだったので気を付けたいです...めちゃくちゃそれで今回うまくいかなかったので、宿題では気を付けてみようと思います。あとは、gapを使って、セルの間隔を指定したりできます。あるとめっちゃきれいにみえる。○レスポンシブデザインこれはスマホやパソコンなど違うデバイスで見たときに、ブラウザ・サイズに合わせて表示を適応することです。スマホ・フレンドリーは必須。Viewportを設定することで、ページをレスポンシブデザインに適応させることができます。○ライブラリこれは完成コードがあつまっている場所のことです。オープンソースとして有段活用できるし、無料ってすごい。今回レスポンシブデザインを学んだりして、どんどん自分が作るホームページが豪華になってくるのが楽しい。応用できるようになりたいです。CSSってなんだ?インターンも4回目。今回は新しいCSSを学びます。*CSSってなんだ??CSSってHTMLみたいに1から作るというか独立してる個体の言語かと思ってたら、同時に使うらしい。CSSのほうで、「HTMLで○○ってコードが出たら☆☆にするんだよ!」って指示を出すみたいなイメージで理解しました。これをつかうと、HTMLで同じコードを使うと、指示した仕様にすべての箇所がなります。楽!HTMLの方も、何回もごちゃごちゃ書かなくて良くて、見やすくなってよきです。*使い方まず、headにこのコードをいれます。これでこのCSSをこのページに反映しますよ〜みたいな!こんな感じにCSSは指示を出します。半角スペースやセミコロンに注意!実際に書くとこんな感じ。ここに書かれた指示通りに反映されます!*色々できるよこのセレクタやプロパティを組み合わせると色々できます。すごーい!正直イメージついてないものもあるので、宿題の時に色々してみたいです。*tabキーコード書く時にいい感じのスペースをあけてくれる。